アプリでOpenID ConnectとOKTAを使用したAngular認証をセットアップ

この記事は、もともとOkta Developer Blogで公開されました。 SitePointを可能にしてくれたパートナーをサポートしてくれてありがとう。 Angular（以前はAngular 2.0と呼ばれていた）は、最新のシングルページアプリを構築する最も強力な方法の1つになりつつあります。コア強度は、再利用可能なコンポーネントを構築することにAngularの焦点であり、アプリケーションのさまざまな懸念を分離するのに役立ちます。たとえば、認証を取得してください：構築するのは苦痛ですが、コンポーネントにラップすると、アプリケーション全体で認証ロジックを再利用できます。 Angular CLIにより、新しいコンポーネント、さらにはプロジェクト全体を簡単に足場にすることができます。 Angular CLIを使用してAngular Codeをすばやく生成していない場合は、おやつを求めています！キーテイクアウト

すぐに足を踏み入れて、角CLIを使用して新しい角度アプリケーションを実行し、開発効率を高めます。

OKTAとOpenID Connectアプリをセットアップし、安全なユーザー管理を確保することにより、認証をシームレスに統合します。

Angularの強力なコンポーネントシステムを利用して、検索機能を追加して編集してユーザーエクスペリエンスを強化します。

ルーティングを利用してアプリケーション内のナビゲーションを管理し、よりスムーズなユーザーフローとより良い状態管理を可能にします。

フォーム検証を実装して、データの整合性を確保し、フィードバックを提供し、全体的な使いやすさを向上させます。 Angular's AuthGuardを使用して、機密情報を保護し、認証を実施するために、Angular's AuthGuardを使用してアプリケーションルートを安全に保護します。

角度アプリケーションを作成します
• ヒント：Angularアプリケーションの構築をスキップして認証を追加する場合は、NG-DEMOプロジェクトをクローンしてから、OKTAセクションでOpenID Connectアプリの作成をスキップできます。 >
必要なもの
• 約20分
• お気に入りのテキストエディターまたはIDE。 Intellijのアイデアをお勧めします

node.jsとnpmインストール。 nvm

を使用することをお勧めします

Angular CLIがインストールされました。 Angular CLIがインストールされていない場合は、npmインストールを使用してインストールします-g @angular/cli

NG新しいコマンドを使用して新しいプロジェクトを作成します：

<span>git clone https://github.com/mraible/ng-demo.git
</span>

これにより、NG-DEMOプロジェクトが作成され、NPMインストールが実行されます。完了するまでに約1分かかりますが、接続速度によって異なる場合があります。

ng -versionで使用しているAngular CLIのバージョンを見ることができます。
角度アプリケーションを実行します
プロジェクトは、WebPack Dev Serverで構成されています。それを開始するには、NG-DEMOディレクトリにいることを確認して、次に実行してください。

<span>git clone https://github.com/mraible/ng-demo.git
</span>

http：// localhost：4200で以下のような画面が表示されます。

新しいプロジェクトのテストが合格し、NGテストを実行することを確認できます。

検索機能を追加

ng new ng-demo

検索機能を追加するには、IDEまたはお気に入りのテキストエディターでプロジェクトを開きます。 Intellijのアイデアについては、ファイル>新しいプロジェクト> Static Webを使用して、NG-DEMOディレクトリを指してください。

端末ウィンドウで、プロジェクトのディレクトリにCDを入れて、次のコマンドを実行します。これにより、検索コンポーネントが作成されます

src/app/search/search.component.htmlを開き、デフォルトのhtmlを次のものに置き換えます。

Angularのルータードキュメントは、生成したばかりのSearchComponentへのルートをセットアップするために必要な情報を提供します。簡単な要約を次に示します：

<span>[mraible:~/dev] $ ng new ng-demo </span>installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages <span>for tooling via npm. </span>Installed packages <span>for tooling via npm. </span>You can <span><span>`ng set --global packageManager=yarn`</span>. </span>Project <span>'ng-demo' successfully created. </span><span>[mraible:~] 46s $ </span>にインポートします

タグを追加してルートを表示します。

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

ルーティングセットアップがあるので、検索機能の書き込みを続けることができます。

