Back to Question Center
0

20分で認証を使用する角型アプリケーションを作成する            20分で認証付きの角型アプリケーションを作成する関連リンク: APIsnpmAjaxES6jQueryMore ...

1 answers:
20分で認証を使用する角型アプリケーションを作成する

この記事はもともとOKTA Developer Blogに掲載されました。 SitePointを可能にするパートナーをサポートしていただきありがとうございます。

Angular(旧Angular 2.0)は、現代の単一ページアプリケーションを構築する最も強力な方法の1つに急速になりつつあります。中核的な強みは、アプリケーションのさまざまな問題を切り離すのに役立つ、再利用可能なコンポーネントの構築に焦点を当てます。たとえば、ビルドするのは苦労かもしれませんが、コンポーネントにラップすると、アプリケーション全体で認証ロジックを再利用できます。

Semalt CLIを使用すると、新しいコンポーネントやプロジェクト全体の足場を簡単に構築できます。 Semaltコードをすばやく生成するためにSemalt CLIを使用していない場合、あなたは治療の対象です!

この例では、Angular Development用のツールであるAngular CLIを使用して簡単なWebアプリケーションを構築します。検索機能と編集機能を備えたアプリケーションを作成し、認証を追加します。

角型アプリケーションを作成する

ヒント:Angularアプリケーションの構築をスキップして認証を追加するには、私の ng-demo プロジェクトをクローンしてから、OpenID Connectアプリケーションの作成にスキップしてくださいOktaセクションで。

   gitクローンhttps:// github。 com / mraible / ng-demo git   

必要なもの

  • 約20分
  • お気に入りのテキストエディタまたはIDE。私はIntelliJ IDEAをお勧めします
  • ノード。 jsとnpmがインストールされています。 nvmの使用をお勧めします
  • Angular CLIがインストールされています。 Angular CLIをインストールしていない場合は、 npm install -g @ angular / cli を使用してインストールします。

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

   ng new ng-demo   

これで ng-demo プロジェクトが作成され、npm install が実行されます。完了までには約1分かかりますが、接続速度によって異なる場合があります。

   [mraible:〜/ dev] $ ng new ng-demoインストール作成します。 editorconfigREADMEを作成します。 mdsrc / app / appを作成します。成分。 CSSsrc / app / appを作成します。成分。 htmlsrc / app / appを作成します。成分。仕様。 TSsrc / app / appを作成します。成分。 TSsrc / app / appを作成します。モジュール。 TSsrc / assets /を作成します。ギターsrc / environments / environmentを作成してください。 prod。 TSsrc / environments / environmentを作成してください。 TSsrc / faviconを作成します。イコsrc / indexを作成します。 htmlsrc / mainを作成します。 TSsrc / polyfillsを作成します。 TSsrc / stylesを作成します。 CSSsrc / testを作成します。 TSsrc / tsconfigを作成します。アプリ。ジョソンsrc / tsconfigを作成します。仕様。ジョソンsrc / typingsを作成します。 d。 TS作成します。角張ったジョソンe2e / appを作成します。 e2e-spec。 TSe2e / appを作成します。 po。 TSe2e / tsconfigを作成します。 e2e。ジョソン作成します。ギティニョーレカルマを作る。 conf。 jsパッケージを作成します。ジョソン分度器を作りなさい。 conf。 jstsconfigを作成します。ジョソンtslintを作成します。ジョソンGitを正常に初期化しました。 npmによるツーリングのためのパッケージのインストール。 npmでツーリング用のパッケージをインストールしました。 `--global packageManager = yarn`を設定することができます。プロジェクト 'ng-demo'が正常に作成されました。 [可能:〜] 46s $   

