详细微信公众号网页授权

微信公众号网页授权

微信公众号网页授权文档 :
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

主要步骤与思路：

引导用户进入微信授权OAuth2.0鉴权网页链接,前端截取code传给后端即可,另外注意回调域名要设置
步骤：
第一步：用户同意授权，获取code;
第二步：通过code换取网页授权access_token
第三步：拉取用户信息(需scope为 snsapi_userinfo)

重点如下：

AppID(小程序ID) 必填
尤其注意：跳转回调redirect_uri，应当使用https链接来确保授权code的安全性。

关于网页授权的两种scope的区别说明:
1、以snsapi_base为scope发起的网页授权，用来获取进入页面的用户的openid的，静默授权并自动跳转到回调页的，用户感知的就是直接进入了回调页

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

/*
/*
第一步：用户同意授权，获取code
在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：
*/ 

//前端只需截取code即可
 const appId = '你的小程序开发者工具id';
 const seCret = '你的小程序秘钥';
 
 //回调域名
 const redirect =  'url' //这里必须设置回调网页授权否则无效
 //若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限
 //设置scope参数为snsapi_userinfo
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect。`

如果用户同意授权，页面将跳转至 redirect_uri/?回调页面。
code作为换取access_token的门票。

第一步之后请求接口传code门票，剩下数据交给后端获取即可。

以下参照即可:

/*
第二步：通过code换取网页授权access_token

首先请注意，这里通过code换取的是一个特殊的网页授权access_token,如果网页授权的作用域为snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。
*/ 

'获取code后，请求以下链接获取access_token：  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code'

获取用户信息

/*
第三步：拉取用户信息(需scope为 snsapi_userinfo)

如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。
*/ 

//请求方法
'http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN'