【uniapp】 H5微信授权登录

H5微信点击授权登录

步骤一：获取code

// 登录
wxlogin() {
	let appid="xxx"//项目appid
	let url=encodeURIComponent('https:/xxx.cn/')//这里的是回调地址要与申请的地址填写一致
	let scopes="snsapi_userinfo"//表示授权的作用域，多个可以用逗号隔开，snsapi_base表示静默授权，snsapi_userinfo表示非静默授权
	let mainstate=Math.random()//state：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）可设置为简单的随机数加session进行校验
	window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scopes}&state=${mainstate}#wechat_redirect`
},

步骤二：获取code换取token

页面会自动跳转到类似以下地址，在重定向的页面拿到给我们返回的 code，会拼接在URL后面

https://www.test.com/?code=xxx&state=STATE

同意授权，跳转到配置回调地址

方式一：

//截取code传给后台，返回token

方式二：

1.用code获取access_token和openid
通过code换取网页授权access_token在业务代码中，用JS获取code参数，然后访问以下地址：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=xxx&secret=SECRET&code=CODE&grant_type=authorization_code
//appid：应用的 Appid,
//secret: 应用密钥 AppSecret,
//code：上一步中获取到的code
//grant_type：值为authorization_code

其中：
成功后的返回数据如下：（主要是拿access_token和openid字段）

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

2.用access_token 和openid获取用户信息
用access_token和openid字段访问以下地址：

https://api.weixin.qq.com/sns/userinfo?access_token=xxx&openid=xxx&lang=zh_CN