Twitter アカウントでのサインアップおよびサインインを設定する - Azure AD B2C

[アーティクル]
06/01/2023

"開始する前に"、[ポリシーの種類の選択] セレクターを使用して、設定するポリシーの種類を選択します。 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 でサインアップできます。また、開発者アカウントの申請も必要です。詳細については、アクセスの申請に関するページを参照してください。

Twitter アカウント資格情報を使用して Twitter の開発者ポータルにサインインします。
[+ プロジェクトの作成] ボタンを選択します。
[プロジェクト名] タブで、プロジェクトの任意の名前を入力し、[次へ] ボタンを選択します。
[ユースケース] タブで、任意のユースケースを選択し、[次へ] を選択します。
[プロジェクトの説明] タブで、プロジェクトの説明を入力し、[次へ] ボタンを選択します。
[アプリ名] タブで、azureadb2c などのアプリの名前を入力し、[次へ] ボタンを選択します。
[キー & トークン] タブで、API キーと API キーシークレットの値をコピーします。これらは後の設定に使用します。
[アプリ設定] を選択してアプリ設定を開きます。
ページの下部にある [ユーザー認証設定] で、[セットアップ] を選択します。
[アプリの種類] で、Web アプリなどの適切なアプリの種類を選択します。
[アプリ情報] で、次のようにします。
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 は、アプリケーションのプライバシーに関する情報を提供するために維持されるページです。
[保存] を選択します。

Twitter アカウント資格情報を使用して Twitter の開発者ポータルにサインインします。
[+ プロジェクトの作成] ボタンを選択します。
[プロジェクト名] タブで、プロジェクトの任意の名前を入力し、[次へ] ボタンを選択します。
[ユースケース] タブで、任意のユースケースを選択し、[次へ] を選択します。
[プロジェクトの説明] タブで、プロジェクトの説明を入力し、[次へ] ボタンを選択します。
[アプリ名] タブで、azureadb2c などのアプリの名前を入力し、[次へ] ボタンを選択します。
[キー & トークン] タブで、後続の手順で使用するため API キーと API キーシークレットの値をコピーします。 Azure AD B2C テナントで ID プロバイダーとして Twitter を構成するには、この両方の値を使用します。
[アプリ設定] を選択してアプリ設定を開きます。
ページの下部にある [ユーザー認証設定] で、[セットアップ] を選択します。
[アプリの種類] で、Web アプリなどの適切なアプリの種類を選択します。
[アプリ情報] で、次のようにします。
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 は、アプリケーションのプライバシーに関する情報を提供するために維持されるページです。
[保存] を選択します。

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

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

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

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

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

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

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

ポリシーキーを作成する

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

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

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

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

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

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

新しい 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>

client_id の値を前に記録した API キーに置き換えます。
ファイルを保存します。

ユーザー体験を追加する

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

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

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

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

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

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

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

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

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

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

ヒント

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

次の方法で共有

前提条件

アプリケーションの作成

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

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

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

ポリシーキーを作成する

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

ユーザー体験を追加する

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

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

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

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

フィードバック

その他のリソース

次の方法で共有

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

前提条件

アプリケーションの作成

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

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

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

ポリシー キーを作成する

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

ユーザー体験を追加する

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

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

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

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

フィードバック

その他のリソース

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

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

ポリシーキーを作成する

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

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