大家好，最近还有很多朋友对于微信官方网站登录不是很理解。然后还有一些网友想弄清楚微信官方网站，泰缘号网小编已经为你找到了相关问题的答案，接下来和我们一起看看吧，希望对大家有所帮助！
准备工作
微信扫码登录是基于OAuth2.0实现的，首先你需要要微信开放平台先注册开发者帐号和一个已审核通过的网站应用，这样你就拿到了AppID和AppSecret，以及你自己网站应用的域名，比如www.xxx.com
// 注册流程按官网要求填写资料就行了注册官网地址：https://mp.weixin.qq.com/
授权流程说明
- 用户点击网页上面的微信扫码登录，我们主动跳转到微信指定的url，并显示一个二维码
- 用户使用微信扫一扫，并授权登录，微信指定的url会回跳到我们设置好的域名url，同时会把code带回来
- 我们拿code参数，加上AppID和AppSecret等，通过API换取access_token
- 通过access_token进行接口调用，获取用户基本数据
授权流程事例图
具体实现
具体实现前，请确认www.xxx.com域名已经设置过网页授权，具体设置是在注册完开发者帐号后，在帐号后台按要求设置就行了
第一步：请求code
用户点击微信扫码登录，主动跳转至https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=https://www.xxx.com/wxauth&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect
1、APPID注册时获取的
2、redirect_uri是用户扫码同意授权后，微信这边主动回跳的地址，在回跳回来这个地址后台会有code，这个redirect_uri需要做一次UrlEncode
3、response_type和scope是固定写法
4、state是相当于传参，微信那边回跳后会原封不动的再带回来
最终回到我们域名的地址大概是这样
https://www.xxx.com?code=32323edcrggfgf232&state=STATE
微信扫码效果图
第二步：通过code获取access_token
前台在拿到code后，调用后台一个api，然后由后台去请求微信的这个api换取access_token，我们不建议前台去直接请求，因为secret最好不要暴露在前端，不安全
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
返回结果
{ "access_token":"ACCESS_TOKEN", "expires_in":7200, "refresh_token":"REFRESH_TOKEN", "openid":"OPENID", "scope":"SCOPE", "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"}
参数说明
|
参数 |
说明 |
|
access_token |
接口调用凭证 |
|
expires_in |
access_token接口调用凭证超时时间，单位（秒） |
|
refresh_token |
用户刷新access_token |
|
openid |
授权用户唯一标识 |
|
scope |
用户授权的作用域，使用逗号（,）分隔 |
|
unionid |
当且仅当该网站应用已获得该用户的userinfo授权时，才会出现该字段。 |
第三步：通过access_token调用接口
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
返回结果
{ "openid":"OPENID", "nickname":"NICKNAME", "sex":1, "province":"PROVINCE", "city":"CITY", "country":"COUNTRY", "headimgurl": "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/0", "privilege":[ "PRIVILEGE1", "PRIVILEGE2"],"unionid": " o6_bmasdasdsad6_2sgVt7hMZOPfL"}
参数 |
说明 |
|
openid |
普通用户的标识，对当前开发者帐号唯一 |
|
nickname |
普通用户昵称 |
|
sex |
普通用户性别，1为男性，2为女性 |
|
province |
普通用户个人资料填写的省份 |
|
city |
普通用户个人资料填写的城市 |
|
country |
国家，如中国为CN |
|
headimgurl |
用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空 |
|
privilege |
用户特权信息，json数组，如微信沃卡用户为（chinaunicom） |
|
unionid |
用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。 |
我们拿到这些用户信息，再结合我们的业务就完成了微信扫码登录
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
本文所有内容来自互联网，如有侵权/不实内容请联系我们删除，联系邮箱postusb@foxmail.com
发布者：缘分，转转请注明出处：https://www.bjxdyg.com/life/87074.html
