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
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