使用 Azure Active Directory B2C 以 QQ 帳戶設定註冊和登入
開始之前,請使用 [選擇原則類型 選取器] 來選擇您要設定的原則類型。 Azure Active Directory B2C 提供兩種方法來定義使用者如何與您的應用程式互動:透過預先 定義的使用者流程 ,或透過完全可設定 的自定義原則。 本文中每個方法所需的步驟都不同。
注意
此功能處於公開預覽狀態。
必要條件
- 建立使用者流程 ,讓使用者可以註冊並登入您的應用程式。
- 註冊 Web 應用程式。
- 完成開始使用 Active Directory B2C 中的自定義原則中的 步驟
- 註冊 Web 應用程式。
建立 QQ 應用程式
若要在 Azure Active Directory B2C (Azure AD B2C) 中啟用 QQ 帳戶的使用者登入,您必須在 QQ 開發人員入口網站中建立應用程式。 如果您還沒有 QQ 帳戶,您可以在 註冊 https://ssl.zc.qq.com。
註冊 QQ 開發人員計劃
- 使用 QQ 帳戶認證登入 QQ 開發人員入口網站 。
- 登入之後,請移至 https://open.qq.com/reg 註冊自己為開發人員。
- 選取 [ 個人 ] (個別開發人員)。
- 輸入必要資訊,然後選取 [下一 步] (下一個步驟)。
- 完成電子郵件驗證程式。 註冊為開發人員之後,您必須等候幾天才能核准。
註冊 QQ 應用程式
- 移至 https://connect.qq.com/index.html。
- 選取 [應用管理 ] (應用程式管理)。
- 選取 [建立應用程式 ] 並輸入必要資訊。
- 針對授權回調域 (回呼 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-domain-name
您的自訂網域取代your-tenant-name
。 - 選取 [建立應用程式 ] 。
- 在確認頁面上,選取 [應用管理 ] [應用程式管理] 以返回應用程式管理頁面。
- 選取 您所建立應用程式旁邊的 [查看 ] [檢視]。
- 選取 [修改 ] (編輯)。
- 複製應用程式識別碼和應用程式金鑰。 您需要這兩個值,才能將識別提供者新增至您的租使用者。
將 QQ 設定為識別提供者
- 登入 Azure 入口網站。
- 如果您有多個租使用者的存取權,請選取頂端功能表中的 [設定] 圖示,從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租使用者。
- 在 Azure 入口網站中,搜尋並選取 [Azure AD B2C]。
- 選取 [ 識別提供者],然後選取 [QQ(預覽] 。
- 輸入名稱。 例如 QQ。
- 針對 [ 用戶端識別符],輸入您稍早建立之 QQ 應用程式的應用程式識別碼。
- 針對 [ 客戶端密碼],輸入您記錄的APP KEY。
- 選取 [儲存]。
將 QQ 識別提供者新增至使用者流程
- 在您的 Azure AD B2C 租使用者中,選取 [ 使用者流程]。
- 按兩下您要新增 QQ 識別提供者的使用者流程。
- 在 [ 社交識別提供者] 底下,選取 [QQ]。
- 選取 [儲存]。
- 若要測試您的原則,請選取 [ 執行使用者流程]。
- 針對 [ 應用程式],選取您先前註冊的名為 testapp1 的Web應用程式。 回覆 URL 應該會顯示
https://jwt.ms
。 - 選取 [ 執行使用者流程 ] 按鈕。
- 從 [註冊或登入] 頁面中,選取 [QQ] 以使用 QQ 帳戶登入。
如果登入程式成功,您的瀏覽器會重新導向至 https://jwt.ms
,以顯示 Azure AD B2C 所傳回令牌的內容。
建立原則金鑰
您必須儲存您先前在 Azure AD B2C 租用戶中記錄的客戶端密碼。
- 登入 Azure 入口網站。
- 如果您有多個租使用者的存取權,請選取頂端功能表中的 [設定] 圖示,從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租使用者。
- 選擇 Azure 入口網站 左上角的 [所有服務],然後搜尋並選取 [Azure AD B2C]。
- 在 [概觀] 頁面上,選取 [ 身分識別體驗架構]。
- 選取 [ 原則密鑰 ],然後選取 [ 新增]。
- 針對 [ 選項],選擇
Manual
。 - 輸入 原則金鑰的 [名稱 ]。 例如:
QQSecret
。 前置詞B2C_1A_
會自動新增至金鑰的名稱。 - 在 [秘密] 中,輸入您先前記錄的客戶端密碼。
- 針對 [ 金鑰使用方式],選取
Signature
。 - 按一下 [建立]。
將 QQ 設定為識別提供者
若要讓使用者使用 QQ 帳戶登入,您必須將帳戶定義為 Azure AD B2C 可以透過端點進行通訊的宣告提供者。 端點提供一組宣告,供 Azure AD B2C 用來驗證特定使用者已驗證。
您可以將 QQ 帳戶定義為宣告提供者,方法是將它新增至 原則擴充檔案中的 ClaimsProviders 元素。
開啟 TrustFrameworkExtensions.xml。
尋找 ClaimsProviders 元素。 如果不存在,請在根元素底下新增它。
新增 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>
將client_id設定為應用程式註冊中的應用程式識別碼。
儲存檔案。
新增使用者旅程圖
此時,識別提供者已設定,但尚未在任何登入頁面中提供。 如果您沒有自己的自定義使用者旅程圖,請建立現有範本使用者旅程圖的重複項目,否則請繼續進行下一個步驟。
- 從入門套件開啟 TrustFrameworkBase.xml 檔案。
- 尋找並複製包含
Id="SignUpOrSignIn"
之 UserJourney 元素的整個內容。 - 開啟 TrustFrameworkExtensions.xml 並尋找 UserJourneys 元素。 如果專案不存在,請新增一個。
- 貼上您複製為 UserJourneys 元素子系之 UserJourney 元素的整個內容。
- 重新命名使用者旅程圖的標識碼。 例如:
Id="CustomSignUpSignIn"
。
將識別提供者新增至使用者旅程圖
現在您已擁有使用者旅程圖,請將新的識別提供者新增至使用者旅程圖。 您必須先新增登入按鈕,然後將按鈕連結至動作。 動作是您稍早建立的技術配置檔。
尋找在
Type="CombinedSignInAndSignUp"
使用者旅程圖中包含 或Type="ClaimsProviderSelection"
的協調流程步驟元素。 通常是第一個協調流程步驟。 ClaimsProviderSelections 元素包含使用者可以登入的識別提供者清單。 元素的順序會控制向用戶呈現的登入按鈕順序。 新增 ClaimsProviderSelection XML 元素。 將 TargetClaimsExchangeId 的值設定為易記名稱。在下一個 協調流程步驟中,新增 ClaimsExchange 元素。 將標識符設定為目標宣告交換標識碼的值。將TechnicalProfileReferenceId的值更新為您稍早建立之技術配置檔的標識碼。
下列 XML 示範使用者旅程圖的前兩個協調流程步驟與識別提供者:
<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元素。 更新 ReferenceId 以符合您新增識別提供者的使用者旅程圖標識碼。
在下列範例中 CustomSignUpSignIn
,針對使用者旅程圖, ReferenceId 會設定為 CustomSignUpSignIn
:
<RelyingParty>
<DefaultUserJourney ReferenceId="CustomSignUpSignIn" />
...
</RelyingParty>
上傳自定義原則
- 登入 Azure 入口網站。
- 在入口網站工具列中選取 [ 目錄 + 訂 用帳戶] 圖示,然後選取包含 Azure AD B2C 租使用者的目錄。
- 在 Azure 入口網站中,搜尋並選取 [Azure AD B2C]。
- 在 [原則] 底下,選取 [身分識別體驗架構]。
- 選取 [ 上傳自定義原則],然後上傳您變更的兩個原則檔案,順序如下:擴充原則,例如
TrustFrameworkExtensions.xml
,然後是信賴憑證者原則,例如SignUpSignIn.xml
。
測試您的自定義原則
- 選取您的信賴憑證者原則,例如
B2C_1A_signup_signin
。 - 針對 [ 應用程式],選取您 先前註冊的 Web 應用程式。 回覆 URL 應該會顯示
https://jwt.ms
。 - 選取 [ 立即 執行] 按鈕。
- 從 [註冊或登入] 頁面中,選取 [QQ] 以使用 QQ 帳戶登入。
如果登入程式成功,您的瀏覽器會重新導向至 https://jwt.ms
,以顯示 Azure AD B2C 所傳回令牌的內容。