Azure AD B2CをAngularプロジェクトに実装してみ
URL
date
Sep 18, 2022
slug
azure-ad-b2c-for-angular-project
status
Published
tags
Azure
Azure AD B2C
Angular
summary
Azure AD B2C を Angular プロジェクトに取り込んでみた。今回のプロジェクトに Angular を採用して…
type
Post
Azure AD B2C を Angular プロジェクトに取り込んでみた
今回のプロジェクトに Angular を採用して、全般の構築を含めて取りかかっています。
インフラは最近多く増えつつある、Microsoft Azure 環境下で作業を行っており、ログイン認証の実装を担当されています。
AWS Cognito と同様に IDaaS(Identity as a Service)として Azure AD B2C があるようなので、実装検証も兼ねて備忘録を書きたいと思います。
ソースコードは以下のサイトを参照
ファイル構成
Azure AD B2C 設定
Azure AD B2C サービスを利用するためには、専用の Azure AD B2C Tanant 登録をしないといけません。
また、Azure サブスクリプションのリソースプロバイダ Microsoft.AzureActiveDirectory 登録が必須です。
今回は Angular アプリ用のテナントを登録のみにします。バックエンドと通信をするには API 用のテナントも登録が必要です。
上記を踏まえて Azure AD B2C アプリの登録と行います。
リダイレクト URI は、angular側 localhost URL を入れます。
ログインをするには、ユーザーフローのポリシー登録が必要です。
登録後の名前は、アプリ側で設定を入れることになります。
ログインするユーザーもAzure AD B2Cに登録が必要です。
アプリ側設定
Angular側の設定は、サンプルコード上で修正を入れておきます。
app.module.ts側でauth-config.tsを読み込んで、MsalModuleを設定します。
angularアプリを起動します。
localhost:4200のangularサンプルページが起動されます。「ログイン」ボタンを押下すると、Azure AD B2C 専用のログインページに飛びます。
カスタマイズも可能です。
登録したユーザーのIDとPsswordを入れてログインします。
先にユーザー情報を入れた名前やObjectIdなどが表示されます。
ユーザー属性は、B2C側から表示設定をします。
カスタム属性を入れて情報を入れることも可能です。
最近はAWS以外もAzureを導入する企業も多くなっています。シェアー率も年毎に上がっているので、クラウド導入を考えている企業側としては選択肢が増えるのは良いことです。
次はポストは、アクセストークンを用いたAPI側とやり取りを行う設定を行いたいと思います。