認証プロジェクトテンプレート

Angular Schematics または Ignite UI CLI を使用して Angular プロジェクトを作成する場合、認証はナビゲーションテンプレートを選択した後にアドオンオプションとして利用できます。ユーザー管理でアプリを素早く開始できるよう、追加セットアップをできるだけ必要としないクライアント側認証モジュールの基本的な実装を提供します。

認証プロジェクトの作成

インタラクティブウィザード

認証はナビゲーションテンプレートを選択した後、インタラクティブウィザードの追加ステップとして提供されます。フローは次のとおりです。

プロジェクトテンプレートを選択します: Empty Project、Side Navigation、または Side Navigation Mini。
Side Navigation または Side Navigation Mini を選択した場合、ウィザードが「このプロジェクトに認証を追加しますか?」というプロンプトを表示します。
Empty Project を選択した場合、認証のプロンプトは表示されません。

「はい」と回答すると、次の 2 つの認証バリアントのいずれかが生成されます。

Side Navigation + 認証 - 認証モジュールで拡張されたサイドナビゲーションシェル
Side Navigation Mini + 認証 - 認証モジュールで拡張されたコンパクトなサイドナビゲーションシェル

ウィザードの手順の完全なガイドは、Ignite UI CLI を使用したステップバイステップガイドまたは Ignite UI for Angular Schematics を使用したステップバイステップガイドをご覧ください。

直接コマンド (上級者向け)

認証テンプレート ID を ig new または ng new に直接渡して、非インタラクティブなプロジェクト作成を行うこともできます。認証はウィザードではフォローアップオプションとして提供されるため、これらの ID はインタラクティブウィザードのテンプレートリストには表示されません。

Side Navigation + 認証 - Ignite UI CLI:

ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth

Side Navigation + 認証 - Angular Schematics:

ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-auth

Side Navigation Mini + 認証 - Ignite UI CLI:

ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-mini-auth

Side Navigation Mini + 認証 - Angular Schematics:

ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=side-nav-mini-auth

説明

Side Navigation + 認証バリアントと Side Navigation Mini + 認証バリアントはいずれも、それぞれのナビゲーションベースに基づいて構築され、ログインボタンまたはログインユーザーのアバターを表示するプロファイルページとログインセクションをアプリのナビゲーションバーに追加します。

ログインバーには、サインインまたはサインアップするためのダイアログも統合されます。

このプロジェクトは、さまざまな外部認証プロバイダーもサポートしています。

コード

ユーザー管理に関連するすべてのアイテムは、src/app/authenticationフォルダー下にあります。以下は、注目すべきエクスポートです。

authentication.module.ts の AuthenticationModule は、すべてのコンポーネントとサービスをメインアプリモジュールにエクスポートします。
auth.guard.ts は、ルートに適用できる AuthGuard をエクスポートします
authentication-routing.module.ts は、ログイン関連のルートを設定します。
services/user.service.ts の UserService は現在のユーザー状態を保持します。
services/authentication.service.ts の AuthenticationService は、バックエンド API との通信に使用されます。
services/external-auth.service.ts の ExternalAuthService は、サードパーティログインのプロバイダーを処理します。

構成の要件

このプロジェクトは、REST API サービスを使用する単一ページアプリ用にセットアップされているため、AuthenticationService を使用してリクエストを次の URL に送信します。

/login - ユーザー名とパスワードでログインします。
/register - ユーザー情報で登録します。
/extlogin - 外部ソースからユーザー情報を渡します。

すべてのエンドポイントは、JSON Web Token (JWT) またはメッセージとともにエラー状態を返す必要があります。

**注:**デモンストレーションの目的で、プロジェクトには要求をインターセプトする services/fake-backend.service.ts があります。authentication.module.ts の BackendProvider は、本番環境では使用しないでください。開発の開始時に、プロバイダーとファイルの両方を削除する必要があります。

他の認証モデル同様、JWT-s を使用する際にはセキュリティを考慮する必要があります。特に、REST API から受信したトークンはクライアントに保存されます。開発中にアプリをシームレスにリロードするために、ユーザーデータはブラウザーのローカルストレージに保存されますが、XSS 攻撃に対しては潜在的に脆弱になる可能性があります。

**注:**実稼働前にローカルストレージを無効にします。アプリの要件でトークンを保護するための代替ルートが許可されている場合、またはトークンを保護するための代替ルートをとる場合にのみ、トークンをメモリに保持することを検討してください。クッキーを使用する (CSRF 保護を検討する) ことも代替手段ですが、トークン署名または追加の「指紋」を強化されたクッキーに分割する方法もあります。

常にセキュリティ面を評価し、状況に応じて調整します。提供されるプロジェクト構造は単なる出発点です。

サードパーティ (ソーシャル) プロバイダーを追加する

外部認証サービスの初期化は、プロジェクト作成時に選択したブートストラップの種類によって場所が異なります。

スタンドアロンプロジェクト (デフォルト) — src/app/app.config.ts のプロバイダー関数で初期化します。
NgModule プロジェクト (igx-ts-legacy) — src/app/app.module.ts の AppModule コンストラクターで初期化します。

どちらの場合も、ソーシャルプロバイダーの呼び出しはコメントアウトされた状態で生成されます。例えば、NgModule プロジェクトの場合:

// in app.module.ts
export class AppModule {
  constructor(private externalAuthService: ExternalAuthService) {
    // this.externalAuthService.addGoogle('<CLIENT_ID>');
    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
    // this.externalAuthService.addFacebook('<CLIENT_ID>');
  }
}

特定のサードパーティプロバイダーでユーザーログインを有効にするには、特定の行のコメントを解除して、アプリのクライアント ID に置き換えます。 Google アカウントのサインインなどで取得する必要がある場合は、以下のプロバイダー固有のガイドに従ってください。

プロジェクトに一致するようにプロバイダーごとにリダイレクト URL と許可されたドメインオリジンを設定する必要があることに注意してください。開発用の Google OAuth 2.0 クライアント ID を作成するとき、リダイレクト URI として http://localhost:4200/redirect-google を指定できます。詳細については、リダイレクト URL をご覧ください。

Id (123456789.apps.googleusercontent.com) を取得したら、以下のようにプロジェクトの Google プロバイダーを有効にできます。

// in app.module.ts
export class AppModule {
  constructor(private externalAuthService: ExternalAuthService) {
    this.externalAuthService.addGoogle('123456789.apps.googleusercontent.com');
    // this.externalAuthService.addMicrosoft('<CLIENT_ID>');
    // this.externalAuthService.addFacebook('<CLIENT_ID>');
  }
}

これにより、ログインダイアログの各ボタンが自動的に有効になります。

このガイドに従って Microsoft でも同じことができます。

https://docs.microsoft.com/ja-jp/azure/active-directory/develop/quickstart-register-app

Facebook:

https://developers.facebook.com/docs/apps/#register

プロバイダーを有効にすると、すべてのボタンがアクティブになります。

プロバイダーの詳細

以下は、プロジェクトテンプレートに付属するデフォルトプロバイダーです。

プロバイダー	使用	URL のリダイレクト
Google	OpenID Connect*	`<app root>/redirect-google`
Microsoft	OpenID Connect*	`<app root>/redirect-microsoft`
Facebook	Facebook Connect**	`<app root>/redirect-facebook`

アプリがホストされる場所で URL を決定します。たとえば、デフォルトで最初のアプリ実行時は http://localhost:4200 になります。

* https://github.com/damienbod/angular-auth-oidc-client を使用して実装された OpenID Connect 機能

** Facebook JS SDK を使用して実装された Facebook Connect 機能

認証プロジェクト テンプレート