ホームページ >ウェブフロントエンド >jsチュートリアル >15分でOktaのサインインウィジェットを使用してAngularアプリを構築する
キーハイライト:
角度アプリケーションの構築
Angular 4およびAngular CLI 1.0を使用して、新しいアプリケーションを作成するのは簡単です:
Angular CLIのインストール:
新しいアプリケーションを作成:
。
で機能を確認します
npm install -g @angular/cli
npm install --save @okta/okta-signin-widget
src/styles.css
:<code class="language-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';</code>
src/app/shared/okta/okta.service.ts
を作成します:<code class="language-typescript">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; } }</code>
Okta
app.module.ts
に置き換えます。
okta.service.ts
ClientId
Okta Domain
ログイン/ログアウト機能を
app.component.ts
app.component.html
テストとカスタマイズ
アプリケーションをテストします。 のプロバイダーとしてを追加して、潜在的なテスト障害に対処します。 カスタムCSSを作成して、ウィジェットの外観をカスタマイズします。 完成したアプリケーションはGitHubで利用できます
よくある質問(FAQ)ng serve
(これらは簡潔に要約されています。完全な回答については、オリジナルを参照してください。)Okta
src/app/app.component.spec.ts
AngularとのOKTA統合:
OKTA Angular SDKをインストールし、OKTAドメインとクライアントIDで構成し、認証、セッション管理、およびルートセキュリティにその方法を使用します。 oktaauthService:
ログイン、ログアウト、認証チェック、セッション処理など、ユーザー認証を管理します。OktaAuthGuard
セッションの作成、チェック、更新、閉鎖のためにOktaの方法を使用します。
以上が15分でOktaのサインインウィジェットを使用してAngularアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。