thinkjs微信中控之微信鉴权登陆的实现代码
前言
上一篇文章大概写了一下如何搭一个微信中控服务： 【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
asyncgo_authAction(){
letthat=this;
let{back,serve=''}=that.get();
if(think.isEmpty(back)){
returnthat.json({code:1,msg:'参数不正确'})
}
letnewBack=encodeURIComponent(back);
letredirectUri=`${baseHost}/api/open/wx/login_wechat?${encodeURIComponent(`back=${newBack}&wxid=${that.wxConfig.id}&serve=${serve}`)}`;
leturl=`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
相关代码
asynclogin_wechatAction(){
letthat=this;
let{code,back,serve=''}=that.get();
if(think.isEmpty(code)||think.isEmpty(back)){
returnthat.json({code:1,msg:'参数不正确'})
}
letnewBack=encodeURIComponent(back);
letapiWxController=that.controller('private/wx');
letopenid=awaitthat._getOpenIdByAuthCode(that.wxConfig.id,code);
letbackUrl=`${serve}?wxid=${that.wxConfig.id}&openid=${openid}&redirect=${newBack}`;
that.redirect(backUrl);
}
_getOpenIdByAuthCode(wxid,code){
letthat=this;
let{appid,secret}=awaitthat.controller('common').getWxConfigById(wxid);
let{data}=awaitaxios({
method:'get',
url:`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=${secret}&code=$[code]&grant_type=authorization_code`
})
returndata.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地址。
否则是没有权限鉴权的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。