thinkjs微信中控之微信鉴权登陆的实现代码
前言
上一篇文章大概写了一下如何搭一个微信中控服务 【】 。
接下来这篇,专门写一下如何在此基础上扩展出来一个比较好用的微信鉴权登陆的方案。
由于这一段的逻辑着实有点绕,所以就单独拿出来写了。
有时候,调用方甚至可以通过这个方案,进行多公众号openid的之间的关联。
官方说明
开发文档
微信文档地址
鉴权逻辑
- 前端跳转到以下url,重定向或者代码跳转都可以https://open.weixin.qq./connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
- 弹出是否同意授权的框,用户同意授权(如果是静默授权,就不会弹出同意框),然后页面会重定向到上面链接的redirect_uri地址(一般是开发者处理下一步鉴权逻辑的服务端API),并且会带上code参数。
- 服务端拿到code之后,调用以下api来获取网页授权的aess_token和用户的openidhttps://api.weixin.qq./sns/oauth2/aess_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
拿到openid之后,理论上鉴权的逻辑就算完成了。
开发者可以继续用openid和aess_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./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('mon').getWxConfigById(wxid); let {data} = await axios({ method: 'get', url: `https://api.weixin.qq./sns/oauth2/aess_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传过来就好,剩下的交给中控自己去来回蹦哒吧。
结尾
需要注意的是,公众号的后台需要配置好以下信息。
- JS接口安全域名就是前端的访问域名。
- 网页授权域名中控API域名。
- ip白名单中控的ip地址。
否则是没有权限鉴权的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程