pc端微信授权登录两种实现方式的总结

在开发pc端项目中，使用微信授权登录是种很常用的功能，目前在功能实现上有两种不同的方式，现根据两种方式做如下总结。

一、跳转微信授权登录页面进行扫码授权

这种方法实现非常简单只用跳转链接就可以实现微信授权登录

window.location = https://open.weixin.qq.com/connect/qrconnect?appid=${appid}&redirect_uri=${回调域名}/login&response_type=code&scope=snsapi_login&state=${自定义配置}#wechat_redirect

跳转之后进行微信扫码，之后微信会带着code，回调回你设置的回调域名，这之后拿到code再和后台进行交互，即可实现微信登陆。
这种方法相对来说实现起来非常简单，但是因为需要先跳转微信授权登录页面，在体验上来说可能不是太好。

二、在当前页面生成微信授权登录二维码

这种方法是需要引入wxLogin.js，动态生成微信登陆二维码，具体实现方法如下：

const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
const wxElement = document.body.appendChild(s)
wxElement.onload = function () {
    var obj = new WxLogin({
      id: 'wx_login_id', // 需要显示的容器id
      appid: '', // 公众号appid
      scope: 'snsapi_login', // 网页默认即可
      redirect_uri:'', // 授权成功后回调的url
      state: '', // 可设置为简单的随机数加session用来校验
      style: 'black', // 提供"black"、"white"可选。二维码的样式
      href: '' // 外部css（查看二维码的dom结构，根据类名进行样式覆盖）文件url，需要https
    })
}

其中href参数项还可以通过node将css文件转换为data-url，实现方式如下：

var fs = require('fs');
function base64_encode(file) { 
    var bitmap = fs.readFileSync(file);
    return 'data:text/css;base64,'+new Buffer(bitmap).toString('base64');
} 
console.log(base64_encode('./qrcode.css'))

在终端对该js文件执行命令：

node qr.js

把打印出来的url粘贴到href即可。
这种实现方法避免了需要跳转新页面进行扫码，二维码的样式也可以进行更多的自定义设置，可能在体验上是更好的选择。

原文：https://segmentfault.com/a/1190000024492932