Azure Active Directory B2C を使用して Twitter アカウントでのサインアップおよびサインインを設定する

"開始する前に"、[ポリシーの種類の選択] セレクターを使用して、設定するポリシーの種類を選択します。 Azure Active Directory B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザー フローを使用する、または完全に構成可能なカスタム ポリシーを使用する) があります。 この記事で必要な手順は、方法ごとに異なります。

注意

Azure Active Directory B2C で、カスタム ポリシーは、主に、複雑なシナリオに取り組む用途向けに設計されています。 ほとんどのシナリオで、組み込みユーザー フローを使用することをお勧めします。 まだ行っていない場合は、Active Directory B2C でのカスタム ポリシーの概要に関する記事で、カスタム ポリシー スターター パックの詳細を確認してください。

前提条件

• ユーザー フローを作成して、ユーザーがアプリケーションにサインアップおよびサインインできるようにします。
• Web アプリケーションを登録します。

• 「Active Directory B2C でのカスタム ポリシーの概要」にある手順を完了します。
• Web アプリケーションを登録します。

アプリケーションの作成

Azure AD B2C で Twitter アカウントを持つユーザーのサインインを有効にするには、Twitter アプリケーションを作成する必要があります。 まだ Twitter アカウントを持っていない場合は、https://twitter.com/signup でサインアップできます。 また、開発者アカウントの申請も必要です。 詳細については、アクセスの申請に関するページを参照してください。