まだNGサーブランニングがある場合、ブラウザは自動的に更新する必要があります。そうでない場合は、http：// localhost：4200に移動します。空白の画面が表示される可能性があります。 JavaScriptコンソールを開くと、問題が表示されます

これを解決するには、src/app/app.module.tsを開き、@ngmoduleのインポートとしてformsmoduleを追加してください：

ng serve

検索フォームが表示されるはずです。

このコンポーネントにCSSを追加する場合は、src/app/search/search.component.cssを開き、CSSを追加します。たとえば、

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

このセクションでは、Angular CLIを使用した基本的な角度アプリケーションに新しいコンポーネントを生成する方法を示しました。次のセクションでは、JSONファイルとLocalStorageを作成して使用して偽のAPIを作成する方法を示します。

検索結果を取得するには、JSONファイルにHTTPリクエストを作成するSearchServiceを作成します。新しいサービスを生成することから始めます。

生成されたSearch.service.tsとそのテストをApp/共有/検索に移動します。このディレクトリを作成する必要があります。

$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

SRC/Assets/Data/People.jsonを作成して、データを保持します

src/app/shared/search/search.service.tsを変更し、そのコンストラクターの依存関係としてHTTPを提供します。この同じファイルで、すべての人を収集するためにgetall（）メソッドを作成します。また、JSONがマーシャリングされる住所と個人のクラスを定義します。

これらのクラスをコンポーネントで消費できるようにするには、src/app/shared/index.tsを編集して、次を追加します。

<span>git clone https://github.com/mraible/ng-demo.git
</span>

このファイルを作成する理由は、個々のクラスを別々の行にインポートする必要があるのではなく、単一行に複数のクラスをインポートできるようにするためです。

クエリと検索の変数を追加できるようになりました。あなたがそこにいる間、コンストラクターを変更してSearchServiceを注入します。

ng new ng-demo

その後、Search（）メソッドを実装して、サービスのgetAll（）メソッドを呼び出します。

この時点で、ブラウザのコンソールに次のメッセージが表示される可能性があります。

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

上から「プロバイダーなし」エラーを修正するには、app.module.tsを更新してSearchServiceをインポートし、プロバイダーのリストにサービスを追加します。 SearchServiceはHTTPに依存するため、HTTPModuleもインポートする必要があります。

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

[検索]ボタンをクリックすると動作するはずです。結果の見栄えを良くするには、

タグを削除し、src/app/search/search.component.htmlの

に置き換えます。

ng serve

今では、検索結果の方が良くなりました。

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

しかし、待ってください、あなたはまだ検索機能を持っていません！検索機能を追加するには、SearchServiceに検索（）メソッドを追加します。

次に、Query変数を使用してこのメ​​ソッドを呼び出すためにSearchComponentをリファクタリングします。

$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

今度は、検索結果は入力するクエリ値によってフィルタリングされます。

このセクションでは、検索結果を取得して表示する方法を示しました。次のセクションでは、これに基づいて、レコードを編集および保存する方法を示します。

<span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>

編集機能を追加

src/app/search/search.component.htmlを変更して、人を編集するためのリンクを追加します。

次のコマンドを実行して、editComponentを生成します

import { Routes, RouterModule } from '@angular/router'; const appRoutes: Routes = [ {path: 'search', component: SearchComponent}, {path: '', redirectTo: '/search', pathMatch: 'full'} ]; @NgModule({ ... imports: [ ... RouterModule.forRoot(appRoutes) ] ... }) export class AppModule { } でこのコンポーネントのルートを追加します

src/app/edit/edit.component.htmlを更新して、編集可能なフォームを表示します。ほとんどの要素にID属性を追加したことに気付くかもしれません。これは、分度器との統合テストを作成するときに物事を簡単にするためです。

<span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>

editComponentを変更してモデルとサービスのクラスをインポートし、SearchServiceを使用してデータを取得します。

SearchServiceを変更して、IDで人を見つける機能を含み、保存します。そこにいる間に、LocalStorageの更新されたオブジェクトに注意するように検索（）メソッドを変更してください。

この時点で、人を検索して情報を更新できるはずです。 SRC/APP/EDIT/EDIT.COMPONENT.HTMLの

このURLを実行するときにSearchComponentが検索を自動的に実行しないため、次のロジックを追加してコンストラクターに追加します。

