楔子

为了丰富场景，满足更多用户的需要，我们在移动端的基础上，迭代了一版PC端。原来移动端是微信授权登录，所以PC端这边使用了PC扫码登录。本文把移动网页授权登录和PC扫码登录都做了简单描述。 此文：1是给自己留存，2是给有需要的人提供些许借鉴

准备工作

移动端微信授权登录：微信公众平台：微信公众号 - appid

PC微信扫码登录：微信开放平台：网站应用 - appid

微信公众号和网站应用最好是同企业主体。（如果不同主体unionID会不同，导致后台判定为两个用户。）

开始接入

移动微信网页授权

用户同意授权后，访问链接获取code，临时授权码，然后微信会跳转到你的回调地址，链接上会带上code open.weixin.qq.com/connect/oau…

然后根据判断链接上有没有code，来通过code调用接口获取token，然后使用token获取用户信息。

PC微信扫码登录

扫码登录有两种方式：

1、账号密码登录，下面可选微信登录

实现方式：

跟移动微信网页授权相似，用户点击微信图标，跳转到下面链接，然后微信会跳转到你的回调地址，链接上会带上code

open.weixin.qq.com/connect/qrc…

然后就可以根据code获取token，然后获取用户信息。

2、网站直接展示二维码，用户需要扫码登录。才能使用系统。

步骤1：在页面中先引入如下JS文件（支持https）：res.wx.qq.com/connect/zh_…

var obj = new WxLogin({

  self_redirect:true,// 非必填，是否在当前页面跳转回调地址

  id:"login_container",// 必填，第三方页面显示二维码的容器id

  appid: "",// 必填，应用唯一标识，在微信开放平台提交应用审核通过后获得

  scope: "",// 必填，应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可

  redirect_uri: "",// 必填，重定向地址，需要进行UrlEncode，（encodeURIComponent）

  state: "",// 非必填，用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验，Math.ceil(Math.random() * 1000)

  style: "",// 非必填，提供"black"、"white"可选，默认为黑色文字描述。主题black为黑色字，白色背景，white为黑色字，白色背景

  href: "",// 非必填，第三方可根据实际需求覆盖默认样式。建议base64

});

以上的参数都正确之后，二维码自动就生成到页面上了，你可以调整style或者写好样式转为base64来设置二维码的样式。用户扫码登录后回调地址上会带上code临时授权码，根据code获取token，根据token获取用户信息。

结尾

移动端网页授权文档：developers.weixin.qq.com/doc/offiacc…

微信扫码登录的文档：developers.weixin.qq.com/doc/oplatfo…

PS：文章所用的图片，如有异议，联系我删除。