1. Twitter アカウント資格情報を使用して Twitter の開発者ポータルにサインインします。
2. [+ プロジェクトの作成] ボタンを選択します。
3. [プロジェクト名] タブで、プロジェクトの任意の名前を入力し、[次へ] ボタンを選択します。
4. [ユース ケース] タブで、任意のユース ケースを選択し、[次へ] を選択します。
5. [プロジェクトの説明] タブで、プロジェクトの説明を入力し、[次へ] ボタンを選択します。
6. [アプリ名] タブで、azureadb2c などのアプリの名前を入力し、[次へ] ボタンを選択します。
7. [キー & トークン] タブで、API キーと API キー シークレットの値をコピーします。 これらは後の設定に使用します。
8. [アプリ設定] を選択してアプリ設定を開きます。
9. ページの下部にある [ユーザー認証設定] で、[セットアップ] を選択します。
10. [アプリの種類] で、Web アプリなどの適切なアプリの種類を選択します。
11. [アプリ情報] で、次のようにします。
    1. [コールバック URI/リダイレクト URL] に「https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/your-policy-id/oauth1/authresp」と入力します。 カスタム ドメインを使用する場合は、「https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp」と入力します。 テナント名とユーザー フロー ID が Azure AD B2C に大文字で定義されている場合でも、それらを入力するときに、すべて小文字を使用します。 置換前のコード:
       • your-tenant-name を自分のテナント名に置き換えます。
       • your-domain-name を自分のカスタム ドメインに置き換えます。
       • your-policy-id を自分のユーザー フローの識別子に置き換えます。 たとえば、「 b2c_1a_signup_signin_twitter 」のように入力します。
    2. [Web サイトの URL] には「https://your-tenant.b2clogin.com」と入力します。 your-tenant をテナントの名前に置き換えます。 たとえば、「 https://contosob2c.b2clogin.com 」のように入力します。 カスタム ドメインを使用する場合は、「https://your-domain-name」と入力します。
    3. (オプション) [サービス利用規約] に URL (http://www.contoso.com/tos など) を入力します。 ポリシーの URL は、アプリケーションの利用規約を提供するために維持されるページです。
    4. (オプション) [プライバシー ポリシー] に URL (http://www.contoso.com/privacy など) を入力します。 ポリシーの URL は、アプリケーションのプライバシーに関する情報を提供するために維持されるページです。
12. [保存] を選択します。

1. Twitter アカウント資格情報を使用して Twitter の開発者ポータルにサインインします。
2. [+ プロジェクトの作成] ボタンを選択します。
3. [プロジェクト名] タブで、プロジェクトの任意の名前を入力し、[次へ] ボタンを選択します。
4. [ユース ケース] タブで、任意のユース ケースを選択し、[次へ] を選択します。
5. [プロジェクトの説明] タブで、プロジェクトの説明を入力し、[次へ] ボタンを選択します。
6. [アプリ名] タブで、azureadb2c などのアプリの名前を入力し、[次へ] ボタンを選択します。
7. [キー & トークン] タブで、後続の手順で使用するため API キーと API キー シークレットの値をコピーします。 Azure AD B2C テナントで ID プロバイダーとして Twitter を構成するには、この両方の値を使用します。
8. [アプリ設定] を選択してアプリ設定を開きます。
9. ページの下部にある [ユーザー認証設定] で、[セットアップ] を選択します。
10. [アプリの種類] で、Web アプリなどの適切なアプリの種類を選択します。
11. [アプリ情報] で、次のようにします。
    1. [コールバック URI/リダイレクト URL] に「https://your-tenant.b2clogin.com/your-tenant-name.onmicrosoft.com/your-user-flow-name/oauth1/authresp」と入力します。 カスタム ドメインを使用する場合は、「https://your-domain-name/your-tenant-name.onmicrosoft.com/your-user-flow-Id/oauth1/authresp」と入力します。 テナント名とユーザー フロー ID が Azure AD B2C に大文字で定義されている場合でも、それらを入力するときに、すべて小文字を使用します。 置換前のコード:
       • your-tenant-name を自分のテナント名に置き換えます。
       • your-domain-name を自分のカスタム ドメインに置き換えます。
       • your-user-flow-name を自分のユーザー フローの識別子に置き換えます。 たとえば、「 b2c_1_signup_signin_twitter 」のように入力します。
    2. [Web サイトの URL] には「https://your-tenant.b2clogin.com」と入力します。 your-tenant をテナントの名前に置き換えます。 たとえば、「 https://contosob2c.b2clogin.com 」のように入力します。 カスタム ドメインを使用する場合は、「https://your-domain-name」と入力します。
    3. [サービス利用規約] に URL を入力します (例: http://www.contoso.com/tos)。 ポリシーの URL は、アプリケーションの利用規約を提供するために維持されるページです。
    4. [プライバシー ポリシー] に URL (http://www.contoso.com/privacy など) を入力します。 ポリシーの URL は、アプリケーションのプライバシーに関する情報を提供するために維持されるページです。
12. [保存] を選択します。

ID プロバイダーとして Twitter を構成する

1. Azure AD B2C テナントの全体管理者として Azure Portal にサインインします。
2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
3. Azure Portal の左上隅の [すべてのサービス] を選択し、 [Azure AD B2C] を検索して選択します。
4. [ID プロバイダー] を選択してから、[Twitter] を選択します。
5. [名前] を入力します。 たとえば、「Twitter」とします。
6. [クライアント ID] には、前に作成した Twitter アプリケーションの API キーを入力します。
7. [クライアント シークレット] には、記録したAPI キー シークレットを入力します。
8. [保存] を選択します。

ユーザー フローに Twitter ID プロバイダーを追加する

この時点では、Twitter ID プロバイダーは設定されていますが、サインイン ページではまだ使用できません。 ユーザー フローに Twitter ID プロバイダーを追加するには、次の手順を実行します。

1. Azure AD B2C テナントで、 [ユーザー フロー] を選択します。
2. Twitter ID プロバイダーを追加するユーザー フローを選択します。
3. [ソーシャル ID プロバイダー] から、 [Twitter] を選択します。
4. [保存] を選択します。

ユーザー フローをテストする

1. ポリシーをテストするには、 [ユーザー フローを実行します] を選択します。
2. [アプリケーション] には、以前に登録した testapp1 という名前の Web アプリケーションを選択します。 [応答 URL] に https://jwt.ms と表示されます。
3. [ユーザー フローを実行します] ボタンを選択します。
4. サインアップまたはサインイン ページから、 [Twitter] を選択し、Twitter アカウントでサインインします。

ポリシー キーを作成する

Azure AD B2C テナントで Twitter アプリのために記録した秘密鍵を格納する必要があります。

1. Azure portal にサインインします。
2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
3. Azure portal で、 [Azure AD B2C] を検索して選択します。
4. 左側のメニューの [ポリシー] で、[Identity Experience Framework] を選択します。
5. [ポリシー キー] を選択し、 [追加] を選択します。
6. オプションについては、Manualを選択します。
7. ポリシー キーの名前を入力します。 たとえば、「 TwitterSecret 」のように入力します。 プレフィックス B2C_1A_ がキーの名前に自動的に追加されます。
8. [シークレット] には、前に記録した API キー シークレット値を入力します。
9. [キー使用法] として [Signature] を選択します。
10. Create をクリックしてください。

ID プロバイダーとして Twitter を構成する

ユーザーが Twitter アカウントを使用してサインインできるようにするには、そのアカウントを Azure AD B2C がエンドポイント経由で通信できる相手のクレーム プロバイダーとして定義する必要があります。 エンドポイントは、特定のユーザーが認証されていることを確認するために Azure AD B2C で使う一連の要求を提供します。

Twitter アカウントをクレーム プロバイダーとして定義するには、そのアカウントをポリシーの拡張ファイル内の ClaimsProviders 要素に追加します。 この記事の前提条件でダウンロードしたカスタム ポリシー スターター パックを参照してください。

1. TrustFrameworkExtensions.xml を開きます。

2. ClaimsProviders 要素を見つけます。 存在しない場合は、それをルート要素の下に追加します。

3. 新しい ClaimsProvider を次のように追加します。

   <ClaimsProvider>
     <Domain>twitter.com</Domain>
     <DisplayName>Twitter</DisplayName>
     <TechnicalProfiles>
       <TechnicalProfile Id="Twitter-OAuth1">
         <DisplayName>Twitter</DisplayName>
         <Protocol Name="OAuth1" />
         <Metadata>
           <Item Key="ProviderName">Twitter</Item>
           <Item Key="authorization_endpoint">https://api.twitter.com/oauth/authenticate</Item>
           <Item Key="access_token_endpoint">https://api.twitter.com/oauth/access_token</Item>
           <Item Key="request_token_endpoint">https://api.twitter.com/oauth/request_token</Item>
           <Item Key="ClaimsEndpoint">https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true</Item>
           <Item Key="ClaimsResponseFormat">json</Item>
           <Item Key="client_id">Your Twitter application API key</Item>
         </Metadata>
         <CryptographicKeys>
           <Key Id="client_secret" StorageReferenceId="B2C_1A_TwitterSecret" />
         </CryptographicKeys>
         <OutputClaims>
           <OutputClaim ClaimTypeReferenceId="issuerUserId" PartnerClaimType="user_id" />
           <OutputClaim ClaimTypeReferenceId="displayName" PartnerClaimType="screen_name" />
           <OutputClaim ClaimTypeReferenceId="email" />
           <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="twitter.com" />
           <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" />
         </OutputClaims>
         <OutputClaimsTransformations>
           <OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
           <OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
           <OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
           <OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
         </OutputClaimsTransformations>
         <UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
       </TechnicalProfile>
     </TechnicalProfiles>
   </ClaimsProvider>
   

4. client_id の値を前に記録した API キーに置き換えます。

5. ファイルを保存します。

ユーザー体験を追加する

この時点では、ID プロバイダーはセットアップされていますが、サインイン ページではまだ使用できません。 独自のカスタム ユーザー体験がない場合は、既存のテンプレート ユーザー体験の複製を作成してください。そうでない場合は、次の手順に進みます。

1. スターター パックから TrustFrameworkBase.xml ファイルを開きます。
2. Id="SignUpOrSignIn" を含む UserJourney 要素を見つけ、その内容全体をコピーします。
3. TrustFrameworkExtensions.xml を開き、UserJourneys 要素を見つけます。 要素が存在しない場合は追加します。
4. コピーした UserJourney 要素の内容全体を UserJourneys 要素の子として貼り付けます。
5. ユーザー体験の ID の名前を変更します。 たとえば、「 Id="CustomSignUpSignIn" 」のように入力します。

ユーザー体験に ID プロバイダーを追加する

これでユーザー体験ができたので、ユーザー体験に新しい ID プロバイダーを追加します。 最初にサインイン ボタンを追加してから、ボタンをアクションにリンクします。 アクションは、前に作成した技術プロファイルです。

1. ユーザー体験内で、Type="CombinedSignInAndSignUp" または Type="ClaimsProviderSelection" を含むオーケストレーション ステップ要素を見つけます。 これは通常、最初のオーケストレーション ステップです。 ClaimsProviderSelections 要素には、ユーザーがサインインに使用できる ID プロバイダーの一覧が含まれています。 要素の順序により、ユーザーに表示されるサインイン ボタンの順序が制御されます。 ClaimsProviderSelection XML 要素を追加します。 TargetClaimsExchangeId の値をフレンドリ名に設定します。

2. 次のオーケストレーション ステップで、ClaimsExchange 要素を追加します。 ID を、ターゲットの要求交換 ID の値に設定します。TechnicalProfileReferenceId の値を、前に作成した技術プロファイルの ID に更新します。

次の XML は、ID プロバイダーを使用したユーザー体験の最初の 2 つのオーケストレーション ステップを示しています。

<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
  <ClaimsProviderSelections>
    ...
    <ClaimsProviderSelection TargetClaimsExchangeId="TwitterExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="TwitterExchange" TechnicalProfileReferenceId="Twitter-OAuth1" />
  </ClaimsExchanges>
</OrchestrationStep>

証明書利用者ポリシーを構成する

証明書利用者ポリシー (例 SignUpSignIn.xml) は、Azure AD B2C が実行されるユーザー体験を指定します。 証明書利用者内の DefaultUserJourney 要素を検索します。 ID プロバイダーを追加したユーザー体験 ID と一致するように ReferenceId を更新します。

次の例では、CustomSignUpSignIn ユーザー体験について、ReferenceId を CustomSignUpSignIn に設定しています。

<RelyingParty>
  <DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
  ...
</RelyingParty>

カスタム ポリシーをアップロードする

1. Azure portal にサインインします。
2. ポータル ツール バーにある [ディレクトリ + サブスクリプション] アイコンを選択し、Azure AD B2C テナントを含むディレクトリを選択します。
3. Azure portal で、 [Azure AD B2C] を検索して選択します。
4. [ポリシー] で [Identity Experience Framework] を選択します。
5. [カスタム ポリシーのアップロード] を選択し、変更した 2 つのポリシー ファイルを拡張ポリシー (TrustFrameworkExtensions.xml など)、証明書利用者ポリシー (SignUpSignIn.xmlなど) の順序でアップロードします。

カスタム ポリシーのテスト

1. 証明書利用者ポリシー (B2C_1A_signup_signin など) を選択します。
2. [アプリケーション] には、前に登録した Web アプリケーションを選択します。 [応答 URL] に https://jwt.ms と表示されます。
3. [今すぐ実行] ボタンを選択します。
4. サインアップまたはサインイン ページから、 [Twitter] を選択し、Twitter アカウントでサインインします。

サインイン プロセスが成功すると、ブラウザーは https://jwt.ms にリダイレクトされ、Azure AD B2C によって返されたトークンの内容が表示されます。

ヒント

この ID プロバイダーのテスト時に unauthorized エラーが発生した場合は、正しい Twitter API キーと API キー シークレットを使うか、昇格されたアクセスを申請してみてください。 また、この機能を使用できるようになる前にアプリを登録した場合は、Twitter のプロジェクト構造を確認することをお勧めします。