前言

"每一个不曾起舞的日子，都是对生命的辜负。" ------ 尼采

网站接入微信授权方案解析

微信内授权实现方案&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.打开链接方式（官方提供一）

通过添加跳转事件，将参数替换跳转至登录页--微信内扫一扫功能--前端接收通知并登录

stateDiagram-v2 网站登录 --> 跳转至微信授权页跳转至微信授权页 --> 使用微信内扫一扫授权使用微信内扫一扫授权 --> 微信授权页收到通知微信授权页收到通知 --> 成功则重定向页面（即项目url并处理登录逻辑）微信授权页收到通知 --> 失败不跳转

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.使用微信公众号授权方式

stateDiagram-v2 pc登录 --> 二维码页面（即h5授权页）二维码页面（即h5授权页） --> 微信公众号授权微信公众号授权 --> 已授权微信公众号授权 --> 未授权已授权 --> pc端接收通知（携带参数）未授权 --> pc端接收通知（携带参数） pc端接收通知（携带参数） --> pc登录

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...

网站应用接入微信登录方案解析

前言