ホーム

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

導入

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

目次

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

    1. 開発者アカウントの登録
    2. アプリの作成
    3. プロダクト(facebookログイン)の作成
  3. IDプロバイダーの追加
  4. ユーザーフローを更新
  5. ユーザーフローを実行

事前準備

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

Facebookアプリの作成

開発者アカウントの登録

Facebook for Developersから作成していきます。
ScreenShot 2020-09-13 16.54.37.png

はじめにFacebookにログインします。
既存のFacebookアカウントがあればそちらを利用できます。
プライベートとは別に開発用のアカウントを利用する場合は、新規作成をしてください。 ScreenShot 2020-09-13 16.54.49.png

Facebookにログインすると、開発者アカウントの作成できるようになります。
ヘッダー部分の「スタートガイド」を押下してください。
ScreenShot 2020-09-13 16.58.40.png 「次へ」を押下します。
ScreenShot 2020-09-13 16.58.46.png

電話番号で認証を行います。
ScreenShot 2020-09-13 16.58.58.png

認証が完了すると、開発者向けの画面に遷移します。もしくはトップページのマイアプリから作成画面に遷移します。 ScreenShot 2020-09-13 17.03.30.png

アプリの作成

続いてFacebookアプリケーションを作成していきます。
このアプリケーションによって、Fcebookログイン機能を利用できるようになります。
「アプリを作成」を押下します。 ScreenShot 2020-09-13 17.06.21.png

今回は認証機能だけ使いますので「その他」を選択します。
アプリ表示名に任意の値を入力したら「アプリIDを作成」を押下します。 ScreenShot 2020-09-13 17.06.24.png

アプリが作成されると以下のような画面になります。
ここでは「認証機能サンプル」というアプリ名で作成しています。
ScreenShot 2020-09-13 17.09.21.png

プロダクト(facebookログイン)の作成

Facebookログインの設定ボタンを押下します。
アプリのプラットフォームに「ウェブ」を選択します。
ScreenShot 2020-09-13 17.37.16.png

ウェブサイトのURLを入力します。
Azureのドキュメントに沿って、テナントのドメイン名を入力し、「save」を押下します。
「次へ」のボタンがありますが、その他の設定を行う必要はありません。
左のナビゲーション部分にあるプロダクト > Facebookログイン > 設定 を押下します。 ScreenShot 2020-09-13 17.38.42.png

OAuthリダイレクトURIの設定

Facebookログイン後にAzureADB2Cに返ってくるためにリダイレクトURLを登録します。
有効なOAuthリダイレクトURIに下記URLを設定し、「変更を保存」を押下します。

https://{自身のテナント名}/{自身のテナント名}.onmicrosoft.com/oauth2/authresp

ScreenShot 2020-09-13 18.01.10.png

プライバシーポリシーの設定

左のナビゲーション部分にある 設定 > ベーシック を押下します。
アプリを有効にするにはアプリケーションのプライバシーに関する情報を提供する画面のURL設定を行う必要があります。
ここではテスト用の認証機能を開発しますので、実際の画面ではなくダミーのURLを設定すれば大丈夫です。
Azureのドキュメント通りhttp://www.contoso.com/を設定し、「変更を保存」を押下します。
ScreenShot 2020-09-13 18.14.22.png

アプリID、app secretをコピー

同画面にて、アプリIDとapp secretをコピーしておきます。
後ほどAzureADB2C側に設定します。

IDプロバイダーの追加

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

以下内容で設定します。

  • 名前:Facebook
  • クライアントID:※Facebook側でコピーしたアプリID
  • クライアントシークレット:※Facebook側でコピーしたapp secret ScreenShot 2020-09-13 18.26.14.png

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

ユーザーフローを更新

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

ユーザーフローを実行

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

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

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

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