# 关于微信快速登录功能的说明

为了简化用户登录流程，在微信 3.9.11 for Windows 及以上版本与微信 4.0.0 for Mac 及以上版本，用户可使用网站应用快速登录功能。

当网站应用发起微信登录请求时，如果用户此时在 Windows / Mac 设备已经登录了符合要求的微信客户端，且处于非锁定状态，会优先提示用户使用当前微信客户端已登录的账号进行快速登录。

快速登录无需扫码，可直接在 Windows / Mac 设备上进行确认。用户仍可切换其他微信账号或二维码登录。

# 准备工作

网站应用微信登录是基于 OAuth2.0 协议标准构建的微信 OAuth2.0 授权登录系统。

在进行微信 OAuth2.0 授权登录接入之前，在微信开放平台注册开发者账号，并拥有一个已审核通过的网站应用，并获得相应的 AppID 和 AppSecret，申请微信登录且通过审核后，可开始接入流程。

# 授权流程说明

微信 OAuth2.0 授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信 OAuth2.0 的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过 access_token 可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。

微信 OAuth2.0 授权登录目前支持 authorization_code 模式，适用于拥有 server 端的应用授权。该模式整体流程为：

第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数；
通过 code 参数加上 AppID 和 AppSecret 等，通过 API 换取 access_token；
通过 access_token 进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

获取 access_token 时序图：

# 第一步：请求 CODE

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域（scope=snsapi_login），则可以通过在 PC 端打开以下链接：

https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

若提示「该链接无法访问」，请检查参数是否填写错误，如 redirect_uri 的域名与审核时填写的授权域名不一致或 scope 不为 snsapi_login。

参数说明

参数	是否必须	说明
appid	是	应用唯一标识
redirect_uri	是	请使用 urlEncode 对链接进行处理
response_type	是	填 code
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写 snsapi_login
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击，建议第三方带上该参数，可设置为简单的随机数加 session 进行校验
lang	否	界面语言，支持 cn（中文简体）与 en（英文），默认为 cn

返回说明

用户允许授权后，将会重定向到 redirect_uri 的网址上，并且带上 code 和 state 参数：

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则不会发生重定向。

将微信登录二维码内嵌到自己页面

为了满足网站更定制化的需求，还提供了内嵌二维码登录方式。用户使用微信扫码授权后通过 JS 将 code 返回给网站。

步骤 1：在页面中引入如下 JS 文件（支持 https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤 2：在需要使用微信登录的地方实例化 JS 对象：

var obj = new WxLogin({
    self_redirect: true,
    id: "login_container",
    appid: "",
    scope: "",
    redirect_uri: "",
    state: "",
    style: "",
    href: "",
    onReady: function(isReady) {
        console.log(isReady);
    }
});

参数说明

参数	是否必须	说明
self_redirect	否	true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
id	是	第三方页面显示二维码的容器 id
appid	是	应用唯一标识，在微信开放平台提交应用审核通过后获得
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写 snsapi_login 即可
redirect_uri	是	重定向地址，需要进行 UrlEncode
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止 csrf 攻击
style	否	提供 "black"、"white" 可选，默认为黑色文字描述。详见 FAQ
href	否	自定义样式链接，第三方可根据实际需求覆盖默认样式
stylelite	否	切换二维码登录样式，值为 1 时切换到新样式。详见 FAQ
fast_login	否	启用或禁用快速登录功能，值为 0 时将禁用快速登录
color_scheme	否	支持切换 light 或 dark 主题，值为 "auto" 时表示跟随系统主题
onReady	否	iframe 页面是否加载成功的回调
onQRcodeReady	否	二维码加载完成的回调

# 第二步：通过 code 获取 access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数说明

参数	是否必须	说明
appid	是	应用唯一标识，在微信开放平台提交应用审核通过后获得
secret	是	应用密钥 AppSecret，在微信开放平台提交应用审核通过后获得
code	是	填写第一步获取的 code 参数
grant_type	是	填 authorization_code

返回说明

正确的返回：

{
    "access_token": "ACCESS_TOKEN",
    "expires_in": 7200,
    "refresh_token": "REFRESH_TOKEN",
    "openid": "OPENID",
    "scope": "SCOPE",
    "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

# 第三步：通过 access_token 调用接口

获取 access_token 后，进行接口调用，有以下前提：

access_token 有效且未超时；
微信用户已授权给第三方应用账号相应接口作用域（scope）。

接口调用方法可查阅《微信授权关系接口调用指南》。

# FAQ

1. 什么是授权临时票据（code）？

答：第三方通过 code 进行获取 access_token 的时候需要用到，code 的超时时间为 10 分钟，一个 code 只能成功换取一次 access_token 即失效。code 的临时性和一次性保障了微信授权登录的安全性。第三方可通过使用 https 和 state 参数，进一步加强自身授权登录的安全性。

2. 什么是授权作用域（scope）？

答：授权作用域（scope）代表用户授权给第三方的接口权限，第三方应用需要向微信开放平台申请使用相应 scope 的权限后，使用文档所述方式让用户进行授权，经过用户授权，获取到相应 access_token 后方可对接口进行调用。

3. 网站内嵌二维码微信登录 JS 代码中 style 字段作用？

答：第三方页面颜色风格可能为浅色调或者深色调，若第三方页面为浅色背景，style 字段应提供 "black" 值（或者不提供，black 为默认值），则对应的微信登录文字样式为黑色。相关效果如下：

若提供 "white" 值，则对应的文字描述将显示为白色，适合深色背景。相关效果如下：

4. 网站内嵌二维码微信登录 JS 代码中 href 字段作用？

答：如果第三方觉得微信团队提供的默认样式与自己的页面样式不匹配，可以自己提供样式文件来覆盖默认样式。举个例子，如第三方觉得默认二维码过大，可以提供相关 CSS 样式文件，并把链接地址填入 href 字段：

.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}