有你在真好 的个人博客
多域名微信授权方案
阅读:2276 添加日期:2021/3/27 23:24:11 原文链接:https://www.toutiao.com/item/6454810869246214670/

一、微信网页授权介绍

用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。详情请参见微信官方文档:微信开发者文档-微信网页开发

二、背景(为什么要实现多域名微信授权方案?)

在微信公众号请求用户网页授权之前,开发者需要先到微信公众平台官网中的开发者中心页配置网页授权域名。如图所示。

多域名微信授权方案

点击设置,弹窗里填写授权回调页面域名。

多域名微信授权方案

我们发现网页授权域名仅能填写一个。而我们业务方经常又有很多其他域名(比如一些临时域名,备用域名,活动域名),而这些域名都有获取用户openid等微信信息的需求却受到微信授权域名的限制,所以为了解决这样的一个问题,我们做了一个可以支持多域名获取微信openid的方案,组件:weixin_auth_jssdk.js(目前只支持获取openid)。

什么是openid?
在这里,普及下微信openid的概念,openid是一个微信用户针对一个微信公众号的唯一标识,可以理解为一种relation关系。
所以一个用户针对不同的公众号有不同的openid而非固定openid。

三、设计方案

  • 方案一:前端网页做一个跳转到微信服务器获取令牌之后,redirect到已经网页授权的域名下的一个地址,服务端获取openid,并对openid加密,把openid参数拼接到最初的网址,前端通过取url的参数获取openid。(已实现)

    缺点:openid容易暴露

    解决方案:

    1. url参数key不使用显示关键字如openid,open_id等,此处我们使用ies_wx_token;
    2. url参数值我们要在后端进行加密,前端获取之后再解密,避免在传输过程中明文展示。
      常用的加密解密算法和实现后续我们会有专栏进行介绍。
  • 方案二:前端网页做一个跳转到微信服务器获取令牌之后,redirect到网页授权的域名下的一个地址,服务端获取openid,服务端需要建立一个临时存储,得到一个令牌,并把令牌返回给前端,前端通过ajax请求openid。(未实现)

    缺点:需要ajax请求openid,有延迟。

四、实现流程(方案一)

以下描述中openid即为ieswxtoken

获取ies_wx_token的流程:

在自己业务代码头部直接引入此文件weixin_auth_jssdk.js

访问原始网页https://www.huoshan.com/**/,获取ies_wx_token。如果ies_wx_token不存在,则跳转到3;如果ies_wx_token存在,则直接跳转到5(请注意:如果是通过url参数获取到,需要对ies_wx_token解密);

多域名微信授权方案

未获取到ies_wx_token,跳转到微信服务端获取令牌,再redirect到网页授权的域名下的一个地址。(其中WX_AUTH_SCOPE参数:可以设置两个值['snsapi_userinfo', 'snsapi_base'],目前只支持snsapi_base,字段含义参见【微信开发者文档-微信网页开发】)

在服务端获取openid,对openid进行加密,再把加密后的结果拼接到最初的网址,最后再redirect到最初的原始网址。

多域名微信授权方案

前端通过url参数或者sessonStorage获取到ies_wx_token,则将ies_wx_token写入sessionStorage。

最后在自己业务代码通过sessionStorage获取到ies_wx_token。

五、总结

虽然解决了多域名微信授权的问题,但是目前只支持获取openid(跳转到微信服务端获取令牌时scope需要设置snsapi_base)。

ICP备案号:苏ICP备14035786号-1 苏公网安备 32050502001014号