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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
JavaScript实现异步图像上传功能
Jul 12 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
简单了解JavaScript作用域
Jul 31 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
初步解析Python下的多进程编程
2015/04/28 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
python实现按关键字筛选日志文件
2019/12/24 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
基于Python正确读取资源文件
2020/09/14 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
大学生村官事迹材料
2014/01/21 职场文书
校园之星获奖感言
2014/01/29 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
农业项目投资意向书
2015/05/09 职场文书
师范生教育见习总结
2015/06/23 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers