VUE微信开放平台实现网站微信登陆
一、摘要二、微信开放平台网站授权的流程1.总体流程图2.二维码如何获取准备工作正文开始1. 打开链接跳转2.通过定义Js对象的方式3.扫码授权后做了什么三、VUE中具体实现本次主要介绍通过定义js对象的方式获取二维码本地如何调试四、参考文献一、摘要
本文主要介绍两点:
1.微信开放平台网站授权的流程(非原理)
2.VUE如何使用微信开放平台开发微信授权登陆的功能,以及本地如何进行测试
二、微信开放平台网站授权的流程
1.总体流程图
2.二维码如何获取
准备工作
首先,在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。(前端只需要AppId)
正文开始
有两种方法获取二维码,一是直接通过在PC端打开链接获取跳转页面获取;二是引入微信登陆JS文件,通过定义微信JS对象,在本页面获取,不需要跳转页面。
1. 打开链接跳转
前端打开如下链接
https://open./connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
例如:
https://open./connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect
2.通过定义Js对象的方式
在页面中先引入如下JS文件(支持https)
http://res./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./connect/zh_CN/htmledition/js/wxLogin.js'const wxElement = document.body.appendChild(s)const uri = `${window.location.origin}callback/wx/` // 这里是你的回调uriwxElement.onload = () => {const obj = new WxLogin({id: 'wx_login_container', // 需要显示的容器idappid: this.appId, // appid wx*******scope: 'snsapi_login', // 网页默认即可redirect_uri: encodeURIComponent(uri), // 授权成功后回调的urlstate: 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;} // 二维码样式转化为base64QRCodeStyle: `data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsNCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSANCg==`
二维码扫完并授权后会回调到所配置的uri上,在这个页面自行处理逻辑,看是要直接登陆,还是先跳回登录页进行绑定账号。
本地如何调试
进入微信开放平台,进入管理中心,点开自己的应用,如下图
在最下面的开发信息中的授权回调域改为localhost即可,有端口号要写上端口号
注意:在本地测试完后,将授权回调域再改为线上的地址。
四、参考文献
1.某跳动面试官:说说微信扫码登录背后的实现原理?
2.微信开放平台官方文档