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.微信开放平台官方文档