Scan the WeChat QR code to log in. There are two implementation methods:
Method 1, WeChatOpen a>Platform Everyone must be clear about which method they want to use. , the WeChat parameterized 2D is generated QR code, you can scan the QR code to follow the official account and log in WeChat public account is authorized to log in through the WeChat public account by scanning the QR code. With the help of the individual or company's PublicWeChat
Method 2, is an interface opened by WeChat to access more third-party applications. It relies on the company’s account registered with the [Company Business License] on the [WeChat Open Platform]. Scan code to log inPlatformIn fact, there is another scenario where the h5 page obtains user information by clicking a certain button (actually calling WeChat’s web authorization interface). You can refer to this video for this scenario------->Address
This article only introduces the first method in detail---------- [WeChat Open Platform]
The first way: [WeChat Open Platform]
Nowadays, there are more and more users using WeChat. If the website adds WeChat login, it will save a lot of user registration time, which will be great Streamlined registration process. It will make users feel particularly convenient. Next, we will talk about how to implement WeChat scan code login on PC.
Step 1: Apply for a WeChat open platform account
Website:WeChat Open Platform
1. The first thing we have to do is to enter the WeChat open platform to apply for an open platform account and obtain the qualification!
(1) Support enterprise types (previously only enterprise registration was supported)
(2) After registration, you will be provided with WeChat ID and WeChat key
ps: Registration requires a business license, 1-2 working days for approval, and a certification fee of 300 yuan.
After entering the page, click the registration button to start registering our new account. Just follow the requirements and complete the registration step by step.
2. Apply for a website application name.
Enter the "Management Center" of the open platform => "Website Application" and then create a website application to create your own website application.
That is to say, when you scan the QR code, it will display the application name of the current website. This is usually approved within 7 working days.
After the review is passed, the website application will be available in the list. Click to view to obtain the appId and appSecret.
3. Set the callback domain name, which requires a domain name address.
Address function: This callback domain name is the page we will jump to after scanning the code. At this time, this page will return the code sent to us by WeChat, Based on this code, we can get the WeChat user's information and start logging in. The setting is the same as appSecret, which is also on the details page.
Next, start implementing this code scanning function on the front end.
WeChat login functionOfficial document
The document mentions two ways for users to scan the code, which can also be said to be two ways of displaying the QR code.
One is to jump to the QR code scanning page, and the other is the embedded QR code. Everyone can choose according to their needs.
The whole process is roughly like this:
①Initiated by a third partyWeChat authorized login request. After the WeChat user allows authorization of the third-party application, WeChat will launch the application or redirect to Third-party website, and bring the authorization temporary ticket code parameter;
② Send the code parameter plus AppID and AppSecret to the backend, and the backend exchanges it through APIaccess_token;
③The backend makes interface calls through access_token to obtain the user's basic data resources or help the user implement basic operations.
The process is described in detail below:
First, there are two ways to display QR codes:
Embedded QR code: (The following steps can be found in WeChat official documents)
1. First introduce it on the pagehttp://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js, if the website supports https, change the prefix to https
2. Instance the following JS object where WeChat login is required:
var obj = new WxLogin({
self_redirect:true,
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});Parameter Description:
ps: This callback address is the redirect_url redirect address we configured in the configuration file before. It is the domain name address filled in when registering the qualification.
Define a div in the page to display the QR code. This ID must be passed into the method of creating the QR code. The ID received by the following method is the ID of the container.
In this way, the QR code can be displayed
Jump to QR code scanning page
Directly request the fixed address provided by WeChat and splice the parameters after the address.
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirects
Parameter description: (see official documentation for details)
ps: This callback address is the redirect_url redirect address we configured in the configuration file before. It is the domain name address filled in when registering the qualification.
After displaying the two QR codes above, we can get the code, and then exchange it for the user access_token and openid through the API provided by WeChat
Return instructions
Correct return:
{
"access_token":"ACCESS_TOKEN", //接口调用凭证
"expires_in":7200, //access_token接口调用凭证超时时间，单位（秒）
"refresh_token":"REFRESH_TOKEN", //用户刷新access_token
"openid":"OPENID", //授权用户唯一标识
"scope":"SCOPE", //用户授权的作用域，使用逗号（,）分隔
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" //当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。
} 