微信网页授权登录
前期准备授权登录获取微信数据处理授权拒绝前期准备
1.微信公众号开发,首先要搞一个公众号,开发阶段可以申请一个公众平台测试账号。
(进入到微信公众公众平台,找到开发者工具,点开公众平台测试账号)
2.进入测试平台账号后台,找到体验接口权限表,配置授权回调页面域名。
(微信授权登录成功后会回调一个页面,此页面必须在此域名下)
3.记录下测试平台账号的appID和appsecret,后续食用。
授权登录
微信公众平台技术文档: https://mp./wiki?t=resource/res_main&id=mp1421140842
引导用户进入授权页面同意授权
let appid = '你的测试平台账号的appid'let redirect_uri = window.location.href // 授权登录成功回调的地址,一般为当前页// 授权操作是直接访问腾讯开放平台的一个授权地址,授权成功后会回调window.location = 'https://open./connect/oauth2/authorize?appid=' +appid +'&redirect_uri=' +redirect_uri +'&response_type=code&scope=snsapi_userinfo&state=abcdefghigklmnopqrstuvwxyz#wechat_redirect' //引导用户授权
参数解析:
appid 为公众号的appId,
redirect_uri 为授权成功的回调页,
response_type 返回类型固定code,
scope 为授权作用域,可选值1.snsapi_base静默授权,无授权页面,只可以获取openid。
可选值2.snsapi_userinfo感知授权,弹出授权页面,需用户同意,可获取openid、昵称、性别、头像等微等用户数据(一般选择次作用域)
Tips:
1.两种授权方式,在测试平台环境下,是需要先关注测试公众号的,正式公众号环境不需要;
2.如果同一用户先进行过snsapi_userinfo授权,后又采取snsapi_base授权,会出现也可以拿到微信用户数据的情况;
3.如果用户关注了公众号,采取snsapi_base授权,也会出现拿到微信用户数据的情况。
(本人开发过程中遇到过2和3情况,为不确定性因素,开发者根据使用场景选择一个授权作用域,尽量不要混用)
获取code参数
在授权成功后,页面将跳转至 redirect_uri/?code=CODE&state=STATE
此时获取到了code参数,code参数就是之后获取微信信息的凭证。
获取微信用户数据
通过code获取到微信用户信息后,结合自身的业务逻辑,完成授权登录的功能。
通过code获取微信用户信息的逻辑需由服务器完成,不建议前端实现。
实现逻辑如下 ⬇️
获取微信数据
1.通过code获取openid及access_token
访问如下接口:
https://api./sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
2.拉取用户信息(需scope为 snsapi_userinfo)
访问如下接口:
https://api./sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
此外微信还提供了刷新access_token的接口。
https://api./sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
处理授权拒绝
以上授权的流程:
业务系统–>微信oauth–>用户授权带上code跳转–>业务系统–>解析code–>通过code获取accesstoken–>通过accesstoken获取用户信息。
以上微信oauth排在了第二步,用户正常允许授权登录则可以跑通流程,如果用户拒绝了,我们的业务系统就会不能正常执行流程。
如果业务允许用户不同意授权直接退出(关闭微信浏览器),则可以改变授权流程:
微信oauth–>用户授权带上code跳转–>业务系统–>解析code–>通过code获取accesstoken–>通过accesstoken获取用户信息。
第一步直接访问微信授权,这种情况下如果用户选择了拒绝,则微信机制则关闭浏览器(拒绝了的处理),如果采取第一种流程,则用户拒绝瞬间的状态我们是无从而知的。