微信网页授权登录

前期准备

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获取用户信息。

第一步直接访问微信授权，这种情况下如果用户选择了拒绝，则微信机制则关闭浏览器(拒绝了的处理)，如果采取第一种流程，则用户拒绝瞬间的状态我们是无从而知的。