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基础整理1
Dec 06 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
python如何在循环引用中管理内存
2018/03/20 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
酒店人事专员岗位职责
2013/12/19 职场文书
教师师德反思材料
2014/02/15 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
2014年环保局工作总结
2014/12/11 职场文书
合作意向协议书
2015/01/29 职场文书
街道社区活动报告
2015/02/05 职场文书