• 由于微信官方文档对此的描述虽然还可以，但是还是有一些让人疑惑的地方，所以笔者做了一些注解，希望对大家有所帮助
  为什么不直接写一遍呢？因为懒～～～
• 为方便大家后续找资料，文中出现的链接汇总放到了文章末尾
• 由于时间和水平有限，会有错漏。如果读者发现问题，请及时联系博主。

微信登录和绑定微信

官方文档请看 ：网站应用微信登录开发指南

下面是搬运（红色字体为注释或补充）。当然，后面会有总结的，不是全部搬运，放心。

准备工作

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

授权流程说明

微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等。
微信OAuth2.0授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。该模式整体流程为：

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
2. 通过code参数加上AppID和AppSecret等，通过API换取access_token；
3. 通过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。

参数说明

返回说明

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

redirect_uri?code=CODE&state=STATE

若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

为了满足网站更定制化的需求，我们还提供了第二种获取code的方式，支持网站将微信登录二维码内嵌到自己页面中，用户使用微信扫码授权后通过JS将code返回给网站。（我们主要讲的就是这一种）
JS微信登录主要用途：网站希望用户在网站内就能完成登录，无需跳转到微信域下登录后再返回，提升微信登录的流畅性与成功率。 网站内嵌二维码微信登录JS实现办法：

步骤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: "" });

参数说明

第二步：通过code获取access_token

通过code获取access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&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"}

参数说明

错误返回样例：

{"errcode":40029,"errmsg":"invalid code"}

注意：

1、Appsecret 是应用接口使用密钥，泄漏后将可能导致应用数据泄漏、应用的用户数据泄漏等高风险后果；存储在客户端，极有可能被恶意窃取（如反编译获取Appsecret）；2、access_token 为用户授权第三方应用发起接口调用的凭证（相当于用户登录态），存储在客户端，可能出现恶意获取access_token 后导致的用户数据泄漏、用户微信相关接口功能被恶意发起等行为；3、refresh_token 为用户授权第三方应用的长效凭证，仅用于刷新access_token，但泄漏后相当于access_token 泄漏，风险同上。建议将secret、用户数据（如access_token）放在App云端服务器，由云端中转接口调用请求。

第三步：通过access_token调用接口

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

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

对于接口作用域（scope），能调用的接口有以下：

其中snsapi_base属于基础接口，若应用已拥有其它scope权限，则默认拥有snsapi_base的权限。使用snsapi_base可以让移动端网页授权绕过跳转授权登录页请求用户授权的动作，直接跳转第三方网页带上授权临时票据（code），但会使得用户已授权作用域（scope）仅为snsapi_base，从而导致无法获取到需要用户授权才允许获得的数据和基础功能。
接口调用方法可查阅微信授权关系接口调用指南

F.A.Q

1. 什么是授权临时票据（code）？
   答：第三方通过code进行获取access_token的时候需要用到，code的超时时间为10分钟，一个code只能成功换取一次access_token即失效。code的临时性和一次保障了微信授权登录的安全性。第三方可通过使用https和state参数，进一步加强自身授权登录的安全性。
2. 什么是授权作用域（scope）？
   答：授权作用域（scope）代表用户授权给第三方的接口权限，第三方应用需要向微信开放平台申请使用相应scope的权限后，使用文档所述方式让用户进行授权，经过用户授权，获取到相应access_token后方可对接口进行调用。

总结

1. 用微信给的一个组件wxlogin生成二维码(其实生成二维码就是这么简单)

   var obj = new WxLogin({ self_redirect:true, id:"login_container",  appid: "",  scope: "",  redirect_uri: "",  state: "", style: "", href: "" });
   
   

   • redirect_uri：设定用户扫码操作之后，微信服务器调用的api地址（这个后端api是处理用户扫码后的事件的，因为我们是不知道用户有没有扫码的，所以要通过微信的服务器调用我们的api，来让我们自定义操作来处理扫码事件）。redirect_uri地址由我们的服务器域名（不能是公网IP！！) + 后端api名组成（至于为什么，看后面）。我们要在微信开放平台的网站应用中设置一个回调域名，就是我们的服务器域名，以便微信服务器能调用我们的api(但我不懂的是，万一有其他人调了我们的api咋办，hhhh，这个我后面去查一下吧)。

     • 设置方法：微信开放平台->管理中心->网站应用->在应用名右边点击查看->开发信息->修改（授权回调域）

• state：会放在微信服务器对后端api的调用时post的参数里，可以用于场景判断。就是我们是拿这个二维码来实现登录的，那就设定state为"auth"，我们的后端api就可以根据这个来对用户进行响应。（当然，其实上面的官方文档不是让我们这么用的，嘻嘻嘻）

2. 然后就是用户扫描二维码之后，我们的网站如何接收用户的操作，并进行响应。

   • 是利用我们在微信开放平台设置的回调地址，来让微信服务器把用户的操作通过回调我们在redirect_uri指定的api来传递给我们的网站后端。现在再看下面这张图应该就会有一定的理解了。

     获取access_token时序图

