微信pc扫码登录网页(OAuth 2.0)前后端流程(基于nodejs)

短的答案

1. 在微信开放平台上注册一个网页应用的账号, 审批通过之后会生成一个 AppId 和 AppSecret
2. 用户在网页上触发登录机制后, 浏览器会跳转到一个拼凑出来的的 url 上
   例如, 在京东使用微信登录, 它的 url 是这样的
   https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=4254CD505A1F4E17DDD96009D4EA2BB860FC6C77A08C92FF3928F27AF381BB92C770127B30BC8487D1703C5878979B10&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Def5652d6750f404399e62e4e7510b066&response_type=code&scope=snsapi_login#wechat_redirect](https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=4254CD505A1F4E17DDD96009D4EA2BB860FC6C77A08C92FF3928F27AF381BB92C770127B30BC8487D1703C5878979B10&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fwx%2Fcallback.action%3Fview%3Dnull%26uuid%3Def5652d6750f404399e62e4e7510b066&response_type=code&scope=snsapi_login#wechat_redirect)
   观察一下, 这个 url 以 key1=value1&key2=value2 的形式携带了一些信息
   那么, 当用户跳转到这个 url 上时, 这些信息就以查询参数的形式发送给微信的服务器, 微信服务器会返回一个页面, 用户在扫描微信上的二维码后, 微信服务器就会完成那那一部分的工作, 然后让用户端主动跳转到我们事先准备的一个 url 上, 例如 www.xxx.com/authcallback?code=xxxxxxx, 以查询参数的形式携带一个 code, 这样我们自己的服务器就能拿到这个 code
3. 我们服务器后台根据这个 code 再去请求微信服务器, 他会返回 openid, unionid, userinfo 等信息, 我们的服务器用 redis 或者其他数据库记录下这个信息
4. 用 cookie 或类似的手段来给页面记录一下身份, 以便下次用户访问的时候会找到这个用户的 openid 等信息, 这样就完成了一个第三方登录的流程

长的答案(完整代码)

一. 前端跳转到微信的url上

这里使用的是在当前页面扫码登录的方式 (如果想使用类似京东直接跳转的登录, 可以直接平凑出来一个 url 然后跳转即可 )

1. 引入微信登录的js文件
   
2. 调用微信的接口

var obj = new WxLogin({
    id: "login_container",
    appid: "wx8725b9a19e0abc0e",
    scope: "snsapi_login",
    redirect_uri: "https://xxx.com/auth/callback",
    state: "",
    style: "",
    href: ""
})

3. 几个参数的含义

• id: 显示登录二维码的容器
• appid: 网站应用的id
• scope: 网页应用只用写 snsapi_login
• redirect_uri: 后端准备的回调地址, 用来接收code
• state: 会原路返回, 可用于防止csrf攻击, 非必须
• style: 二维码的样式, 提供"black", "white", 非必需
• href: 自定义样式链接

二. 后端接收 code

后端使用的是 express 的写法
同时也使用了由朴灵大神写的库 wechat-oauth, 它内部封装了获取用户信息的方法, 让我们不必纠结于这些细节
只需要知道它做了什么: 发送 code 到微信的服务器, 然后微信返回了用户的信息
可以命令行运行 npm i wechat-oauth 下载
代码如下

const OAuth = require('wechat-oauth')
const router = express.Router()
// 使用网页应用的 appid 和 secret 去初始化 wechat-oauth 的方法
const wxPcClient = new OAuth(WX_APP_ID, WX_APP_SECRET)
router.get('/callback', (req, res) => {
  // 这里接收前端的 redirect_url 传递的 code 
  const { code } = req.query 
  wxPcClient.getAccessToken(code, (err, result) => {
    if (!err) {
      const accessToken = result.data.access_token
      const openId = result.data.openid
      const unionId = result.data.unionid
      // 这里生成一个 sessionid
      const sessionId = generateSessionId()
      wxPcClient.getUser(openId, (err, result) => {
        // 这里获取到了用户的信息, 可以存储在数据库中
        const {nickname, sex, city, province, country, headimgurl} = result
        // 设置一个 cookie 用于标记这个用户
        res.cookie('wxsessionid', sessionId, { maxAge: 84600000, httpOnly: true })
        // 登录成功后做一个跳转, 也可以不做
        res.redirect('https://xxx.com/yyy.html')
      })
    }
  })
})