oktaを使用してVueアプリに認証を追加する方法

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

主要な機能：

OKTAのOIDC APIを使用して、

保証認証 Vue-cliのPWAテンプレートを使用した

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

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

、

、

、

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

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

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

。

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

vue-cliBootstrap-VueでUIを強化します：

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認証統合：

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

Okta Vue SDK：

npm i --save bootstrap-vue bootstrap

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

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

を実装します。

アプリのレイアウトのカスタマイズ：
2. npm i --save @okta/okta-vueを変更して、ユーザーの認証ステータスを使用して「ログイン」または「ログアウト」を動的に表示します。 Okta Vue SDKによって提供された
オブジェクトを使用してログインとログアウトメソッドを実装します。
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エンドポイント生成のためのエピローグ、および認証用のOkta JWT Verifier Middlewareをセットアップします。

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

   作成

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

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

   ）を実行します。認証とCRUDの機能をテストします。

   node ./src/servernpm run dev

   その他のリソース：

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

以上がoktaを使用してVueアプリに認証を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。