3. 后端接收了微信服务器发送的信息之后，对用户的操作进行响应

   • 调用下面的连接。通过上面拿到的code换取access_token

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

   • 通过access_token来获取用户的信息，进而检验用户是否在数据库内，或这把用户的unionid加进相应的数据库表中。

可能出现的问题及解决

1. 实现展示二维码时

   这里如果是在本地测试运行，应该会出现一个问题，就是redirect_uri参数错误。这个问题出现的原因有

   • 没有进行UrlEncode

   • 地址不是我们在微信开放平台设置的那个

     第一个好解决，encode一下就好。但是第二个问题的话，由于填写的地址是要公网可以访问的，而我们在本地调试的时候，是内网，公网无法访问，这样的话，微信服务器就无法回调我们的api。那这个问题怎么解决呢？

     当当当，frp，内网穿透利器。

frp

1. 简介

   ​ frp是快速反向代理，可帮助您将NAT或防火墙后面的本地服务器公开到Internet。到目前为止，它支持tcp＆udp以及http和https协议，可以在其中将请求通过域名转发到内部服务。(github上的)

2. 说明

   ​ 说的大白话一点，就是我们本地的运行的服务器，比如网站，是无法通过公网直接访问的（就是你的电脑上运行的了一个网站，它的地址是xxx.xxx.xxx.xxx:8080，但是你让你舍友用他的电脑访问这个地址，是无法访问的），而你要让他访问你的网站，就要利用有公网域名的服务器。有公网域名的服务器是可以访问的，再让服务器转发请求到你本地的机子，这样就实现了内网穿透。

   ​ 这里大家可能就蒙了，既然我舍友访问不了，那为什么有公网ip的服务器就能访问我的本地了呢？这不是耍流氓了吗。

   ​ 那我下面把frp的运作过程给大家看一下，大家应该就明白了

3. frp运作流程（以http为例）：

   1. 首先，根据我们的操作系统和架构，从Release页面下载最新frp程序。

      • 一份放到服务器，一份放本地

   2. 服务器运行frp_server

      1. 解压后进入frp程序目录
      2. 修改配置文件frps.ini如下

      ＃ frps.ini 
      [common] 
      bind_port = 7000       ＃ 服务器上frp运行的端口
      vhost_http_port = 8080 ＃ 服务器上接收http请求（eg. 浏览器访问）的端口
      

      3. 然后启动frps（在命令行敲入以下命令）

      ./frps -c ./frps.ini
      

3. 本地运行frp_client

   1. 解压后进入frp程序目录

   2. 修改配置文件frpc.ini如下

      ＃ frpc.ini 
      [common] 
      server_addr = xxxx       ＃ 服务器ip
      server_port = 7000      ＃ 服务器上frp运行的端口
      
      [web] 
       type = http
       local_port = 80        ＃ 本地服务运行的端口
       custom_domains = www.yourdomain.com    
       
      

   3. 然后启动frpc（在命令行敲入以下命令）

      ./frpc -c ./frpc.ini
      

4. 本地的frp client通过server_addr连接服务器上的frp server ，注意啦，现在，本地已经与服务器建立联系

5. 现在，使用url访问你的本地Web服务http://www.yourdomain.com:8080，此时，浏览器会先访问服务器的8080端口，而服务器接收到请求之后，把请求转发给本地的80端口。（反向代理）

6. 本地响应请求，把数据发给服务器，服务器再把数据发给用户（eg. 你的舍友）

好，现在已经能让公网访问我们的本地的机子了。下一步，写回调函数。

2. 回调函数（这是我们的一个示例）

    const wxLogin = async (req, res, next) => {
        const code = lo.get(req, 'query.code') 
        const state = lo.get(req, 'query.state')
        const userId = lo.get(req, 'rSession.userId') 
        try {
            const result = await web_codeToAccessToken(code)  //用code拿access_token
            if (state == 'bind') {
                if (result.access_token && result.openid && result.unionid) {
                    //这里写绑定用户微信相关操作，如写入数据库等
                    const userInfo = await web_accessTokenToUserInfo(result.access_token, result.openid) //用code拿access_token
                } else {
                    // 由于某些原因绑定失败，进行处理
                    
                }
            }
    
            if (state == 'auth') {
                if (result.unionid) {
                    //这里写用户微信登录相关操作

                } else {
                    // 由于某些原因授权失败，进行处理
                   
                }
            }
    
    
        } catch (error) {
            console.error(error);
        }
    }
// 网页登录，用access_token + openid 拿用户信息
const web_accessTokenToUserInfo = async function (accessToken, openid) {
    const result = await fetch(`https://api.weixin.qq.com/sns/userinfo?access_token=${accessToken}&openid=${openid}`)
    const data = await result.json()
    return data
}

