このチュートリアルは、バックエンドREST APIを介したCRUD操作を含むOktaのOpenID Connect（OIDC）APIによって保護(hù)されているVue.jsアプリケーションを構(gòu)築することをガイドします。 Vue-Cli、Vue-Router、およびOkta Vue SDKを使用してVue.jsを使用します。

主要な機(jī)能：

OKTAのOIDC APIを使用して、

保証認(rèn)証 Vue-cliのPWAテンプレートを使用した

vue.jsプロジェクトの足場(chǎng)。
• 認(rèn)証フロー管理とルート保護(hù)のためのokta vue sdk。
• CRUD操作用のバックエンドREST APIサーバー（ノード、Express、Sequelize）。 認(rèn)証ステータスに基づく
動(dòng)的ナビゲーション。
認(rèn)証とCRUD機(jī)能の包括的なテスト
• about vue.jsについて：
vue.jsは、高性能Webアプリケーションを構(gòu)築するのに最適なユーザーフレンドリーで強(qiáng)力なJavaScriptフレームワークです。

このチュートリアルでは、フロントエンドスパ（ホームページ、ログイン/ログアウト、投稿マネージャー）とバックエンドREST APIサーバー（Express、Sequelize、Epilogue）を作成します。 OKTAのOIDCは、Okta Vue SDKを介して認(rèn)証を処理します。サーバーは、OKTAのJWT Verifierミドルウェアによって検証されたJWTベースの認(rèn)証を使用します。 露出したエンドポイント（、

、

、

、

）はすべて、有効なアクセストークンが必要です。

vue.jsアプリのセットアップ：

GET /posts GET /posts/:idプロジェクトを足場(chǎng)に使用するには：POST /posts PUT /posts/:id DELETE /posts/:idこれにより、ホットなリロードやユニットテストなどの機(jī)能を備えたPWAが作成されます。

。

にアクセスします ブートストラップのインストール：

vue-cliBootstrap-VueでUIを強(qiáng)化します：

npm install -g vue-cli
vue init pwa my-vue-app
cd ./my-vue-app
npm install
npm run dev

http://localhost:8080を変更して、bootstrap-vueとそのcssを含めるように

okta認(rèn)証統(tǒng)合：

OKTA開(kāi)発者アカウントにOIDCアプリケーションを作成します

Okta Vue SDK：

npm i --save bootstrap-vue bootstrap

をインストールします ./src/main.jsOKTAのプラグインでルーター（

）を構(gòu)成し、プレースホルダーをOKTAドメインとクライアントIDに置き換えます。 ルート保護(hù)のために

を?qū)g裝します。

アプリのレイアウトのカスタマイズ：
2. npm i --save @okta/okta-vueを変更して、ユーザーの認(rèn)証ステータスを使用して「ログイン」または「ログアウト」を動(dòng)的に表示します。 Okta Vue SDKによって提供された
オブジェクトを使用してログインとログアウトメソッドを?qū)g裝します。
3. ./src/router/index.jsバックエンドREST APIサーバーの作成：AuthauthRedirectGuard
   1. 依存関係のインストール：npm i --save express cors @okta/jwt-verifier sequelize sqlite3 epilogue axios
   2. create./src/server.js。 このファイルは、Express、Expraceize（SQLiteを使用してSqliteを使用して）、RESTエンドポイント生成のためのエピローグ、および認(rèn)証用のOkta JWT Verifier Middlewareをセットアップします。

   投稿マネージャーコンポーネントの完了： 集中API相互作用のために、

   作成

   を作成します。このヘルパーは、アクセストークンをAPIリクエストに追加することを処理します。 次に、./src/api.jsヘルパー関數(shù)を使用してCRUD操作を?qū)g裝するように完了します。 ./src/components/PostsManager.vueapiアプリケーションのテスト：

   サーバー（）とフロントエンド（

   ）を?qū)g行します。認(rèn)証とCRUDの機(jī)能をテストします。

   node ./src/servernpm run dev

   その他のリソース：

   vue.js
   • [Okta Developer blog]（元のブログ投稿URL-利用可能な場(chǎng)合は実際のURLに置き換えます）
   • githubリポジトリ
   （FAQSセクションは、チュートリアルで既にカバーされている情報(bào)の繰り返しであるため削除されました。）

以上がoktaを使用してVueアプリに認(rèn)証を追加する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。