背景

微信登陆作为比较常用的第三方登陆,实际应用比较多,比如小程序，微信公众号必不可少缺少但是发现有一些初级人员还是不容易理解这当中的一个思路，故分享下当前微信登录的一个实现原理以及实战代码

原理

基本步骤：

客户端判断token是否存在,token不存在则请求后端获取微信登陆地址
服务器返回相关的微信登陆地址（这个地方其实也可以由前端自己拼接具体看自己情况）
前端将获取到的微信地址(或者自己前端写好的地址也可以)做跳转
用户进行微信公众号确认（或者扫码登陆）此时会跳转到微信的地址。
微信则会返回到之前设置的回调登录地址上做处理（该回调地址为微信请求地址上带的redirect_uri）
服务器端验证信息的真实性以后将该用户的信息生成对应的token 通过做跳转到前端指定的页面比如 login/token/123
前端通过login/token/123 获取到对应的token信息并保存在本地缓存，接下来请求接口带着这个token即可

具体流程图如下

实现

前端VUE部分

在路由里面做判断是否有token（判断是否登录操作）没有则跳转到login页面

/src/view/Login.vue

created() {try {document.title = "登陆中...";let ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {this.$axios.get("/api/weixin/get_weixin_login_url", []).then((res) => {//alert("跳转到微信授权页面", res.data.url);window.location.href = res.data.url;});} else {this.cli = true;}} catch (e) {}
}

同时也检测是否在login 下面是否有token给到前端（登录成功部分操做）

/src/router/index.js

router.beforeEach((to, from, next) => {var params = to.fullPath.split('/');var token = localStorage.getItem('token');//alert(to.fullPath);//如果token不存在就跳转登录if (!token && params[1] !== "login") {//alert('如果token不存在就跳转登录', to.fullPath);localStorage.setItem("beforeUrl", to.fullPath);next("/login");return false;}//保存用户的token信息//并跳转到之前的地址if (params[1] == "login" && params[2] == 'token') {localStorage.setItem('token', params[3]);var url = localStorage.getItem("beforeUrl");//alert(url);var urlParam = "/";if (url) {urlParam = url.split('/');}if (url == '' || url == null || urlParam[1] == "login") {url = '/';}next(url);return false;}next();
});

后端代码

获取微信登陆页面地址

$redirect_uri = urlencode("http://" .你的域名 . "/api/weixin/callback");
$url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" . $appId . "&redirect_uri=" . $redirect_uri . "&response_type=code&scope=snsapi_userinfo&state=STATE";
return json(['code' => 200, 'msg' => 'success', 'data' => ['url' => $url]]);

微信回调返回

//当前使用的为easywechat
$app = new Application(self::get_weixin_config());
$oauth = $app->oauth;
// 获取 OAuth 授权结果用户信息
$user = $oauth->user();
$info = Db::name('vote_user')->where('wx_id',$user['original']['openid'])->find();
if(empty($info)){$add = ['wx_id' => $user['original']['openid'],'avatar' => $user['avatar'],'name' => $user['name'],'nickname' => $user['nickname'],'wx_content' => json_encode($user),'createtime' => time(),'updatetime' => time(),];Db::name('vote_user')->insert($add);$info = Db::name('user')->where('wx_id',$user['original']['openid'])->find();
}
$token = sha1($info['name'].$info['wx_id'].$info['updatetime']);
header('location:'. '/#login/token/'.$token); // 跳转到 user/profile

到此整个微信登陆流程结束

vue 实现微信登陆你学会了吗相关推荐

vue获取微信登陆权限_vue 微信授权登录解决方案
背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息. 问题:没有固定的h5应用首页.授权后重定向url带参数并且很长 ...
vue获取微信登陆权限_Vue获取微信JSSDK授权,以及微信分享
场景 Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等步骤一配置安全域名: 在微信公众平台对应的公众号设置里面配上相应的JS接口 ...
vue获取微信登陆权限_vue 授权获取微信openId操作
1.获取url中参数code: 根据code 获取openId:调用后台接口获取openId . function getUrlKey(name){//获取url 参数 return decodeUR ...
AbpVnext 扩展企业微信扫码登录（钉钉登陆、短信登陆、微信登陆等）Vue框架
目录 1.开始开发准备 1.1 企业微信扫码登陆接入流程 1.2 开启网页授权登陆 1.3 构造独立窗口登陆二维码 1.4 构造内嵌登陆二维码 @@登陆顺序: 1. 发现文档配置 2. 获取token ...
Java实现扫码微信登陆(获取登陆成功的用户信息 + 包含使用vue怎么显示登陆二维码)
实现于springboot中依据b站视频写出的: 点击此处进行观看然后记录于此处. 首先微信登陆的流程为: (可以去微信开发者平台看) 第一步:请求CODE 若提示"该链接无法访问&qu ...
vue php企业站案例,vue 开发企业微信整合案例分析
本文实例讲述了vue 开发企业微信整合.分享给大家供大家参考,具体如下: 概述手机端程序可以和企业微信进行整合,我们也可以使用企业微信JSSDK功能,实现一些原生的功能. 整合步骤在整合之前需要阅 ...
微信有电脑客户端吗_一台电脑如何开多个微信？你学会了吗？
越来越注重隐私的我们,通常个人微信和工作微信是分开的. 那么,电脑上如何同时开两个微信号呢? 今天雷哥分享2种方法哈方法一:bat法 step1:新建一个txt文档 step2:找到微信的路径 st ...
vue实现微信网页授权登录
附:微信官方文档前言:在用vue做微信公众号网页项目的授权登录中踩过不少坑,在这里记录一下.首先在选择由后端做登陆还是前端传token登录的方式上产生了分歧.两种方式在不同的公司里都用过,后端做登陆 ...
微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...

vue 实现微信登陆你学会了吗

背景

原理

具体流程图如下

实现

前端VUE部分

在路由里面做判断是否有token（判断是否登录操作）没有则跳转到login页面

/src/view/Login.vue

同时也检测是否在login 下面是否有token给到前端（登录成功部分操做）

/src/router/index.js

后端代码

获取微信登陆页面地址

微信回调返回

vue 实现微信登陆你学会了吗相关推荐

最新文章

热门文章

vue 实现微信登陆 你学会了吗

背景

原理

具体流程图如下

实现

前端VUE部分

在路由里面做判断是否有token（判断是否登录操作） 没有则跳转到login页面

/src/view/Login.vue

同时也检测是否在login 下面是否有token给到前端（登录成功部分操做）

/src/router/index.js

后端代码

获取微信登陆页面地址

微信回调返回

vue 实现微信登陆 你学会了吗相关推荐

最新文章

热门文章

vue 实现微信登陆你学会了吗

在路由里面做判断是否有token（判断是否登录操作）没有则跳转到login页面

vue 实现微信登陆你学会了吗相关推荐