// 网页登录，用 code 拿用户的 access_token (包括openid 和 unionid)
const web_codeToAccessToken = async function (code) {
    const result = await fetch(`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${yourAppid}&secret=${yoursecret}&code=${code}&grant_type=authorization_code`)
    const data = await result.json()
    return data
}
//这里注意appid和secret是你自己的appid和secret

关注公众号

生成带参数的二维码

下面是搬运（红色字体为注释或补充）

为了满足用户渠道推广分析和用户帐号绑定等场景的需要，公众平台提供了生成带参数二维码的接口。使用该接口可以获得多个带不同场景值的二维码，用户扫描后，公众号可以接收到事件推送。

目前有2种类型的二维码：

1、临时二维码，是有过期时间的，最长可以设置为在二维码生成后的30天（即2592000秒）后过期，但能够生成较多数量。临时二维码主要用于帐号绑定等不要求二维码永久保存的业务场景 2、永久二维码，是无过期时间的，但数量较少（目前为最多10万个）。永久二维码主要用于适用于帐号绑定、用户来源统计等场景。

用户扫描带场景值二维码时，可能推送以下两种事件：

如果用户还未关注公众号，则用户可以关注公众号，关注后微信会将带场景值关注事件推送给开发者。

如果用户已经关注公众号，在用户扫描后会自动进入会话，微信也会将带场景值扫描事件推送给开发者。

获取带参数的二维码的过程包括两步，首先创建二维码ticket，然后凭借ticket到指定URL换取二维码。

创建二维码ticket （这里的access_token是通过公众号appid和appsecret拿到的，参见[获取access_token](https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html)这篇文章。由于比较易懂就不多说了。但要注意的是：【通过公众号appid和appsecret拿access_token，是要在[微信公众平台](https://mp.weixin.qq.com/)设置获取access_token的ip白名单的。如果不在白名单，是无法获取的，切记，切记。设置方法：微信公众平台->开发->基本配置->ip白名单】）

每次创建二维码ticket需要提供一个开发者自行设定的参数（scene_id），分别介绍临时二维码和永久二维码的创建二维码ticket过程。

临时二维码请求说明

http请求方式: POST
URL: https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
POST数据格式：json
POST数据例子：{"expire_seconds": 604800, "action_name": "QR_SCENE", "action_info": {"scene": {"scene_id": 123}}}

或者也可以使用以下POST数据创建字符串形式的二维码参数：
{"expire_seconds": 604800, "action_name": "QR_STR_SCENE", "action_info": {"scene": {"scene_str": "test"}}}

永久二维码请求说明

http请求方式: POST
URL: https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token=TOKEN
POST数据格式：json
POST数据例子：{"action_name": "QR_LIMIT_SCENE", "action_info": {"scene": {"scene_id": 123}}}

或者也可以使用以下POST数据创建字符串形式的二维码参数：
{"action_name": "QR_LIMIT_STR_SCENE", "action_info": {"scene": {"scene_str": "test"}}}

参数说明

返回说明

正确的Json返回结果:

{"ticket":"gQH47joAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL2taZ2Z3TVRtNzJXV1Brb3ZhYmJJAAIEZ23sUwMEmm
3sUw==","expire_seconds":60,"url":"http://weixin.qq.com/q/kZgfwMTm72WWPkovabbI"}

通过ticket换取二维码

获取二维码ticket后，开发者可用ticket换取二维码图片。请注意，本接口无须登录态即可调用。

请求说明

HTTP GET请求（请使用https协议）https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=TICKET
提醒：TICKET记得进行UrlEncode

返回说明

ticket正确情况下，http 返回码是200，是一张图片，可以直接展示或者下载。

HTTP头（示例）如下：
Accept-Ranges:bytes
Cache-control:max-age=604800
Connection:keep-alive
Content-Length:28026
Content-Type:image/jpg
Date:Wed, 16 Oct 2013 06:37:10 GMT
Expires:Wed, 23 Oct 2013 14:37:10 +0800
Server:nginx/1.4.1

错误情况下（如ticket非法）返回HTTP错误码404。

总结

1.用户扫码之后关注公众号，或者，用户取消关注（这个是不用扫码的），微信服务器都会推送信息给我们的网站（其实就是调用我们约定好的api)

2.这里我们注意到，不像微信登录和绑定那样，在微信开放平台设置接收信息的域名，然后还要设置redirect_uri。这里的话，直接在微信公众平台设置接收信息推送的api地址就好了。

• 设置方法：微信公众平台->开发->基本配置->服务器配置

3.然后只要用户关注了公众号或取消关注，微信服务器都会调用我们设置的api，推送信息给我们的网站，然后我们的网站后端处理事件。

链接汇总

• 网站应用微信登录开发指南
• 微信授权关系接口调用指南
• 微信开放平台
• 微信公众平台
• frp
• 生成带参数的二维码
• 获取access_token