thinkjs微信中控之微信鉴权登陆的实现代码


Posted in Javascript onAugust 08, 2019

前言

上一篇文章大概写了一下如何搭一个微信中控服务: 【thinkjs搭建微信中控服务】 。

接下来这篇,专门写一下如何在此基础上扩展出来一个比较好用的微信鉴权登陆的方案。

由于这一段的逻辑着实有点绕,所以就单独拿出来写了。

有时候,调用方甚至可以通过这个方案,进行多公众号openid的之间的关联。

官方说明

开发文档

微信文档地址:传送门

鉴权逻辑

  • 前端跳转到以下url,重定向或者代码跳转都可以:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
  • 弹出是否同意授权的框,用户同意授权(如果是静默授权,就不会弹出同意框),然后页面会重定向到上面链接的redirect_uri地址(一般是开发者处理下一步鉴权逻辑的服务端API),并且会带上code参数。
  • 服务端拿到code之后,调用以下api来获取网页授权的access_token和用户的openid:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

拿到openid之后,理论上鉴权的逻辑就算完成了。

开发者可以继续用openid和access_token去获取用户信息;或者进行一些其他的业务流程。

具体的参数说明看微信的官方文档就可以了。

中控逻辑

第一步:页面跳转至中控API

业务调用方会有自己的登陆逻辑,只需要获取到当前调用接口的用户的openid,然后再进行接下来的业务逻辑即可。

前端调用业务接口的时候,如果服务端发现当前访问用户没有登陆状态,就会告诉前端需要鉴权,并且把需要跳转的中控API链接响应给前端。

然后前端就开始往中控的API链接跳转。

第二步:中控重定向到微信API

相关代码

// 接口 - 鉴权获取code
async go_authAction() {
  let that = this;
  let {back, serve = ''} = that.get();
  if (think.isEmpty(back)) {
    return that.json({code: 1, msg: '参数不正确'})
  }
  let newBack = encodeURIComponent(back);
  let redirectUri = `${baseHost}/api/open/wx/login_wechat?${encodeURIComponent(`back=${newBack}&wxid=${that.wxConfig.id}&serve=${serve}`)}`;
  let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${that.wxConfig.appid}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
  that.redirect(url);
}

作用:

鉴权获取code

地址:

baseHost + /open/wx/go_auth

参数:

参数名 必选 说明
wxid 对应配置公众号的id,告诉中控用哪个公众号鉴权
back 跳转到鉴权链接之前的页面完整url,便于鉴权完毕后重定向回之前页面
serve 调用方api回调地址,在鉴权逻辑完成后,会携带openid重定向回这个地址

描述:

我这里默认都是静默授权。

在这里可以看到代码里面,中控把调用方传过来的 wxid , back 和 serve 三个参数拼接到了微信API的回调链接 redirect_uri 里面。

第三步:微信回调中控API

相关代码

async login_wechatAction() {
  let that = this;
  let {code, back, serve = ''} = that.get();
  if (think.isEmpty(code) || think.isEmpty(back)) {
    return that.json({code: 1, msg: '参数不正确'})
  }
  let newBack = encodeURIComponent(back);
  let apiWxController = that.controller('private/wx');
  let openid = await that._getOpenIdByAuthCode(that.wxConfig.id, code);
  let backUrl = `${serve}?wxid=${that.wxConfig.id}&openid=${openid}&redirect=${newBack}`;
  that.redirect(backUrl);
}

_getOpenIdByAuthCode(wxid, code){
  let that = this;
  let {appid, secret} = await that.controller('common').getWxConfigById(wxid);
  let {data} = await axios({
    method: 'get',
    url: `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=$[code]&grant_type=authorization_code`
  })
  return data.openid
}

作用:

通过微信回调传回来的code,获取openid

地址:

baseHost + /open/wx/login_wechat

参数:

参数名 必选 说明
wxid 对应配置公众号的id,告诉中控用哪个公众号鉴权
code 微信回传的code
back 跳转到鉴权链接之前的页面完整url,便于鉴权完毕后重定向回之前页面(上一步拼接的)
serve 调用方api回调地址,在鉴权逻辑完成后,会携带openid重定向回这个地址(上一步拼接的)

描述:

这里中控拿到code之后,去获取openid。 获取完之后,重定向回 serve (业务系统)地址,并把获取到的 openid 和 back 作为参数传回去

第四步:业务系统自行处理

接下来业务系统就能通过开放的回调地址(上面的 serve ),来拿到以下信息:

  • openid (微信ID),
  • redirect (上面的 back ,最初用户在前端调用接口的页面地址)

这时候就能用这个openid去处理自己的登陆逻辑,比如获取用户信息,缓存session保存登陆状态之类的。

然后再重定向回 back 地址,也就是用户在鉴权之前访问的页面。

鉴权结束

简单说就是以下逻辑

  • 前端 调用 业务接口 发现没有登陆状态,告诉前端往中控跳!
  • 前端 跳转至 中控API 拼接接下来要回调的参数
  • 中控 重定向至 微信API 获取code
  • 微信 重定向至 中控API 获取openid
  • 中控 重定向回 业务回调API 拿到openid,保存用户登陆状态
  • 业务 重定向回 前端
  • 前端 调用 业务接口 发现有登陆状态了,完事儿

虽然历经的跳转和重定向看起来很多,但是实际用起来,其实是很快的,用户基本上没有什么感知。

而且对于业务调用方来说,只需要提供一个回调地址即可,然后在回调里面等着openid传过来就好,剩下的交给中控自己去来回蹦哒吧。

结尾

需要注意的是,公众号的后台需要配置好以下信息。

  1. JS接口安全域名:就是前端的访问域名。
  2. 网页授权域名:中控API域名。
  3. ip白名单:中控的ip地址。

否则是没有权限鉴权的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
vue-cli常用设置总结
Feb 24 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 #Javascript
javascript实现blob加密视频源地址的方法
Aug 08 #Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 #Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 #Javascript
js如何实现元素曝光上报
Aug 07 #Javascript
详解Element-UI中上传的文件前端处理
Aug 07 #Javascript
element-ui中Table表格省市区合并单元格的方法实现
Aug 07 #Javascript
You might like
php 函数中使用static的说明
2012/06/01 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python中bisect模块用法实例
2014/09/25 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
自我推荐书
2013/12/04 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
整改报告怎么写
2014/11/06 职场文书
秋收起义观后感
2015/06/11 职场文书
教师节感想
2015/08/11 职场文书