🔐

Azure AD B2CでApp Service for Webアプリの認証を実装する

2023/08/16に公開

Azure

認証

tech

Webアプリにログイン画面を追加したい

こんにちは、株式会社FIXER＠名古屋オフィス所属の村上です。

ECサイトを利用する際にサインインorログインを求められることありますよね。
いわゆる認証機能と呼ばれるアレです。「Azure AD B2C」を利用してサクッと実装してみます。

概要図

本記事ではAzure App Serviceで構成されたWebアプリにAzure AD B2Cによる認証機能を追加実装します。実装後、ユーザーがWebアプリにアクセスするとAzure AD B2Cのログイン画面にリダイレクトされ、認証が成功するとトークンを生成してWebアプリケーションにリダイレクトされます。

事前準備

既に用意していれば、こちらの手順は省略してください。

1. App Service for Webアプリを作成する

Azure CLI で以下のリソースを作成します。
※ もちろん Azure ポータルからポチっと作成してもOKです。

1-1. リソースグループの作成

az group create --name 'rg-webapp-je' --location 'japaneast'

1-2. App Service プランの作成

コマンド実行後、リソース生成のため1分ほど待ちます。

az appservice plan create --name 'asp' --resource-group 'rg-webapp-je' --location 'japaneast' --sku 'B1' --is-linux

1-3. Webアプリ（Web Apps）の作成

コマンド実行後、イメージデプロイの反映に5〜10分ほど時間がかかります。

# Webアプリ名 を登録
$WebApp_Name = '＜グローバルで任意な名前を記載します＞'

# Webアプリ の作成
az webapp create --resource-group 'rg-webapp-je' --plan 'asp' --name $WebApp_Name --runtime 'NODE:18-lts'

※ 本記事では Webアプリ名を murakamiappje と設定します。
https://{Webアプリ名}.azurewebsites.net にアクセスできるかブラウザやターミナルで確認します。

2. Azure AD B2C（テナント）を発行する

2-1. リソースグループの作成

Azure AD B2C用のリソースグループを作成します。

az group create --name 'rg-b2c' --location 'japaneast'

2-2. Azure AD B2C の作成

Azure AD テナントで「リソースの作成」画面にアクセスして「Azure Active Directory B2C」と検索します。

以下のように設定してください。組織名はメール認証を利用した場合にメール件名に表示されます。

あとは画面の指示に従い、作成完了まで進めてください。

ここから本題！実装方法

1. ユーザーフローを構成する

利用者に要求する認証のプロトタイプを選択します。

Azure AD B2Cテナントにサインインします。
「Azure AD B2C」サービスにアクセスして、ユーザーフロー画面に遷移し「➕新しいユーザーフロー」をクリックします。

今回は「サインアップ・サインイン」のユーザーフローを構成します。

以下のように設定してください。
※ 本記事ではユーザーフロー名を B2C_1_signupsignin と設定します。

あとは画面の指示に従い、作成完了まで進めてください。

2. Webアプリケーションを構成する

WebアプリとAzure AD B2Cとの間で信頼関係を確立するために、B2Cアプリケーションを作成し、それをWebアプリに登録する必要があります。

Azure AD B2Cテナントにサインインします。
「Azure AD B2C」サービスにアクセスして、アプリの登録画面に遷移し「➕新規登録」をクリックします。

以下のように設定してください。
App Serviceを使用する場合、「リダイレクトURI」に登録するURIは、以下の設定値を使用します。
https://＜Webアプリ名＞.azurewebsites.net/.auth/login/aadb2c/callback

【⭐️補足】
ここではサインインエンドポイントで定義された /.auth/login/aadb2c の部分です。この後に登場する「3. Webアプリの認証設定を登録する」でApp Serviceに登録するIDプロバイダー名に、aadb2c を設定する必要があります。

登録後、アプリケーション (クライアント) IDをメモします。

続いて、このB2Cアプリケーションのシークレットを発行します。
証明書とシークレット画面の「➕新しいクライアントシークレット」をクリックします。

シークレットの説明文・有効期間※を指定して、シークレットを発行します。

B2Cアプリケーションを発行したタイミングのみシークレット値が表示されるため、メモします。

3. Webアプリの認証設定を登録する

「2. Webアプリケーションを構成する」で発行したアプリケーションをIDプロバイダーに登録します。

Azure ADテナントにサインインします。
「App Service」サービスにアクセスして、認証画面に遷移し「IDプロバイダーを追加」をクリックします。

以下のように設定してください。

【⭐️補足】メタデータ URL
OpenID Connect プロバイダーのメタデータ URLには形式があり、/.well-known/openid-configurationが文末に付きます。
Azure AD B2Cテナントで管理されたユーザーでサインインする場合は、以下の設定値を使用します。
https://＜Azure AD B2Cテナント名＞.b2clogin.com/＜Azure AD B2Cテナント名＞.onmicrosoft.com/＜ユーザーフロー名＞/v2.0/.well-known/openid-configuration

参考. OpenID Connectのパラメータ