vue 微信登录

---

前言

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

网站应用微信登录开发指南

一、第一步用户授权获取code

1、PC扫码

方式一

let APPID = "这个是申请的APPID";
let REDIRECT_URI = encodeURIComponent("这个是在微信开发工具网页端的地方填写的地址 - 授权回调域 中 后面可添加");
this.codeUrl= `https://open.weixin.qq.com/connect/qrconnect?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect`;
1
2
3

 <iframe  src="this.urltest"
          frameborder="0"
          width="100%"
          height="400px"
          scrolling="auto"
        >iframe>
1
2
3
4
5
6

方式二：

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

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
1

页面中使用

  // 第二种方法获取微信二维码
let APPID = "这个是申请的APPID";
let REDIRECT_URI = encodeURIComponent("这个是在微信开发工具网页端的地方填写的地址 - 授权回调域 中 后面可添加");
    this.urltest = `https://open.weixin.qq.com/connect/qrconnect?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect`;
 var obj = new WxLogin({
            self_redirect: false,
            id: "login_container",
            appid: APPID ,
            scope: "snsapi_login",
            redirect_uri: REDIRECT_URI ,
            state: "A123DC35165464",
            style: "black",
            href:
              "data:text/css;base64,LmltcG93ZXJCb3ggLm5vcm1hbFBhbmVse21hcmdpbi10b3A6IDE1cHg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMwcHg7Ym9yZGVyLWNvbG9yOiNDNUUxRkY7fQouaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fQ==",
          });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

踩坑记录

• 1. 回调地址必须和回调域中填写的一直，不支持二级域名。
• 2. 项目运行域名要在公众号同一域下(不确定)

2、移动端微信内置浏览器授权获取code

微信网页开发网页授权：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

// 是微信端浏览器——公众号
        let APPID = "开发者工具公众号平台注册的地方";
        let REDIRECT_URI = encodeURIComponent(“重定向地址”);
        let URL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_login&state=STATE&connect_redirect=1#wechat_redirect`;
        window.location.href = URL;
1
2
3
4
5

关于网页授权的scope的区别说明

1. 以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）
2. 以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。
3. 如果为网页应用则填写snsapi_login
4. 用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。

二、第二步 通过code获取access_token

在上边pc扫码或者微信内置浏览器中授权登录后，会重定向到我们指定的地址。
例：域名/login/wechat/callback?code=071w80Ga1DIkmE0tdhHa1hA3QU0w80Gn&state=test
可以看到回调地址会有code和state两个参数

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

正确的返回：

{ 
	"access_token":"ACCESS_TOKEN", 
	"expires_in":7200, 
	"refresh_token":"REFRESH_TOKEN",
	"openid":"OPENID", 
	"scope":"SCOPE",
	"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}
1
2
3
4
5
6
7
8

错误返回样例：

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

返回openId和unionId这个时候就可以跟自己的业务进行关联了

三、获取用户个人信息

http请求方式: GET
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID
1
2

返回说明

四、微信扫码登陆在chrome浏览器失败,浏览器禁止重定向

浏览器会提示：(新版本的浏览器会提示)
Unsafe JavaScript attempt to initiate navigation for frame with URL ‘http://www.xxx.xxx/’ from frame with URL “https://open.weixin.com/xxxxxxx” The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor is it processing a user gesture
大概意思是：浏览器监测到了iframe中存在不安全的链接正在尝试进行导航，

1. 再来看微信扫码登陆的js文件：wxLogin.js
2. 该文件中对与iframe处理上述安全问题的属性sendbox是没有添加的
3. iframe默认情况下：

在html5页面中，可以使用iframe的sandbox属性，sandbox后面如果不加任何值，就代表采用默认的安全策略，

即：iframe的页面将会被当做一个独自的源，同时不能提交表单，以及执行javascript脚本，也不能让包含iframe的父页面导航到其他地方，所有的插件，如flash,applet等也全部不能起作用。

简单说iframe就只剩下一个展示的功能，正如他的名字一样，所有的内容都被放入了一个单独的沙盒。

sendbox包含的属性及作用：

allow-forms 允许进行提交表单
allow-scripts 运行执行脚本
allow-same-origin 允许同域请求,比如ajax,storage
allow-top-navigation 允许iframe能够主导window.top进行页面跳转
allow-popups 允许iframe中弹出新窗口,比如,window.open,target=”_blank”
allow-pointer-lock 在iframe中可以锁定鼠标，主要和鼠标锁定有关

修改wxLogin.js如下：
d.sandbox = “allow-scripts allow-top-navigation allow-same-origin”,

!function (a, b, c) {
     function d(a) { 
         var c = "default"; 
         a.self_redirect === !0 ? c = "true" : a.self_redirect === !1 && (c = "false");
         var d = b.createElement("iframe"),
          e = "https://open.weixin.qq.com/connect/qrconnect?appid=" + a.appid + "&scope=" + a.scope + "&redirect_uri=" + a.redirect_uri + "&state=" + a.state + "&login_type=jssdk&self_redirect=" + c + '&styletype=' + (a.styletype || '') + '&sizetype=' + (a.sizetype || '') + '&bgcolor=' + (a.bgcolor || '') + '&rst=' + (a.rst || '');
          e += a.style ? "&style=" + a.style : "",
          e += a.href ? "&href=" + a.href : "",
          d.src = e, 
          d.frameBorder = "0", 
          d.allowTransparency = "true", 
          d.sandbox = "allow-scripts allow-top-navigation allow-same-origin", 
          d.scrolling = "no", 
          d.width = "300px", 
          d.height = "400px"; 
         var f = b.getElementById(a.id);
         f.innerHTML = "", 
         f.appendChild(d) 
    }
    a.WxLogin = d 
}(window, document);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21