15分でOktaのサインインウィジェットを使用してAngularアプリを構築する

キーハイライト：

• 逆方向の互換性がないにもかかわらず、Angular 2と4は非常に人気があり、UIフレームワークの中で3位を確保しています（ReactとHTML5の後）。
Oktaは、Angularアプリケーションとシームレスに統合された、合理化されたユーザーアカウント管理のためのユーザーフレンドリーなAPIを提供します。 そのサインインウィジェットは、パスワードのリセット、忘れられたパスワードの回復、堅牢な認証機能を含むカスタマイズ可能なJavaScriptソリューションを提供します。 OktaのサインインウィジェットをAngularプロジェクトに統合することは、NPMとMinimal Codeを使用して簡単で、アプリケーションの美学に合わせてカスタマイズを可能にします。 Angularアプリケーション内の徹底的なテストは、OKTAによって促進され、OKTAをプロバイダーとして定義することで簡単に解決できます。 完全なアプリケーションはGithubでアクセスできます
AngularjsはかつてJavaScript MVCフレームワークを支配していましたが、その後のバージョンの非バックワード互換性の発表は、ReactやVue.jsなどの競合他社に利益をもたらし、コミュニティの激変を引き起こしました。 ただし、Angular 2と4のTypeScriptを活用して、3番目に人気のあるUIフレームワークとして強力な位置を維持していることが非常に回復力があります。
• この記事では、基本的な角度アプリケーションでのユーザー認証のためのOKTAのサインインウィジェットの迅速な統合を示しています。 角度の初心者には、補足的な角チュートリアルをお勧めします。ソースコードはgithubで利用できます
• なぜユーザー認証のためにOKTAを選択しますか？
OKTAは、ユーザーアカウントの管理、データの安全な保存、複数のアプリケーションへの接続に包括的なAPIを提供します。 これにより、アカウント管理が簡素化され、セキュリティが強化され、展開が加速されます。 OKTAサインインウィジェットは、パスワードリセット、忘れられたパスワード機能、強力な認証など、OKTAの標準サインインページの機能をミラーリングする簡単にカスタマイズ可能な埋め込み可能なJavaScriptログインソリューションを提供します。 ソーシャルログインは、消費者向けアプリケーションでもサポートされています

角度アプリケーションの構築

Angular 4およびAngular CLI 1.0を使用して、新しいアプリケーションを作成するのは簡単です：

Angular CLIのインストール：

新しいアプリケーションを作成：

。

で機能を確認します

oktaのサインインウィジェットの統合
1. npm install -g @angular/cli
   1. ウィジェットをインストールします：npm install --save @okta/okta-signin-widget
   2. cssをsrc/styles.css：
   に追加します

   @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
   @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';

   3. ウィジェットを管理するにはsrc/app/shared/okta/okta.service.tsを作成します：

   import { Injectable } from '@angular/core';
   import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
   
   @Injectable()
   export class Okta {
     widget;
   
     constructor() {
       this.widget = new OktaSignIn({
         baseUrl: 'https://{yourOktaDomain}.com',
         clientId: '{clientId}',
         redirectUri: 'http://localhost:4200'
       });
     }
   
     getWidget() {
       return this.widget;
     }
   }

   4. Okta app.module.ts

      OKTAアカウントにOpenID Connectアプリケーションを作成し、プレースホルダーを
   および
   5. 。

      に置き換えます。 okta.service.ts ClientId Okta Domainログイン/ログアウト機能を

      に実装し、
   を調整してウィジェットとユーザー情報を表示します。

   6. app.component.tsapp.component.htmlテストとカスタマイズ

   run

   アプリケーションをテストします。 のプロバイダーとしてを追加して、潜在的なテスト障害に対処します。 カスタムCSSを作成して、ウィジェットの外観をカスタマイズします。 完成したアプリケーションはGitHubで利用できます

   よくある質問（FAQ）ng serve（これらは簡潔に要約されています。完全な回答については、オリジナルを参照してください。）Okta src/app/app.component.spec.ts AngularとのOKTA統合：

   OKTA Angular SDKをインストールし、OKTAドメインとクライアントIDで構成し、認証、セッション管理、およびルートセキュリティにその方法を使用します。 oktaauthService：

   ログイン、ログアウト、認証チェック、セッション処理など、ユーザー認証を管理します。
   • ルートの保護：を使用して、認証されたユーザーへのアクセスを制限します。
   • oktaコールバックコンポーネント：OKTAからの認証コールバックを処理します
   サインインページのカスタマイズ：
   • OKTA管理ダッシュボードまたはカスタムHTML/CSSを使用してカスタマイズします。 セッション管理：OktaAuthGuardセッションの作成、チェック、更新、閉鎖のためにOktaの方法を使用します。
   • Okta Token Manager：トークンを安全に管理します
   エラー処理：
   • SDKはエラー処理機能を提供します。
   テスト：
   • モックサービスでユニットテストを使用します。
   SDKの更新：
   • 使用。
   • OKTAは認証を簡素化し、開発者がアプリケーション機能に集中できるようにします。 無料の開発者アカウントは実験に利用できます。 質問については、スタックオーバーフロー、Twitter、またはGitHubを参照してください

以上が15分でOktaのサインインウィジェットを使用してAngularアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。