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

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

注意

この機能はパブリック プレビュー段階にあります。

前提条件

QQ アプリケーションを作成する

Azure Active Directory B2C (Azure AD B2C) で QQ アカウントを持つユーザーのサインインを有効にするには、QQ 開発者ポータルでアプリケーションを作成する必要があります。 まだ QQ アカウントを持っていない場合は、https://ssl.zc.qq.com でサインアップできます。

QQ 開発者プログラムに登録する

  1. QQ アカウントの資格情報を使用して、QQ 開発者ポータルにサインインします。
  2. サインインしたら、https://open.qq.com/reg に移動して開発者として登録します。
  3. [个人 (個人開発者)] を選択します。
  4. 必要な情報を入力し、 [下一步 (次のステップ)] を選択します。
  5. 電子メールによる確認プロセスを完了します。 開発者として登録したら、承認されるまで数日待つ必要があります。

QQ アプリケーションを登録する

  1. https://connect.qq.com/index.html にアクセスします。
  2. [应用管理 (アプリの管理)] を選択します。
  3. [创建应用 (アプリの作成)] を選択し、必要な情報を入力します。
  4. [授权回调域 (コールバック URL)] に、「https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/authresp」と入力します。 カスタム ドメインを使用する場合は、「https://your-domain-name/your-tenant-name.onmicrosoft.com/oauth2/authresp」と入力します。 your-tenant-name を実際のテナントの名前に、your-domain-name を実際のカスタム ドメインに置き換えます。
  5. [创建应用 (アプリの作成)] を選択します。
  6. 確認ページで、 [应用管理 (アプリの管理)] を選択してアプリの管理ページに戻ります。
  7. 作成したアプリの横の [查看 (表示)] を選択します。
  8. [修改 (編集)] を選択します。
  9. アプリ IDアプリ キーをコピーします。 ID プロバイダーをテナントに追加するには、これらの両方の値が必要です。

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

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

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

  1. Azure AD B2C テナントで、 [ユーザー フロー] を選択します。
  2. QQ ID プロバイダーを追加するユーザー フローをクリックします。
  3. [ソーシャル ID プロバイダー] から、 [QQ] を選択します。
  4. [保存] を選択します。
  5. ポリシーをテストするには、 [ユーザー フローを実行します] を選択します。
  6. [アプリケーション] には、以前に登録した testapp1 という名前の Web アプリケーションを選択します。 [応答 URL]https://jwt.ms と表示されます。
  7. [ユーザー フローを実行します] ボタンを選択します。
  8. サインアップまたはサインイン ページで [QQ] を選択し、QQ アカウントでサインインします。

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

ポリシー キーを作成する

Azure AD B2C テナントで前に記録したクライアント シークレットを格納する必要があります。

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

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

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

QQ アカウントをクレーム プロバイダーとして定義するには、そのアカウントをポリシーの拡張ファイル内の ClaimsProviders 要素に追加します。

  1. TrustFrameworkExtensions.xml を開きます。

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

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

    <ClaimsProvider>
      <Domain>qq.com</Domain>
      <DisplayName>QQ (Preview)</DisplayName>
      <TechnicalProfiles>
        <TechnicalProfile Id="QQ-OAuth2">
          <DisplayName>QQ</DisplayName>
          <Protocol Name="OAuth2" />
          <Metadata>
            <Item Key="ProviderName">qq</Item>
            <Item Key="authorization_endpoint">https://graph.qq.com/oauth2.0/authorize</Item>
            <Item Key="AccessTokenEndpoint">https://graph.qq.com/oauth2.0/token</Item>
            <Item Key="ClaimsEndpoint">https://graph.qq.com/oauth2.0/me</Item>
            <Item Key="scope">get_user_info</Item>
            <Item Key="HttpBinding">GET</Item>
            <Item Key="ClaimsResponseFormat">JsonP</Item>
            <Item Key="ResponseErrorCodeParamName">error</Item>
            <Item Key="external_user_identity_claim_id">openid</Item>
            <Item Key="client_id">Your QQ application ID</Item>
          </Metadata>
          <CryptographicKeys>
            <Key Id="client_secret" StorageReferenceId="B2C_1A_QQSecret" />
          </CryptographicKeys>
          <OutputClaims>
            <OutputClaim ClaimTypeReferenceId="UserId" PartnerClaimType="openid" />
            <OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="qq.com" AlwaysUseDefaultValue="true" />
            <OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
          </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 を、アプリケーションの登録で取得したアプリケーション ID に設定します。

  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="QQExchange" />
  </ClaimsProviderSelections>
  ...
</OrchestrationStep>

<OrchestrationStep Order="2" Type="ClaimsExchange">
  ...
  <ClaimsExchanges>
    <ClaimsExchange Id="QQExchange" TechnicalProfileReferenceId="QQ-OAuth2" />
  </ClaimsExchanges>
</OrchestrationStep>

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

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

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

<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. サインアップまたはサインイン ページで [QQ] を選択し、QQ アカウントでサインインします。

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