ホーム

【Azure AD B2C】ユーザーフローにGoogleログインを追加する

導入

本記事では、Azure AD B2Cのユーザーフローを使い、Googleアカウントでの認証処理を開発していきます。

手順は公式ドキュメントに準じて行なっていきます。

目次

  1. 事前準備
  2. Googleアプリの作成

    1. Google Developers Consoleへのアクセス
    2. プロジェクトの作成
    3. 承認済みドメインの設定
    4. 認証情報の設定
  3. IDプロバイダーの追加
  4. ユーザーフローを更新
  5. ユーザーフローを実行

事前準備

AzureADB2Cのテナントが作成されている必要があります。
テナントの作成方法についてはこちらを参照してください。

Googleアプリの作成

Google Developers Consoleへのアクセス

Google Developers Consoleにアクセスします。
Chromeがログイン済みであれば、ログイン不要で表示されるはずです。
未ログインであればログインしましょう。
ScreenShot 2020-09-13 21.09.07.png

プロジェクトの作成

ページの左上隅にあるプロジェクトの一覧、もしくは現在のプロジェクト名を選択し、 [新しいプロジェクト] を選択します。 ScreenShot 2020-09-13 21.09.16.png

[プロジェクト名] を入力し、 [作成] を選択します。 ScreenShot 2020-09-13 21.14.06.png

プロジェクトが作成されると以下のような画面となります。 ScreenShot 2020-09-13 21.14.20.png

承認済みドメインの設定

左側にあるメニューで [OAuth 同意画面] を選択し、 [外部] を選択し、 [作成] を選択します。
ScreenShot 2020-09-13 21.26.17.png

アプリケーションの [名前] 、 [承認済みドメイン] セクションに「b2clogin.com」と入力し、[保存] を選択します。 ScreenShot 2020-09-13 21.26.22.png

ScreenShot 2020-09-13 21.56.34.png

認証情報の設定

左側のメニューで [認証情報] を選択して、 [認証情報を作成] > [Oauth client ID (Oauth クライアント ID)] を選択します。 ScreenShot 2020-09-13 21.32.42.png ScreenShot 2020-09-13 21.32.52.png

  • [アプリケーションの種類] で [Web アプリケーション] を選択
  • アプリケーションの名前は任意に設定
  • [承認済みの JavaScript 生成元] に以下のように入力
https://{自身のテナント名}.b2clogin.com
  • [承認済みのリダイレクト URI] に以下のように入力
https://{自身のテナント名}.b2clogin.com/{自身のテナント名}.onmicrosoft.com/oauth2/authresp

上記のように入力し、作成を押下します。 ScreenShot 2020-09-13 21.34.16.png ScreenShot 2020-09-13 21.34.33.png

作成されるとクライアントIDとクライアントシークレットが表示されます。
これをコピーしておきます。 ScreenShot 2020-09-13 21.34.43.png

作成後は下記のような表示となります。 ScreenShot 2020-09-13 21.35.03.png

IDプロバイダーの追加

続いてAzureADB2CにGoogleをIDプロバイダーとして登録します。
左のナビゲーション部分からIDプロバイダーを選択します。
その中のGoogleを選択します。
ScreenShot 2020-09-13 22.12.09.png

以下内容で設定します。

  • 名前:Google
  • クライアントID:※Google側でコピーしたクライアントID
  • クライアントシークレット:※Google側でコピーしたクライアントシークレット ScreenShot 2020-09-13 22.12.24.png

登録が完了すると構成にGoogleと追加されます。 ScreenShot 2020-09-13 22.13.08.png

ユーザーフローを更新

続いて、Googleをユーザーフローで利用するIDプロバイダーとして追加します。
使用するユーザーフローのIDプロバイダー設定を開き、Googleにチェックを入れ、「保存」を押下します。
ScreenShot 2020-09-13 22.16.21.png

ユーザーフローを実行

ではユーザーフローを実行していきましょう。
実行すると以下のようにGoogleログインが追加されていることがわかります。
ScreenShot 2020-09-13 22.16.45.png

Googleボタンを押下すると、Google側の画面に遷移します。
先ほどGoogle側に追加したアプリの同意画面が表示されます。
「ログイン」を押下します。
ScreenShot 2020-09-13 22.16.55.png

ログインが成功すると、リダイレクトURL先に遷移します。
以下のキャプチャはhttps://jwt.ms/をリダイレクトURLに設定した場合です。
IDトークンのidpにgoogle.comが設定されており、Googleログインが成功しているのがわかります。
ScreenShot 2020-09-13 22.17.16.png

以上で、AzureADB2CのユーザーフローにGoogleログインを追加することができました。