VUE微信开放平台实现网站微信登陆

2,490 阅读3分钟

一、摘要

本文主要介绍两点: 1.微信开放平台网站授权的流程(非原理) 2.VUE如何使用微信开放平台开发微信授权登陆的功能,以及本地如何进行测试

二、微信开放平台网站授权的流程

1.总体流程图

总体流程图

2.二维码如何获取

准备工作

首先,在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程。(前端只需要AppId)

正文开始

有两种方法获取二维码,一是直接通过在PC端打开链接获取跳转页面获取;二是引入微信登陆JS文件,通过定义微信JS对象,在本页面获取,不需要跳转页面。

1. 打开链接跳转

前端打开如下链接 open.weixin.qq.com/connect/qrc…

例如: open.weixin.qq.com/connect/qrc… 在这里插入图片描述

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传给后端,后端进行以下处理

  1. 网站后台接收到code,表明微信开发平台同意数据请求
  2. 网站后台根据code参数,再加上AppID和AppSecret请求微信开发平台换取 access_token
  3. 微信开发平台验证参数,并返回 access_token
  4. 网站后台收到 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==即可,有端口号要写上端口号 在这里插入图片描述

注意:在本地测试完后,将授权回调域再改为线上的地址。

四、参考文献

1.某跳动面试官:说说微信扫码登录背后的实现原理? 2.微信开放平台官方文档