记录微信一键登录功能实现背景作为前端开发者，记录一下微信一键登录功能实现步骤注册微信开放平台账号，创建一个应用这

背景

作为前端开发者，记录一下微信一键登录功能实现

步骤

注册微信开放平台账号，创建一个应用

这个就不细写了，主要目的是为了拿到

appid：应用唯一标识，在微信开放平台提交应用审核通过后获得，必须
secret：应用密钥 AppSecret，在微信开放平台提交应用审核通过后获得，必须

获取code

前端

通过 APPID 和 REDIRECT_URI 这两个参数；

REDIRECT_URI：是自己的网页链接；
APPID：应用唯一标识

window.location.href = https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

用户允许授权后，将会重定向到redirect_uri的网址上，并且带上code和state参数

redirect_uri?code=CODE&state=STATE

通过code 拿到access_token

前端将code传给后端，后端请求接口 https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 拿到access_token 和 openid

openid 一般用于项目指向定义的User

{ "access_token":"ACCESS_TOKEN", 
"expires_in":7200, 
"refresh_token":"REFRESH_TOKEN", 
"openid":"OPENID", 
"scope":"SCOPE",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" }

通过access_token 获取微信那边的用户信息

后端请求接口

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

参数说明：

openid：普通用户的标识，对当前开发者帐号唯一
nickname：普通用户昵称
sex：普通用户性别，1为男性，2为女性
province：普通用户个人资料填写的省份
city：普通用户个人资料填写的城市
country：国家，如中国为CN
headimgurl：用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表640*640正方形头像），用户没有头像时该项为空 privilege：用户特权信息，json 数组，如微信沃卡用户为（chinaunicom）
unionid：用户统一标识。针对一个微信开放平台帐号下的应用，同一用户的unionid是唯一的。
建议：开发者最好保存用户 unionID 信息，以便以后在不同应用中进行用户信息互通。

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

后端，通过openid 来创建或者查找已有User

后端将一堆用户信息,jwt生成token返回给前端

前端将token存储在 localStorage;

前端请求头设置Authorization

headers.Authorization = `${token}`

请求getUser，获取用户信息

前端正常显示用户信息