VUE微信开放平台实现网站微信登陆
一、摘要
本文主要介绍两点:
1.微信开放平台网站授权的流程(非原理)
2.VUE如何使用微信开放平台开发微信授权登陆的功能,以及本地如何进行测试
二、微信开放平台网站授权的流程
1.总体流程图
2.二维码如何获取
准备工作
首先,在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。(前端只需要AppId)
正文开始
有两种方法获取二维码,一是直接通过在PC端打开链接获取跳转页面获取;二是引入微信登陆JS文件,通过定义微信JS对象,在本页面获取,不需要跳转页面。
1. 打开链接跳转
前端打开如下链接
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
2.通过定义Js对象的方式
在页面中先引入如下JS文件(支持https)
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
在需要使用微信登录的地方实例以下JS对象:
var obj = new WxLogin({
self_redirect:true,
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
3.扫码授权后做了什么
用户允许授权后,前端将会重定向到redirect_uri的网址上,并且带上code和state参数
redirect_uri?code=CODE&state=STATE
前端调后端接口将code传给后端,后端进行以下处理
- 网站后台接收到code,表明微信开发平台同意数据请求
- 网站后台根据code参数,再加上AppID和AppSecret请求微信开发平台换取 access_token
- 微信开发平台验证参数,并返回 access_token
- 网站后台收到 access_token 后即可进行参数分析获得用户账号数据
后端处理完后返回将前端所需要的数据,前端看是要直接登陆,还是先跳回登录页进行绑定账号。
三、VUE中具体实现
本次主要介绍通过定义js对象的方式获取二维码
// 设置微信二维码函数
setWxerwma () {
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)
const uri = `${window.location.origin}callback/wx/` // 这里是你的回调uri
wxElement.onload = () => {
const obj = new WxLogin({
id: 'wx_login_container', // 需要显示的容器id
appid: this.appId, // appid wx*******
scope: 'snsapi_login', // 网页默认即可
redirect_uri: encodeURIComponent(uri), // 授权成功后回调的url
state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
style: 'black', // 提供"black"、"white"可选。二维码的样式
href: this.QRCodeStyle // 外部css文件url,需要https
})
if (!obj) {
console.error('wx-error')
}
}
外部css文件url,需要https,我们没有,可以将样式转化为base64写入
@charset "UTF-8";
.impowerBox .title {display: none;}
.impowerBox .info {display: none;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}
// 二维码样式转化为base64
QRCodeStyle: `data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsNCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSANCg==`
二维码扫完并授权后会回调到所配置的uri上,在这个页面自行处理逻辑,看是要直接登陆,还是先跳回登录页进行绑定账号。
本地如何调试
进入微信开放平台,进入管理中心,点开自己的应用,如下图
在最下面的开发信息中的授权回调域改为localhost即可,有端口号要写上端口号
注意:在本地测试完后,将授权回调域再改为线上的地址。