WeChat webpage authorization

There are almost three steps to authorize WeChat webpages. The specific documents can be found here . I drew the following flowchart:

The following is the actual code

Step 1: The user agrees to the authorization and obtains the code

You need to call the /auth interface first, and pass in the required parameters url and scope (this is the parameter name)

Request method: GET

• url is the callback address

• scope has two optional parameters

  • snsapi_base can only obtain the openid of the user entering the page, the user is not aware of it, it is called silent authorization
  • snsapi_userinfo can obtain the basic information of the user, but it needs to be accepted by the user, which is called manual authorization, as shown in the following figure

For specific differences, please go to the WeChat document to view

Step 2: Exchange code for web page authorization access_token

Here is an example of manual authorization

After obtaining the WeChat code, request /getUserInfo

Request method: GET

Request parameters: code, need to request /auth get to code First, if you request /auth passed when scope is snsapi_userinfo , then return WeChat personal information, including WeChat name, gender, region, nationality, avatar, etc., as follows

 {
  "openid":" OPENID",
  "nickname": NICKNAME,
  "sex":"1",
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",        "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

But if scope is snsapi_base , only the user's openid will be returned when the request is successful.

PS: Request /getOpenId , /getUserInfo return on success access_token , but this access_token and micro-side development of telecommunication services access_token Different, one is WeChat dealing with the server (WeChat ticket service), and the other is the OAuth2.0 service of WeChat web page (web page authorization)

Step 3: Request userInfo

Take the access_token and openid to request the official WeChat interface

http：GET（请使用 https 协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

Return information such as openid, nickname, sex, province, city, country, headimgurl, etc., take openid and the data you want and return to the original /auth on the url in the parameter

actual combat

First call the /auth interface and pass in the parameters url and scope

Request interface: http://192.168.230.209/auth?url=http://192.168.230.209/home&scope=snsapi_userinfo

url=http://192.168.230.209/home , that is, the front-end address returned after the final authorization is completed and the data is obtained

Judging the parameter scope, if it is snsapi_userinfo , the user will jump to the /getWxUserInfo interface after clicking authorization;

If it is snsapi_base , after silent authorization, jump to getOpenId interface

The scope we pass here is snsapi_userinfo , so there will be an authorization page after the request is successful

Click "Agree" to jump to the page

http://192.168.230.209:8888/api/wechat/getWxUserInfo?code=081UcAFa1s1OAz0o7wGa1wb8vG1UcAFX&state=123

PS: http://192.168.230.209:8888/api/wechat is the backend service address, getWxUserInfo is the route (ie request interface)

Get the code from ctx.request.query , take the code to request the access_token service, the access_token service is also a method provided by WeChat official

获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

If the request is successful, take the access_token and openid in this return value, and request the userinfo interface, which has been introduced above, and will not be repeated here.

The point to be noted here is that if the return code of the request access_token is 40029, it means that the access_token has expired, and we need to refresh the access_token

After getting the return value of userinfo, splicing openid, headimgurl, etc. on the url originally stored in redis

One thing to note here

You need to configure the callback page domain name of OAuth2.0 web page authorization first, similar to this

Summarize

You must know one thing, WeChat web development is not the same as calling WeChat's JS-SDK, and it is also different from WeChat server development

It can be said at the beginning, there are fewer pits, and it will not encounter various errors like JS-SDK.

Just know that it is a service for obtaining openid (and WeChat personal information)