使用しているAngular CLIのバージョンは、 ng --version で確認できます。

   $ ng --version_ _ ____ _ ___/ \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ |/△\ | '_ \ / _` | | | | | / _` | '__ | | | | | | |/ ___ \ | | | | (_ | | | _ | |(_ | | | | | ___ | | ___ |/ _ / \ _ \ _ | | _ | \ __、| \ __、_ | _ | \ __、_ | _ | \ ____ | _____ | ___ || ___ /@ angular / cli:1. 3. 2ノード:8. 4. 0OS:ダーウィンx64   

角度のあるアプリケーションを実行する

このプロジェクトは、webpack dev server - limitierte uhrenbox.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

あなたの新しいプロジェクトのテストが合格したことを確認し、テスト を実行してください :

   $ ngテスト。 。 。 Chrome 60. 0. 3112(Mac OS X 10. 12. 6):3のうちの3つを実行SUCCESS(0. 239秒/0 213秒)   

検索機能を追加する

検索機能を追加するには、IDEまたはお気に入りのテキストエディタでプロジェクトを開きます。 IntelliJ IDEAの場合は、ファイル>新規プロジェクト>静的Webを使用し、 ng-demo ディレクトリをポイントします。

ターミナルウィンドウでプロジェクトのディレクトリに移動し、次のコマンドを実行します。これにより、検索コンポーネントが作成されます。

   $ ng成分検索コンポーネントをインストールするsrc / app / search / searchを作成してください。成分。 CSSsrc / app / search / searchを作成してください。成分。 htmlsrc / app / search / searchを作成してください。成分。仕様。 TSsrc / app / search / searchを作成してください。成分。 TSsrc / app / appを更新してください。モジュール。 TS   

src / app / search / searchを開きます。成分。 html を編集し、デフォルトのHTMLを次のように置き換えます。

    

検索

"><ボタンタイプ= "ボタン"(クリック)= "検索 ">検索
 {{searchResults | json}} 

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

のsrc / app / appにあります。モジュール。 appRoutes 定数を追加し、それを @NgModule にインポートする:

    'Route、RouterModule}を' @ angular / router 'からインポートする。const appRoutes:ルート= [{パス: 'search'、コンポーネント:SearchComponent}、{path: ''、redirectTo: '/ search'、pathMatch: 'full'}];@NgModule({。。imports:[。。RouterModule。forRoot(appRoutes)]。 。 。 })エクスポートクラスAppModule {}   

のsrc / app / appにあります。成分。 html 、プレースホルダの内容を調整し、 タグを追加してルートを表示します。

    

{{title}}へようこそ! <! - ルーティングされたビューはここに行く - >

ルーティングの設定が完了したので、検索機能の作成を続行できます。

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

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

これを解決するには、src / app / app を開きます。モジュール。 @NgModule にインポートとしてFormsModule とts を追加

    '@ angular / forms'から{FormsModule}をインポートする。@NgModule({。。imports:[. 。FormsModule]。 。 。 })エクスポートクラスAppModule {}   

検索フォームが表示されます。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

このコンポーネントにCSSを追加する場合は、 src / app / search / searchを開きます。成分。 CSS を追加し、CSSを追加します。例えば、

   :ホスト{表示ブロック;パディング:0 20ピクセル。}   

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

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

   $ ngサービスの検索サービスのインストールsrc / app / searchを作成します。サービス。仕様。 TSsrc / app / searchを作成します。サービス。 TS警告サービスは生成されますが、提供されません。使用するために提供されなければなりません   

生成された 検索を移動する。サービス。 ts とそのテストを app / shared / search に追加します。このディレクトリを作成する必要があります。

   mkdir -p src / app / shared / searchmv src / app / search。サービス。 * src / app / shared / search /。    

src / assets / data / peopleを作成します 。あなたのデータを保持するjson . サービス。 ts を生成し、Http をそのコンストラクタの依存として提供します 。この同じファイルで、 getAll メソッドを作成してすべての人を集めます。また、JSONをマーシャリングする Address および Person クラスを定義します。

    '@ angular / core'から{Injectable}をインポートする。'@ angle / http'から{Http、Response}をインポートします。インポート 'rxjs / add / operator / map';@Injectable  エクスポートクラスSearchService {コンストラクタ(private http:Http){}すべて取得   {それを返す。 http。 get( 'assets / data / people。json')。マップ((res:Response)=> res。json  );}}輸出クラス住所{ストリート:ストリング;都市:文字列;状態:文字列;zip:string;コンストラクタ(obj ?: any){この。 street = obj && obj。通り||ヌル;この。都市= obj && obj。都市||ヌル;この。状態= obj && obj。州||ヌル;この。 zip = obj && obj。ジップ||ヌル;}}エクスポートクラスPerson {ID番号;名前:文字列;電話:文字列;住所:住所。コンストラクタ(obj ?: any){この。 id = obj && Number(obj。id)||ヌル;この。名前= obj && obj。名前||ヌル;この。 phone = obj && obj。電話||ヌル;この。アドレス= obj && obj。アドレス||ヌル;}}   

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

   輸出*から '。 /検索/検索。サービス';   

このファイルを作成する理由は、個々のクラスを別々の行にインポートするのではなく、1行に複数のクラスをインポートできるからです。

src / app / search / searchにある。成分。 ts 、これらのクラスのインポートを追加します。

   from {Person、SearchService}をインポートします。 。 /共有 ';   

query および searchResults 変数を追加できます。そこにいる間に、 SearchService を挿入するようにコンストラクタを変更します。

   exportクラスSearchComponentはOnInit {クエリ文字列;searchResults:Array ;コンストラクタ(private searchService:SearchService){}   

次に、サービスの getAll メソッドを呼び出す search メソッドを実装します。

   search  :void {この。 searchService。すべて取得  。申し込む(データ=> {これ。 searchResults =データ; }、エラー=>コンソール。ログ(エラー));}   

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

   ORIGINAL EXCEPTION:SearchServiceのプロバイダがありません!   

上記の「プロバイダなし」エラーを修正するには、app を更新してください。モジュール。 ts を使用してSearchService をインポートし、サービスをプロバイダのリストに追加します。 SearchService Http に依存するため、HttpModule もインポートする必要があります

   から{SearchService}をインポートする。 /共有 ';'@ angular / http'から{HttpModule}をインポートします。@NgModule({。。imports:[。。。HttpModule]、プロバイダ:[SearchService]、ブートストラップ:[AppComponent]})   

検索ボタンをクリックすると機能するはずです。結果をより良く見えるようにするには、

   タグを削除し、src / app / search / searchの  成分。 html  。  

   
名前<電話> Address
{{人。名前}} {{人。電話}} {{人。住所。ストリート}}
{{人。住所。都市}}、{{人。住所。状態}} {{人。住所。 zip}}

src / app / search / searchにCSSを追加します。成分。 css を使用してテーブルレイアウトを改善する.

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

しかし、あなたはまだ検索機能がありません!検索機能を追加するには、 SearchService search メソッドを追加します。

    'rxjs'から{Observable}をインポートする。検索(q:文字列):観測可能な {if(!q || q === '*'){q = '';} else {q = q。 toLowerCase  ;}それを返す。すべて取得  。 map(data => data。filter(item => JSON。stringify(item)。toLowerCase  。includes(q)));}   

次に、SearchComponent をリファクタリングして query 変数でこのメソッドを呼び出します。

   search  :void {この。 searchService。検索(this。query)。申し込む(データ=> {これ。 searchResults =データ; }、エラー=>コンソール。ログ(エラー));}   

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

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

編集機能を追加する

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

    
{{人。名前}}

次のコマンドを実行して EditComponent を生成します。

   $ ng gコンポーネントの編集コンポーネントをインストールするsrc / app / edit / editを作成してください。成分。 CSSsrc / app / edit / editを作成してください。成分。 htmlsrc / app / edit / editを作成してください。成分。仕様。 TSsrc / app / edit / editを作成してください。成分。 TSsrc / app / appを更新してください。モジュール。 TS   

src / app / app にこのコンポーネントのルートを追加します。モジュール。 ts

   const appRoutes:ルート= [{パス: 'search'、コンポーネント:SearchComponent}、{パス: 'edit /:id'、コンポーネント:EditComponent}、{path: ''、redirectTo: '/ search'、pathMatch: 'full'}];   

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

   

{{editName}}

住所:<アドレス>
<ボタン(クリック)= "保存 " id = "保存">保存 <ボタン(クリック)= "キャンセル " id = "キャンセル">キャンセル

EditComponent を修正してモデルおよびサービスクラスをインポートし、 SearchService を使用してデータを取得します。

   {Component、OnInit、OnDestroy}を '@ angular / core'からインポートします。{Address、Person、SearchService}を 'からインポートします。 。 /共有 ';'rxjs'から{Subscription}をインポートする。'ActivatedRoute、Router}を' @ angle / router 'からインポートする。@成分({セレクタ: 'app-edit'、テンプレートURL: ' /編集。成分。 html '、styleUrls:['。 /編集。成分。 css ']})エクスポートクラスEditComponentはOnInit、OnDestroy {人:人;editName:文字列;editPhone:文字列;editAddress:アドレス。サブ:サブスクリプション。コンストラクタ(プライベートルート:ActivatedRoute、プライベートルータ:ルータ、プライベートサービス:SearchService){}ngOnInit  {この。サブ=これ。ルート。 params。サブスクライブする(params => {const id = + params ['id']; //(+)は文字列 'id'を数値に変換しますこの。サービス。 get(id)。購読する(人=> {if(人){この。 editName =人。名;この。 editPhone =人. editAddress =人。住所;この。人=人;} else {この。 gotoList  ;}});});}ngOnDestroy  {この。サブ。 unsubscribe  ;}キャンセル  {この。ルータ。ナビゲート(['/ search']);}セーブ   {この。人。名前=これ。 editName;この。人。電話=これ。 editPhone;この。人。アドレス= this。 editAddress;この。サービス。保存する(これは人)。この。 gotoList  ;}gotoList  {if(this。person){この。ルータ。ナビゲート(['/検索'、{用語:この人の名前}]);} else {この。ルータ。ナビゲート(['/ search']);}}}   

SearchService を変更して、自分のIDで人物を見つけ出して保存する機能を追加します。そこにいる間に、 localStorage の更新されたオブジェクトを認識するようにsearch メソッドを変更します。

   search(q:string):観測可能な {if(!q || q === '*'){q = '';} else {q = q。 toLowerCase  ;}それを返す。すべて取得  。マップ(データ=> {const結果:任意= [];データ。地図(アイテム=> {// localStorageの項目をチェックするif(localStorage ['person' + item。id]){item = JSON。パース(localStorage ['person' + item。id]);}if(JSON。stringify(item)。toLowerCase  。includes(q)){結果。プッシュ(アイテム);}});結果を返す。});}get(id:number){それを返す。すべて取得  。マップ(すべて=> {if(localStorage ['person' + id]){JSONを返します。 parse(localStorage ['person' + id]);}すべてを返すfind(e => e。id === id);});}保存する(人:人){localStorage ['人' +人。 id] = JSONです。 stringify(人);}   

src / app / edit / editにCSSを追加することができます。成分。フォームをより良く見せたい場合は、css を使用します。

   :ホスト{表示ブロック;パディング:0 20ピクセル。}ボタン{margin-top:10px;}   

この時点で、人を検索して情報を更新できるはずです。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

src / app / edit / editの 。成分。 html は、人のデータを更新するsave 関数を呼び出します。既にこれを実装しました。
この関数は、ユーザーを検索画面に戻すときにその人の名前をURLに追加するa gotoList 関数を呼び出します。

   gotoList  {if(this。person){この。ルータ。ナビゲート(['/検索'、{用語:この人の名前}]);} else {この。ルータ。ナビゲート(['/ search']);}}   

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

    '@ angular / router'から{ActivatedRoute}をインポートする。'rxjs'から{Subscription}をインポートします。 。 。サブ:サブスクリプション。コンストラクタ(private searchService:SearchService、プライベートルート:ActivatedRoute){この。サブ=これ。ルート。 params。サブスクライブする(params => {if(params ['term']){この。 query = decodeURIComponent(params ['term']);この。サーチ  ;}});}   

OnDestroy を実装 し、このサブスクリプションをクリーンアップする ngOnDestroy メソッドを定義したいと思うでしょう。

   {Component、OnInit、OnDestroy}を '@ angular / core'からインポートします。エクスポートクラスSearchComponentは、OnInit、OnDestroy {。 。 。 ngOnDestroy  {この。サブ。 unsubscribe  ;}}   

これらすべての変更を行うことで、人の情報を検索/編集/更新できるはずです。それがうまくいくなら - いい仕事です!

フォーム検証

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

名前を必要とするには、編集 を編集します。成分。名前 必須 属性を追加するhtml.

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

    

{{editName}}

" ngNativeValidate>。 。 。

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

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

このスクリーンショットでは、アドレスフィールドが空白であることがわかります。これは、コンソールのエラーによって説明されます。

   ngModelがフォームタグ内で使用されている場合は、name属性を設定するか、フォームngModelOptionsでコントロールを「スタンドアロン」として定義する必要があります。例1:例2:   

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

   <アドレス> 

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

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

ブラウザに依存するのではなく、独自の検証メッセージを提供する場合は、次の手順を実行します。

  1. ngNativeValidate を削除し、 要素に#editForm = "ngForm" を追加します。
  2. 要素に #name = "ngModel" を追加します。
  3. Save ボタンに [disabled] = "!editForm。form。valid" を追加します。
  4. の名前 フィールドの下に以下を追加して、検証エラーを表示します。
    
名前は必須です

フォームと検証の詳細については、Semaltフォームのドキュメントを参照してください。

Okta

にOpenID Connectアプリケーションを作成する

OpenID Connect(OIDC)は、Semalt2.0プロトコルの上に構築されています。これにより、クライアントはユーザーの身元を確認し、基本プロファイル情報を取得することができます。詳細は、https:// openidを参照してください。 net / connect。

ユーザー認証のためにOktaを統合するには、まずOIDCアプリケーションを登録して作成する必要があります。

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

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

Manfred Steyerのプロジェクトをインストールして、npmを使用してOAuth 2とOpenID Semaltサポートを追加します。

   npm install --save angular-oauth2-oidc   

src / app / appを変更 します。成分。 OAuthService をインポート し、Oktaアプリケーションの設定を使用するようにアプリを設定します。

    'angle-oauth2-oidc';から{OAuthService、JwksValidationHandler}をインポートします。 。 。コンストラクタ(private oauthService:OAuthService){この。 oauthService。 redirectUri =ウィンドウ。ロケーション。原点;この。 oauthService。 clientId = '{クライアントID}';この。 oauthService。 scope = 'openidプロフィールメール';この。 oauthService。 issuer = 'https:// dev- {dev-id}。 oktapreview。 com ';この。 oauthService。 tokenValidationHandler =新しいJwksValidationHandler  ;//ディスカバリドキュメントをロードして、ユーザにログインしようとするこの。 oauthService。 loadDiscoveryDocument  . oauthService。 tryLogin  ;});}。 。 。    

src / app / home / homeを作成します 。成分。 と Logout ボタンを持つように設定します

    '@ angular / core'から{Component}をインポートする。'angle-oauth2-oidc'から{OAuthService}をインポートします。@成分({テンプレート: ` 

ようこそ、{{givenName}}!

">ログアウト

検索

">ログイン
`})エクスポートクラスHomeComponent {コンストラクタ(private oauthService:OAuthService){}ログイン {この。 oauthService。 initImplicitFlow ;}ログアウト {この。 oauthService。ログアウト ;}get givenName {constクレーム= this。 oauthService。 getIdentityClaims ;if(!claims){nullを返す。}クレームを返す['名前'];}}

src / app / shared / auth / authを作成 します。ガード。サービス。ユーザが認証されていない場合は、ts を押して HomeComponent にナビゲートします。

    '@ angular / core'から{Injectable}をインポートする。'@ angular / router'から{ActivatedRouteSnapshot、CanActivate、Router、RouterStateSnapshot}をインポートします。'angle-oauth2-oidc'から{OAuthService}をインポートします。@Injectable  エクスポートクラスAuthGuardはCanActivate {コンストラクタ(プライベートoauthService:OAuthService、プライベートルータ:ルータ){}canActivate(ルート:ActivatedRouteSnapshot、状態:RouterStateSnapshot):ブール値{if(this。oauthService。hasValidIdToken  ){真を返します。}この。ルータ。ナビゲート(['/ home']);偽を返します。}}   

エクスポート AuthGuard in src / shared / index。 ts

   輸出*から '。 / auth / auth。ガード。サービス';   

src / app / appの OAuthModule をインポートします。モジュール。 AuthGuard で新しい HomeComponent を設定し、 /検索 / edit のルートをロックします。

    'angle-oauth2-oidc'から{OAuthModule}をインポートします。{HomeComponent}を 'からインポートします。 / home / home。成分';{SearchService、AuthGuard}を 'からインポートします。 /共有 ';const appRoutes:ルート= [{パス: 'search'、コンポーネント:SearchComponent、canActivate:[AuthGuard]}、{パス: 'edit /:id'、コンポーネント:EditComponent、canActivate:[AuthGuard]}、{パス: 'home'、コンポーネント:HomeComponent}、{path: ''、redirectTo: 'home'、pathMatch: 'full'}、{パス: '**'、redirectTo: 'home'}];@NgModule({宣言:[。 。 。 HomeComponent]、輸入:[。 。 。 OAuthModule。 forRoot  ]、プロバイダ:[AuthGuard、SearchService]、ブートストラップ:[AppComponent]})エクスポートクラスAppModule {}   

これらの変更を行ったら、serve を実行してログインボタンを見ることができるはずです。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

ログイン ボタンをクリックして、あなたのOktaアプリケーションで設定されている人の一人とサインインします。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

ログイン後、 をクリックして検索 し、人々の情報を表示することができます。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

それがうまくいくなら - 素晴らしい!アプリケーションで独自のログインフォームを作成する場合は、 OAuthService でOkta Auth SDKを使用する方法を学ぶために読んでください。

Okta Auth SDKによる認証

Okta Auth SDKはOtkaのAuthentication APIとOAuth 2.0 APIの上に構築されており、JavaScriptを使用して完全にブランド化されたサインインエクスペリエンスを作成できます。

npmを使ってそれを書いてください:

   npm install @ okta / okta-auth-js --save   

このライブラリのメインJavaScriptファイルへの参照を で追加します。角張ったjson

    "scripts":["/ node_modules / @ okta / okta-auth-js / dist / okta-auth-js。min. Semalt 4. 

をインストールします。
   npm bootstrap @ 4をインストールします。 0-β-save   

src / stylesを修正する 。 css を使用して、ブートストラップのCSSファイルへの参照を追加します。

   @import "〜bootstrap / dist / css / bootstrap。css";   

src / app / appを更新してください 。成分。 html を使用して、そのNavbarおよびGridシステムにBootstrapクラスを使用します。

    

src / app / shared / auth / oktaを作成します 。 auth。ラッパー。 ts を使ってOkta Auth SDKをラップし、それを OAuthService と統合します。その login メソッドは、 OktaAuth を使用してセッショントークンを取得し、それをIDとアクセストークンと交換します。

    'angle-oauth2-oidc'から{OAuthService}をインポートします。'@ angular / core'から{Injectable}をインポートする。constを宣言するOktaAuth:any;@Injectable  エクスポートクラスOktaAuthWrapper {プライベートauthClient:any;コンストラクタ(private oauthService:OAuthService){この。 authClient = new OktaAuth({url:これ。 oauthService。発行者});}ログイン(ユーザ名:文字列、パスワード:文字列):Promise  {それを返す。 oauthService。 createAndSaveNonce  。次に(nonce => {それを返す。 authClient。サインイン({ユーザー名:ユーザー名、パスワード:パスワード})。 ((応答)=> {if(レスポンスステータス=== '成功'){それを返す。 authClient。トークン。 getWithoutPrompt({clientId:これ。 oauthService。クライアントID、responseType:['id_token'、 'token']、スコープ:['openid'、 'profile'、 'email']、sessionToken:レスポンスsessionToken、ノンス:ノンス、redirectUri:ウィンドウ。ロケーション。原点})。次に((トークン)=> {const idToken =トークン[0]。 idToken;const accessToken =トークン[1]。アクセストークン;const keyValuePair = `#id_token = $ {encodeURIComponent(idToken)}&access_token = $ {encodeURIComponent(accessToken)}`;それを返す。 oauthService。 tryLogin({<1>customHashFragment:keyValuePair、disableOAuthStateCheck:true});});} else {プロミスを返す。拒否( '+応答。ステータス+ステータス'は処理できません)。}});});}}   

上記のコードでは、 oauthServiceです。 tryLogin は、idToken のaccessToken OAuthServiceを使用して取得できるように解析して格納します。 getIdToken および OAuthService。 getAccessToken

エクスポート OktaAuthWrapper in src / shared / index。 ts

   輸出*から '。 / auth / okta。 auth。ラッパー ';   

アプリのプロバイダとしてOktaAuthWrapper を追加します 。モジュール。 ts

   from {SearchService、AuthGuard、OktaAuthWrapper}をインポートします。 /共有 ';@NgModule({。。providers:[。。OktaAuthWrapper]、ブートストラップ:[AppComponent]})   
OktaAuth を宣言し、その テンプレート を変更してログインボタンとサインインフォームを持つようにHomeComponent
を変更する.

`})

これらの変更を行った後、 HomeComponent は次のようにレンダリングする必要があります。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

ユーザ名とパスワードフィールドにローカル変数を追加し、OktaAuthWrapper をインポート し、HomeComponent のloginWithPassword メソッドを実装します。

   from {OktaAuthWrapper}を 'からインポートする。 。 /共有 '; 。 。ユーザー名;パスワード;コンストラクタ(private oauthService:OAuthService、プライベートoktaAuthWrapper:OktaAuthWrapper){}loginWithPassword  {この。 oktaAuthWrapper。ログイン(これはユーザー名、これ、パスワード)。 (_ =>コンソール。デバッグ( 'ログイン'))。 catch(err =>コンソール。エラー( 'error logging in'、err));}   

あなたのアプリケーションの登録ユーザーの1人を使って、フォームを使ってサインインすることができます。ログイン後、 検索 リンクをクリックして、ユーザーの情報を表示することができます。

Create an Angular App with Authentication in 20 MinutesCreate an Angular App with Authentication in 20 MinutesRelated Semalt:
APIsnpmAjaxES6jQueryMore.

角度+ Okta

すべてがうまくいくなら - おめでとう!問題が発生した場合は、oktaタグでStack Overflowに質問を投稿するか、Semalt @mraibleで質問してください。

GitHubのこのブログ記事で作成した完成版のアプリケーションを見つけることができます。 Angularでのセキュリティの詳細については、Angularのセキュリティドキュメントを参照してください。 OpenID Connectについてもっと知りたい場合は、以下のスムージングビデオを見てください。

March 1, 2018