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.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

例如：
https://open.weixin.qq.com/connect/qrconnect?appid=wxbdc5610cc59c1631&redirect_uri=https%3A%2F%2Fpassport.yhd.com%2Fwechat%2Fcallback.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#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/` // 这里是你的回调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.微信开放平台官方文档

VUE微信开放平台实现网站微信登陆相关推荐

微信开放平台开发第三方授权登陆（三）：Android客户端
微信开放平台开发系列文章: 微信开放平台开发第三方授权登陆(一):开发前期准备微信开放平台开发第三方授权登陆(二):PC网页端微信开放平台开发第三方授权登陆(三):Android客户端微信开放平 ...
微信开放平台开发第三方授权登陆（二）：PC网页端
微信开放平台开发系列文章: 微信开放平台开发第三方授权登陆(一):开发前期准备微信开放平台开发第三方授权登陆(二):PC网页端微信开放平台开发第三方授权登陆(三):Android客户端微信开放平 ...
微信开放平台开发第三方授权登陆：微信扫码登录
一.概述根据需求,需要拥有第三方微信登录功能,并获取到用户信息. 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 二.前期准备工作 1.注册邮箱账号. 2.根 ...
微信开放平台开发第三方授权登陆
本文转载自网络,原文链接https://blog.csdn.net/qq_34190023/article/details/81133619 目录一.前期准备流程二.具体实现步骤 1.注册邮箱账号 ...
微信开放平台网站应用第三方微信登录回调地址导致的错误如何解决
微信开放平台:https://open.weixin.qq.com 使用单独为公司注册的QQ,并使用对应的QQ邮箱注册微信开放平台,并激活. 然后提交企业信息审核,审核通过后,就可以创建网站应用 ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
php微信开放平台获取openid,微信公众平台获取openid
微信公众平台可以通过接口获取用户的openid,但是获取用户信息的时候需要做一次跳转. 我在后台有一张用户表,用户如果关注了公众平台就将他的信息录入到数据库,包括openid.现在要做一个简单的系统, ...
java 微信报关_微信开放平台,_请求微信报关接口返回的数据，微信开放平台 - phpStudy...
请求微信报关接口返回的数据请求微信报关接口错误 552E051CB6F4DBC6029B8218DBD5A52A gh_4dbf09a0a18e 1342661701 20160825113538 ...
微信开发 - 第三方网站接入微信登录、微信支付时，本地 redirect_uri 参数错误导致无法调试的解决方案（微信开放平台）完美解决每次都需要部署到线上测试，在本地使用本地 ip 就能轻松调试
问题描述网上的教程都非常乱且无效,本文将站在新手的角度,超级详细的讲解. 本文提供在微信开放平台,接入微信登录和微信支付时,本文无法调试 redirect_uri 回调错误的解决方案, 仅需几个 ...
微信开放平台开发微信登录
在这篇微信公众平台开发教程中,我们将介绍如何使用微信开放平台接口实现微信扫码登录的功能. 准备工作网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信O ...

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

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

一、摘要

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

1.总体流程图

2.二维码如何获取

准备工作

正文开始

1. 打开链接跳转

2.通过定义Js对象的方式

3.扫码授权后做了什么

三、VUE中具体实现

本次主要介绍通过定义js对象的方式获取二维码

本地如何调试

四、参考文献

VUE微信开放平台实现网站微信登陆相关推荐

最新文章

热门文章