前言
"每一个不曾起舞的日子，都是对生命的辜负。" ------ 尼采
网站接入微信授权方案解析
微信内授权实现方案&pc端使用微信授权实现方案
微信内授权实现方案
三方平台代公众号发起授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE&component_appid=ComponentAPPID#wechat_redirect
普通公众号授权
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
参数说明：
| 参数 | 是否必须 | 说明 |
|---|---|---|
| appid | 是 | 公众号的唯一标识 |
| redirect_uri | 是 | 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理 |
| response_type | 是 | 返回类型，请填写code |
| scope | 是 | 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） |
| state | 否 | 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节 |
| #wechat_redirect | 是 | 无论直接打开还是做页面302重定向时候，必须带此参数 |
| forcePopup | 否 | 强制此次授权需要用户弹窗确认；默认为false； |
| ComponentAPPID | 否 | 三方平台id（三方平台代公众号授权时此参数必须） |
开发接入流程
- 微信公众号配置授权域名（根据接入方式不同获取不同配置入口不同）
公众号：「设置与开发」-「功能设置」-「网页授权域名」
三方平台：「三方平台应用列表」- 「应用详情」 -「开发资料」-「公众号开发域名」
- 准备回调中间页，微信授权成功会携带参数跳转中间页
- 处理接收微信返回code，用于后续登录/用户信息同步等能力
非微信浏览器扫码授权方案
1.打开链接方式（官方提供一）
通过添加跳转事件，将参数替换跳转至登录页--微信内扫一扫功能--前端接收通知并登录
js
// 添加跳转链接地址
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect| 参数 | 是否必须 | 说明 |
|---|---|---|
| appid | 是 | 应用唯一标识 |
| redirect_uri | 是 | 请使用urlEncode对链接进行处理 |
| response_type | 是 | 填code |
| scope | 是 | 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login |
| state | 否 | 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验 |
2.使用微信chat-login方式（官方提供二）
1.需准备三方平台账号
2.如下：（需在项目注入wxlogin.js文件）
3.流程图同上（无需跳出当前项目）
js
// 网页应用需注入wxlogin.js文件
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
// 网站应用内设置 设置二维码容器
<div id="wechat_container"></div>
// 登录二维码
const login = new WxLogin({
id: 'wechat_container',
appid: APPID, // 根据实际情况填写
scope: 'snsapi_login',
redirect_uri: '回调地址',
state: new Date().getTime() + '',
href: '' // 二维码样式重置，需转换base64
})
参数说明
| 参数 | 是否必须 | 说明 |
|---|---|---|
| self_redirect | 否 | true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。 |
| id | 是 | 第三方页面显示二维码的容器id |
| appid | 是 | 应用唯一标识，在微信开放平台提交应用审核通过后获得 |
| scope | 是 | 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可 |
| redirect_uri | 是 | 重定向地址，需要进行UrlEncode |
| state | 否 | 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验 |
| style | 否 | 提供"black"、"white"可选，默认为黑色文字描述。详见文档底部FAQ |
| href | 否 | 自定义样式链接，第三方可根据实际需求覆盖默认样式。 |
3.使用微信公众号授权方式
1.准备一个h5页面，作为中间授权使用（✅必须使用微信环境打开）
2.pc端制作登录二维码（✅二维码地址指向h5授权页面）
3.pc端接收登录通知（✅确认用户是否同意微信授权）
4.已授权/未授权处理对应登录流程
注：授权页面需携带用户标识，会话id等参数用于登录等后续操作
以上方案区别
相同点：以上方案均需借助三方平台实现，都已实现解决扫码登录
不同点：1需跳出本页面，部分业务场景不满足，2，3方案为内置二维码形式，无需跳出页面在本页面即可完成登录逻辑，3方案主要为公司内业务场景使用（多租户模式）
官方文档参考地址：
公众号网页授权地址：developers.weixin.qq.com/doc/offiacc...
三方平台代公众号授权地址： developers.weixin.qq.com/doc/oplatfo...
qq登录接入参考地址： wiki.connect.qq.com/%e6%94%be%e...