<span>git clone https://github.com/mraible/ng-demo.git
</span>

このサブスクリプションをクリーンアップするには、ondestroyを実装してNgondestroyメソッドを定義する必要があります。

ng new ng-demo

これらすべての変更を行った後、人の情報を検索/編集/更新できるはずです。それが機能する場合 - いい仕事！

フォーム検証

<span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>

気付くかもしれないことの1つは、フォームの入力要素をクリアして保存できることです。少なくとも、名前フィールドが必要です。それ以外の場合は、検索結果をクリックするものは何もありません。

名前を必要とするには、edit.component.htmlを変更して、。

また、すべてを要素でラップする必要があります。

タグの後に

を追加し、最後のの前に閉じます。また、フォームに（ngsubmit）ハンドラーを追加し、保存ボタンを通常の送信ボタンにするように変更する必要があります。

これらの変更を行った後、必要な属性を持つフィールドが必要になります。

このスクリーンショットでは、アドレスフィールドが空白になっていることに気付くかもしれません。これは、コンソールのエラーによって説明されます

$ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64

修正するには、すべてのアドレスフィールドに名前属性を追加します。たとえば、

ng serve

今ではすべてのフィールドに値が表示され、名前が必要です。

ブラウザに頼る代わりに独自の検証メッセージを提供する場合は、次の手順を完了します。

$ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>

ngnativeValidateを削除し、＃editform = "ngform"を要素に追加します

＃name = "ngmodel"を要素に追加します。

$ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts

[disabled] = "！editform.form.valid"を

save

button。に追加します

[名前]フィールドの下に次のものを追加して、検証エラーを表示します。

1. フォームと検証の詳細については、Angular Formsドキュメントを参照してください。 Okta
でOpenID Connectアプリを作成します
2. OpenID Connect（OIDC）は、OAUTH 2.0プロトコルの上に構築されています。これにより、クライアントはユーザーの身元を確認し、基本的なプロファイル情報を取得できます。詳細については、https：//openid.net/connect。
を参照してください
3. ユーザー認証のためにOKTAを統合するには、最初にOIDCアプリケーションを登録して作成する必要があります。

   OKTAアカウントにログインするか、持っていない場合は作成します。アプリケーションに移動し、[アプリケーションの追加]ボタンをクリックします。スパを選択し、[次へ]をクリックします。次のページで、http：// localhost：4200をベースURI、ログインリダイレクトURI、およびログアウトリダイレクトURIとして指定します。 [完了]をクリックすると、次のような設定が表示されます。

   Manfred Steyerのプロジェクトをインストールして、NPMを使用してOAuth 2とOpenID Connectサポートを追加します。
   src/app/app.component.tsを変更してOauthServiceをインポートし、OKTAアプリケーションの設定を使用するようにアプリを構成します。

   <span>git clone https://github.com/mraible/ng-demo.git
   </span>

   src/app/home/home.component.tsを作成し、ログインとログアウトボタンを持つように構成します。

   ng new ng-demo
   

   src/app/shared/auth/auth.guard.service.tsを作成します。ユーザーが認証されていない場合は、ホームコンポーネントに移動します。

   <span>[mraible:~/dev] $ ng new ng-demo </span>installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages <span>for tooling via npm. </span>Installed packages <span>for tooling via npm. </span>You can <span><span>`ng set --global packageManager=yarn`</span>. </span>Project <span>'ng-demo' successfully created. </span><span>[mraible:~] 46s $ </span>
   src /app /app.module.tsでoauthmoduleをインポートし、新しいホームコンポーネントを構成し、 /searchをロックし、authguardでルートを編集します。

   $ ng <span>--version
   </span>    _                      _                 ____ _     ___
      / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   </span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   </span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
   </span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
   </span>               <span>|___/
   </span>@angular/cli: <span>1.3.2
   </span>node: <span>8.4.0
   </span>os: darwin x64
   

   これらの変更を行った後、NGサーブを実行してログインボタンを表示できるはずです。

   ng serve
   

   ログインボタンをクリックして、OKTAアプリケーションで構成されている人の1人でサインインします。
   ログインした後、[

   $ ng <span>test
   </span><span>...
   </span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
   </span>

   検索] をクリックして、人々の情報を表示できます。 それが機能する場合 - 素晴らしい！アプリで独自のログインフォームを構築する場合は、oauthServiceを使用してOkta Auth SDKを使用する方法を学び続けます。 OKTA AUTH SDK

   による

   認証 OKTA Auth SDKは、OTKAの認証APIおよびOAUTH 2.0 APIの上に構築され、JavaScriptを使用して完全にブランドのサインインエクスペリエンスを作成できます。 NPM：

   を使用してインストールします このライブラリのメインJavaScriptファイルへの参照を.Angular-cli.json：

   このセクションのコンポーネントは、ブートストラップCSSクラスを使用します。 Bootstrap 4をインストールします
   src/styles.cssを変更して、BootstrapのCSSファイルへの参照を追加します。
   src/app/app.component.htmlを更新して、Navbarおよびグリッドシステムにブートストラップクラスを使用します。
   src/app/shared/auth/okta.auth.wrapper.tsを作成して、okta auth sdkをラップし、oauthserviceと統合します。そのlogin（）メソッドはOktaauthを使用してセッショントークンを取得し、IDとアクセストークンと交換します。

   上記のコードでは、oauthService.trylogin（）idtoken and Accesstokenを分割および保存するため、oauthservice.getidtoken（）およびoauthservice.getaccestoken（）。

   <span>git clone https://github.com/mraible/ng-demo.git
   </span>

   app.module.ts。

   のプロバイダーとしてoktaauthwrapperを追加します

   ng new ng-demo
   

   ホームコンポーネントを変更して、Oktaauthを宣言し、ログインするボタンとサインインフォームがあるようにテンプレートを変更します。

   <span>[mraible:~/dev] $ ng new ng-demo
   </span>installing ng
     create .editorconfig
     create README.md
     create src/app/app.component.css
     create src/app/app.component.html
     create src/app/app.component.spec.ts
     create src/app/app.component.ts
     create src/app/app.module.ts
     create src/assets/.gitkeep
     create src/environments/environment.prod.ts
     create src/environments/environment.ts
     create src/favicon.ico
     create src/index.html
     create src/main.ts
     create src/polyfills.ts
     create src/styles.css
     create src/test.ts
     create src/tsconfig.app.json
     create src/tsconfig.spec.json
     create src/typings.d.ts
     create .angular-cli.json
     create e2e/app.e2e-spec.ts
     create e2e/app.po.ts
     create e2e/tsconfig.e2e.json
     create .gitignore
     create karma.conf.js
     create package.json
     create protractor.conf.js
     create tsconfig.json
     create tslint.json
   Successfully initialized git.
   Installing packages <span>for tooling via npm.
   </span>Installed packages <span>for tooling via npm.
   </span>You can <span><span>`ng set --global packageManager=yarn`</span>.
   </span>Project <span>'ng-demo' successfully created.
   </span><span>[mraible:~] 46s $
   </span>

   これらの変更を行った後、ホームコンポーネントは次のようにレンダリングする必要があります。
   ユーザー名とパスワードフィールドにローカル変数を追加し、OktaauthWrapperをインポートし、HomeComponentにloginWithPassword（）メソッドを実装します。

   アプリの登録ユーザーのいずれかを使用して、フォームを使用してサインインできるはずです。ログインした後、検索リンクをクリックして人の情報を表示できます。

   $ ng <span>--version
   </span>    _                      _                 ____ _     ___
      / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   </span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   </span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
   </span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
   </span>               <span>|___/
   </span>@angular/cli: <span>1.3.2
   </span>node: <span>8.4.0
   </span>os: darwin x64
   

   Angular okta
   すべてが機能している場合 - おめでとうございます！問題が発生した場合は、OKTAタグでオーバーフローをスタックするために質問を投稿するか、Twitter @Mraibleで私を叩きます。 このブログ投稿で作成されたアプリケーションの完了バージョンをGitHubで見つけることができます。 Angularのセキュリティの詳細については、Angularのセキュリティ文書を参照してください。 OpenID Connectの詳細については、以下のなだめるようなビデオを見ることをお勧めします。

   oidc

   を使用した角度認証に関するよくある質問（FAQ）

   角度認証におけるOIDCの役割は何ですか？

以上がアプリでOpenID ConnectとOKTAを使用したAngular認証をセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。