In the past two years, I have done some development related to wechat public accounts. In recent two years since the micro channel small program came out, the public number of development slowly fade out of view. This time to do an activity page, using the wechat web page authorization login interface, pit or quite a lot of points, just sort out how to obtain the basic information of users through wechat web page authorization.

Register wechat public platform/test number

First of all, we need to register and log in to the wechat public platform. If we don’t have the wechat public account, we can try the wechat public platform interface test account. The interface test number has all the interfaces of the public platform. Don’t worry about all the advanced features that your official account has.

Configure wechat public platform/test number

Two domain name callbacks need to be configured for authorized login on wechat web pages. The first is the JS interface security domain name and the second is the authorization callback page domain name. The two domain names must be accessible from the public network and cannot be added with a port number. For example, if my domain name is wwww.baidu.com, enter www.baidu.com in the two fields. Protocol header http:// https:// do not enter.

Obtaining User Authorization

When the user accesses the front page, The front end needs to make a request https://open.weixin.qq.com/connect/oauth2/authorize?appid= APPID&redirect _uri = user to confirm authorization after a redirect page & the payload = code&scope = S COPE&state= some custom parameters #wechat_redirect. After the user agrees to authorize, wechat will make a redirection, and the redirection address is the redirect_URI we fill in. Will bring a code parameters at the same time, such as: https://www.xxx.com/login?code=001jPCah2IHlBB0vBGah2Tcwah2jPCad

The server obtains authorization data

The front end gets the code parameter in the URL via window.location.search after the redirect and sends the value of code to the back end. Note that code is disposable and can only be used once. After receiving the code, the backend sends a request to exchange the user’s Access token. Note that the access token here is not the access token of the wechat public account.

$The curl https://api.weixin.qq.com/sns/oauth2/access_token?grant_type=authorization_code?appid= your APPID&secret = your SECRET
{
  "access_token": "24_C_G4z0dJmKmdr_aXy-YnBNOSRBEMZzgSi8eDQ203McjmAbnBuhkq1Y-EI_rFIiYU-GMRM-lHDeIdDTCBZVed4VstZJsXaVoWbV0pwMsz0ZE",
  "expires_in": 7200,
  "refresh_token": "24_FXWHriQzFUzQ7IsJXNgCEycLJEex_m4EwLODafl54Awzm368bcn8c3IP0z9BOVCMqzyr8BK3GdELm0IGmPleqieQc0eKzQQyhIG5UJ1rMvA",
  "openid": "oHelauDl2s4jED3RdkWgAKNkp8g8",
  "scope": "snsapi_userinfo"
}
Copy the code

Access token is used to obtain user information

https://api.weixin.qq.com/sns/userinfo?lang=zh_CN\ &access_token=24_C_G4z0dJmKmdr_aXy-YnBNOSRBEMZzgSi8eDQ203McjmAbnBuhkq1Y-EI_rFIiYU-GMRM-lHDeIdDTCBZVed4VstZJsXaVoWbV0pwMs z0ZE\ &openid=oHelauDl2s4jED3RdkWgAKNkp8g8 { "openid": "oHelauDl2s4jED3RdkWxxKNkp8g8", "nickname": "xxx", "sex": 1, "language" : "zh_CN", "city" : "pudong new area", "province", "Shanghai", "country" : "Chinese", "headimgurl" : "http://thirdwx.qlogo.cn/mmopen/vi_32/ucdjsK0uwmb55dIB27H9FcSh6icHvXBVVH0jyvTALlFI2WXHtFic2MOb7jE5C70KibWZ9WicsGNqsmFTkF baaKoI9Q/132", "privilege": [ ] }Copy the code