Skip to content

Commit fe6f323

Browse files
reginayap8reginayap8
authored
Upload images
1 parent 154b9a5 commit fe6f323

File tree

7 files changed

+189
-0
lines changed

7 files changed

+189
-0
lines changed

‎AppInfo.png

31.3 KB
Loading

‎ApprovedApp.png

30.4 KB
Loading

‎CallbackDomain.png

5.92 KB
Loading

‎ConfigureWeChat.png

6.03 KB
Loading

‎LinkWeChatIdp.png

132 KB
Loading

‎WeChatClientInfo.png

43.1 KB
Loading

‎identity-provider-wechat.md

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
---
2+
title: Set up sign-up and sign-in with a WeChat account
3+
titleSuffix: Azure AD B2C
4+
description: Provide sign-up and sign-in to customers with WeChat accounts in your applications using Azure Active Directory B2C.
5+
author: garrodonnell
6+
manager: CelesteDG
7+
ms.service: active-directory
8+
ms.topic: how-to
9+
ms.date: 09/16/2021
10+
ms.author: godonnell
11+
ms.subservice: B2C
12+
zone_pivot_groups: b2c-policy-type
13+
14+
#Customer Intent: As a developer using Azure Active Directory B2C, I want to set up sign-up and sign-in with a WeChat account, so that users can authenticate using their WeChat credentials.
15+
16+
---
17+
18+
# Set up sign-up and sign-in with a WeChat account using Azure Active Directory B2C
19+
20+
21+
[!INCLUDE [active-directory-b2c-choose-user-flow-or-custom-policy](../../includes/active-directory-b2c-choose-user-flow-or-custom-policy.md)]
22+
23+
[!INCLUDE [active-directory-b2c-public-preview](../../includes/active-directory-b2c-public-preview.md)]
24+
25+
## Prerequisites
26+
27+
[!INCLUDE [active-directory-b2c-customization-prerequisites](../../includes/active-directory-b2c-customization-prerequisites.md)]
28+
29+
## Create a WeChat application
30+
31+
To enable sign-in for users with a WeChat account in Azure Active Directory B2C (Azure AD B2C), you need to create an application in [WeChat management center](https://open.weixin.qq.com/). If you don't already have a Weixin Open Platform account, you can get information at [https://kf.qq.com](https://kf.qq.com/faq/161220Brem2Q161220uUjERB.html). The Weixin Open Platform account and application must be approved to link WeChat as an identity provider to your user flow.
32+
33+
### Register a WeChat application
34+
35+
1. Sign in to [https://open.weixin.qq.com/](https://open.weixin.qq.com/) with your WeChat credentials.
36+
1. Select **管理中心** (management center).
37+
1. Follow the steps to register a new application.
38+
1. Ensure the application status is "Approved".
39+
40+
- <img src="ApprovedApp.png" alt="ApprovedApp" width="1200"/>
41+
42+
1. For the **Development information** (authorization callback domain), enter `your-tenant-name.b2clogin.com`.
43+
- Mooncake callback URL: `your-tenant-name.b2clogin.cn`
44+
45+
- <img src="CallbackDomain.png" alt="CallbackDomain" width="1200"/>
46+
47+
1. Copy the **APP ID** and **APP KEY**. You need both of them to configure the identity provider to your tenant.
48+
49+
- <img src="AppInfo.png" alt="AppInfo" width="1200"/>
50+
51+
::: zone pivot="b2c-user-flow"
52+
53+
## Configure WeChat as an identity provider
54+
55+
1. Sign in to the [Azure portal](https://portal.azure.com/) as the global administrator of your Azure AD B2C tenant.
56+
1. If you have access to multiple tenants, select the **Settings** icon in the top menu to switch to your Azure AD B2C tenant from the **Directories + subscriptions** menu.
57+
1. Choose **All services** in the top-left corner of the Azure portal, search for and select **Azure AD B2C**.
58+
1. Select **Identity providers**, then select **WeChat (Preview)**.
59+
1. Enter a **Name**. For example, *WeChat*.
60+
1. For the **Client ID**, enter the APP ID of the WeChat application that you created earlier.
61+
1. For the **Client secret**, enter the APP KEY that you recorded.
62+
1. Select **Save**.
63+
64+
- <img src="WeChatClientInfo.png" alt="WeChatClientInfo" width="900"/>
65+
66+
## Add WeChat identity provider to a user flow
67+
68+
1. In your Azure AD B2C tenant, select **User flows**.
69+
1. Click the user flow that you want to add the WeChat identity provider.
70+
1. Under the **Social identity providers**, select **WeChat**.
71+
1. Select **Save**.
72+
73+
- <img src="LinkWeChatIdp.png" alt="LinkWeChatIdp" width="1200"/>
74+
75+
1. To test your policy, select **Run user flow**.
76+
1. For **Application**, select the web application named *testapp1* that you previously registered. The **Reply URL** should show `https://jwt.ms`.
77+
1. Select the **Run user flow** button.
78+
1. From the sign-up or sign-in page, select **WeChat** to sign in with WeChat account.
79+
80+
If the sign-in process is successful, your browser is redirected to `https://jwt.ms`, which displays the contents of the token returned by Azure AD B2C.
81+
82+
::: zone-end
83+
84+
::: zone pivot="b2c-custom-policy"
85+
86+
## Create a policy key
87+
88+
You need to store the client secret that you previously recorded in your Azure AD B2C tenant.
89+
90+
1. Sign in to the [Azure portal](https://portal.azure.com/).
91+
1. If you have access to multiple tenants, select the **Settings** icon in the top menu to switch to your Azure AD B2C tenant from the **Directories + subscriptions** menu.
92+
1. Choose **All services** in the top-left corner of the Azure portal, and then search for and select **Azure AD B2C**.
93+
1. On the Overview page, select **Identity Experience Framework**.
94+
1. Select **Policy Keys** and then select **Add**.
95+
1. For **Options**, choose `Manual`.
96+
1. Enter a **Name** for the policy key. For example, `WeChatSecret`. The prefix `B2C_1A_` is added automatically to the name of your key.
97+
1. In **Secret**, enter your client secret that you previously recorded.
98+
1. For **Key usage**, select `Signature`.
99+
1. Click **Create**.
100+
101+
## Configure WeChat as an identity provider
102+
103+
To enable users to sign in using a WeChat account, you need to define the account as a claims provider that Azure AD B2C can communicate with through an endpoint. The endpoint provides a set of claims that are used by Azure AD B2C to verify that a specific user has authenticated.
104+
105+
You can define a WeChat account as a claims provider by adding it to the **ClaimsProviders** element in the extension file of your policy.
106+
107+
1. Open the *TrustFrameworkExtensions.xml*.
108+
2. Find the **ClaimsProviders** element. If it does not exist, add it under the root element.
109+
3. Add a new **ClaimsProvider** as follows:
110+
111+
```xml
112+
<ClaimsProvider>
113+
<Domain>wechat.com</Domain>
114+
<DisplayName>WeChat (Preview)</DisplayName>
115+
<TechnicalProfiles>
116+
<TechnicalProfile Id="WeChat-OAuth2">
117+
<DisplayName>WeChat</DisplayName>
118+
<Protocol Name="OAuth2" />
119+
<Metadata>
120+
<Item Key="ProviderName">wechat</Item>
121+
<Item Key="authorization_endpoint">https://open.weixin.qq.com/connect/qrconnect</Item>
122+
<Item Key="AccessTokenEndpoint">https://api.weixin.qq.com/sns/oauth2/access_token</Item>
123+
<Item Key="ClaimsEndpoint">https://api.weixin.qq.com/sns/userinfo</Item>
124+
<Item Key="scope">snsapi_login</Item>
125+
<Item Key="HttpBinding">GET</Item>
126+
<Item Key="AccessTokenResponseFormat">json</Item>
127+
<Item Key="ClientIdParamName">appid</Item>
128+
<Item Key="ClientSecretParamName">secret</Item>
129+
<Item Key="ExtraParamsInAccessTokenEndpointResponse">openid</Item>
130+
<Item Key="ExtraParamsInClaimsEndpointRequest">openid</Item>
131+
<Item Key="ResponseErrorCodeParamName">errcode</Item>
132+
<Item Key="external_user_identity_claim_id">unionid</Item>
133+
<Item Key="client_id">Your WeChat application ID</Item>
134+
</Metadata>
135+
<CryptographicKeys>
136+
<Key Id="client_secret" StorageReferenceId="B2C_1A_WeChatSecret" />
137+
</CryptographicKeys>
138+
<OutputClaims>
139+
<OutputClaim ClaimTypeReferenceId="UserId" PartnerClaimType="unionid" />
140+
<OutputClaim ClaimTypeReferenceId="identityProvider" DefaultValue="wechat.com" AlwaysUseDefaultValue="true" />
141+
<OutputClaim ClaimTypeReferenceId="authenticationSource" DefaultValue="socialIdpAuthentication" AlwaysUseDefaultValue="true" />
142+
</OutputClaims>
143+
<OutputClaimsTransformations>
144+
<OutputClaimsTransformation ReferenceId="CreateRandomUPNUserName" />
145+
<OutputClaimsTransformation ReferenceId="CreateUserPrincipalName" />
146+
<OutputClaimsTransformation ReferenceId="CreateAlternativeSecurityId" />
147+
<OutputClaimsTransformation ReferenceId="CreateSubjectClaimFromAlternativeSecurityId" />
148+
</OutputClaimsTransformations>
149+
<UseTechnicalProfileForSessionManagement ReferenceId="SM-SocialLogin" />
150+
</TechnicalProfile>
151+
</TechnicalProfiles>
152+
</ClaimsProvider>
153+
```
154+
155+
4. Set **client_id** to the application ID from the application registration.
156+
5. Save the file.
157+
158+
[!INCLUDE [active-directory-b2c-add-identity-provider-to-user-journey](../../includes/active-directory-b2c-add-identity-provider-to-user-journey.md)]
159+
160+
161+
```xml
162+
<OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
163+
<ClaimsProviderSelections>
164+
...
165+
<ClaimsProviderSelection TargetClaimsExchangeId="WeChatExchange" />
166+
</ClaimsProviderSelections>
167+
...
168+
</OrchestrationStep>
169+
170+
<OrchestrationStep Order="2" Type="ClaimsExchange">
171+
...
172+
<ClaimsExchanges>
173+
<ClaimsExchange Id="WeChatExchange" TechnicalProfileReferenceId="WeChat-OAuth2" />
174+
</ClaimsExchanges>
175+
</OrchestrationStep>
176+
```
177+
178+
[!INCLUDE [active-directory-b2c-configure-relying-party-policy](../../includes/active-directory-b2c-configure-relying-party-policy-user-journey.md)]
179+
180+
## Test your custom policy
181+
182+
1. Select your relying party policy, for example `B2C_1A_signup_signin`.
183+
1. For **Application**, select a web application that you [previously registered](tutorial-register-applications.md). The **Reply URL** should show `https://jwt.ms`.
184+
1. Select the **Run now** button.
185+
1. From the sign-up or sign-in page, select **WeChat** to sign in with WeChat account.
186+
187+
If the sign-in process is successful, your browser is redirected to `https://jwt.ms`, which displays the contents of the token returned by Azure AD B2C.
188+
189+
::: zone-end

0 commit comments

Comments
 (0)