【uniapp】 H5微信授权登录
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
更多推荐
已为社区贡献8条内容
所有评论(0)