网站应用微信登录

前言

之前也有做过微信小程序里的登录授权，原理是差不多的，拿到的数据一模一样，就实现的方式有一点不一样。刚好公司的项目中有一个评论模块，需要有评论人的信息，于是就做了网页版本的。
目前网站应用微信登录要求在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

前端要做的步骤：请求code，给后台，换取用户数据

在文档中，详细的介绍了两种方式：
1.跳转到微信提供的二维码生成页面，用户使用微信扫码授权后通过JS将code跳回原来的页面。
2.网站将微信登录二维码内嵌到自己页面中，用户使用微信扫码授权后通过JS将code返回给网站。
官网已经把第一种方法描述的很详细了，以下所说的是第二种方法。

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

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

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

// 登录完跳转回当前页面
const redirectUrl = encodeURI(‘这里填写后台根据code获取access_token再调用别的接口提供的链接’'+ location.href)
const obj = new WxLogin({
    // 如果只是在页面一小块显示二维码，前方不要填true！！官方的我复制过来的时候是true，很坑
    self_redirect: false,
    // 第三方页面显示二维码的容器id
    id: "login_container",
    // 只有appid正确，且配置的站点与后台链接站点相同才能正常显示二维码
    appid: "你的appid",
    scope: "snsapi_login",
    redirect_uri: redirectUrl,
    state: "aw",
    style: "white",
})

步骤3：拿到用户数据

当用户使用微信扫码授权后，通过JS将code给后台的redirect_uri网址，后台拿到code后应继续执行一系列操作，最后通过网页跳转返回用户信息给前端，前端就能拿到用户信息，将其存在Cookie和页面里。

参考资料

微信开放平台官方文档