Shulou(Shulou.com)05/31 Report--

This article introduces how to get rid of Wechat authorization login, the content is very detailed, interested friends can use for reference, I hope it can be helpful to you.

Authing provides developers with a quick way to get user information and log in from Wechat web pages through SDK. If the user visits a third-party web page in the Wechat client, the official account can obtain the basic information of the user through the Wechat web page authorization mechanism, and then realize the business logic.

Application scenarios: Wechat web pages, official accounts

Summary: the Wechat authorization box pops up in the web page within Wechat APP, and users can obtain the current user's information after authorization.

Step 1: create a Wechat service number on the Wechat public platform

Please go to Wechat public platform instructions to create a Wechat service number.

You need to record the developer's ID (App ID) and developer key (App Secret) of the application, which you need to use later. In the Wechat public platform backend settings-> official account settings-> function settings page settings web page authorization scope is called core.authing.cn. In this process, you need to verify the validity of the domain name. For more information, please see the next step.

Step 2: configure Wechat web page authorization application in the Authing console

On the social login configuration page of the console, find the Wechat web page authorization login application, and enter the following configuration:

App ID: developer ID

App Secret: developer key

Callback URL: this is the domain name of your business callback, which is different from the callback link configured by the social login application. For example, if your website domain name is https://example.com and the url for handling Authing callback requests is / auth/callback, then you should enter it as https://example.com/auth/callback. If you need to configure callback links separately in the application, you can fill in the address here: #.

Txt Filename: the name of the txt file used to verify the domain name.

Txt Content: used to verify the contents of the txt file for the domain name.

When the configuration is complete, click OK to save the information.

Step 3: start developing access using SDK access

First introduce authing-wxmp-sdk using CDN:

Initialize SDK

Initialize SDK with the user pool ID:

Initiate Wechat authorization

Call the getAuthorizationUrl method to obtain the Wechat authorization login link, and modify _ window.location to jump to the Wechat login authorization page:

Get user information

After jumping back to the business callback link, obtain the 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 include this token in subsequent requests sent by the client to the backend server. Take axios as an example:

You need to verify the validity of this token in the backend API to verify the identity of the user. For more information on the authentication method, please see verify user identity credential (token). After identifying the user, you may also need to manage the rights of the user to determine whether the user has permission to operate on this API.

Access using embedded login components

Take React as an example.

Install @ authing/react-ui-components

Initialization

Use

When you open the page in Wechat after initialization, you will see the following button. Click to authorize it. After authorization, you will be redirected to the application callback link, and you can use AuthenticationClient to obtain user information.

On how to get rid of Wechat authorized login to share here, I hope the above content can be of some help to you, you can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.