Authing provides a way for developers to quickly obtain user information and complete login on WeChat web pages through the SDK. If the user accesses a third-party webpage in the WeChat client, the official account can obtain the user's basic information through the WeChat webpage authorization mechanism, and then realize the business logic.
- Application scenarios: WeChat web pages, official accounts;
- Overview: The WeChat authorization box pops up on the web page in the WeChat APP, and the user can obtain the current user's information after authorization.
Step 1: Create a WeChat service account on the WeChat public platform
Please go to the WeChat public platform guidelines to create a WeChat service account.
You need to record the app’s developer ID (App ID) and developer secret (App Secret), which will be used later. In the settings of the WeChat public platform background -> Official Account Settings -> Function Settings page, set the webpage authorization scope to core.authing.cn . During this process, you need to check the legitimacy of the domain name. For details, see the next step.
Step 2: Configure the WeChat webpage authorization application in the Authing console
On the social login configuration page of the console, find the WeChat webpage authorized login application, and fill in the following configuration:
App ID: Developer ID;
App Secret: developer secret;
Callback URL: This is your business callback domain name, which is different from the callback link configured by the social login application. For example, your website domain name is https://example.com , and the url for processing Authing callback requests is /auth/callback, then you should fill in https://example.com/auth/callback. If you need to configure the callback link separately in the application, the address here can be filled in: #.
Txt Filename: The txt file name used to verify the domain name.
Txt Content: The content of the txt file used to verify the domain name.
After the configuration is complete, click "OK" to save the information.
Step 3: Start to develop access
Use SDK to access
First use CDN to introduce authing-wxmp-sdk:
Initialize SDK
Use the user pool ID to initialize the SDK:
Initiate WeChat authorization
Call the getAuthorizationUrl method to get the WeChat authorized login link, modify window.location to jump to the WeChat login authorization page:
Get user information
After jumping back to the business callback link, obtain user information through the getUserInfo method:
Next
After obtaining the user information, you can get the user's identity credential (the token field of the user information). You can carry this token in the subsequent request sent by the client to the back-end server. Take axios as an example:
The legitimacy of this token needs to be verified in the back-end interface to verify the user's identity. For details of the verification method, please refer to verifying user identity credentials (token) . After identifying the user, you may also need to perform permission management on the user to determine whether the user has operating permissions for this API.
Use the embedded login component to access
Take React as an example.
Install @authing/react-ui-components
initialization
use
After the initialization is completed, you will see the following buttons when you open the page in WeChat. Click to authorize. After authorization is completed, you will jump to the application callback link, and you can use AuthenticationClient to obtain user information.
If you like our content, please follow the official account "Authing Identity Cloud" and visit our blog . More interesting content is waiting for you~