【企微】转发页面OAuth2.0登录的重定向问题

开发背景

这应该是《【企业微信】VUE项目在企微中自定义转发内容》之前实现的功能了。

场景

项目属于企微的第三方应用，为了方便用户之间的数据的共享，项目页面可以在企业用户之间互相转发，功能看起来没有多难，只是将页面链接转发出去而已，但是数据的权限问题，需要用户登录自己的账号才能访问。

原因

部署在企微中的项目，没有登录页面，登录依赖的是企微展示第三方应用入口处，点击进入时生成的code，进行自动验证登录。

导致转发出去的地址，在用户聊天页面点击进入时，并没有在链接上集成 code 参数，导致页面接口调用失败，页面加载根本不能正常运行。

目的

这就需要我们前端通过再次构造网页授权链接，来重新获取基于当前用户的code，来验证登录。（为什么当时没有放在后端，我也不知道！！！领导决定的吧！！！）

开发过程

企微开发手册官网

https://developer.work.weixin.qq.com/

**备注：**接下来大部分内容来自----企业微信|开发者中心–文档内容，感兴趣可以自取https://developer.work.weixin.qq.com/document/path/91120。

OAuth2.0 调用流程

调用流程为：

1. 用户访问第三方服务，第三方服务通过构造OAuth2链接（参数包括当前第三方服务的身份ID，以及重定向URI），将用户引导到认证服务器的授权页
2. 用户选择是否同意授权
3. 若用户同意授权，则认证服务器将用户重定向到第一步指定的重定向URI，同时附上一个授权码。
4. 第三方服务收到授权码，带上授权码来源的重定向URI，向认证服务器申请凭证。
5. 认证服务器检查授权码和重定向URI的有效性，通过后颁发AccessToken（调用凭证）

OAuth2.0 接入流程图

• 其实我们的主要任务就是1号框中所进行的流程---->构造网页授权链接。
• 2号框中流程，一般是我们将获取到链接中的code时，再次调用接口去查询数据。

注意事项

1.REDIRECT_URL中的域名，需要先配置至应用的“可信域名”，否则跳转时会提示“redirect_uri参数错误”。要求配置的可信域名，必须与访问链接的域名完全一致。

授权分类

• 静默授权与手动授权
  1. 静默授权：用户点击链接后，页面直接302跳转至 redirect_uri?code=CODE&state=STATE
  2. 手动授权：用户点击链接后，会弹出一个中间页，让用户选择是否授权，用户确认授权后再302跳转至 redirect_uri?code=CODE&state=STATE

构造企业oauth2链接（静默授权）

• 第三方应用需要在打开的网页里面携带用户的身份信息，第一步需要构造如下的链接来获取code

链接以及链接规则

• 因为某些企业的企业微信属于企业私有版，访问的域名，需要根据自己企业环境自己获取区分。

//全量地址 
https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agentid=AGENTID&state=STATE#wechat_redirect

//拆分展示
https://open.weixin.qq.com/connect/oauth2/authorize
?appid=CORPID
&redirect_uri=REDIRECT_URI
&response_type=code
&scope=SCOPE
&agentid=AGENTID
&state=STATE
#wechat_redirect

• 参数说明：

• 点击后，页面将跳转至 redirect_uri?code=CODE&state=STATE，企业可根据code参数获得员工的userid。code长度最大为512字节。
• -第三方服务商配置scope为snsapi_privateinfo时，agentid所对应的应用必须有“成员敏感信息授权”的权限。“成员敏感信息授权”的开启方法为：登录服务商管理后台->标准应用服务->本地应用->进入应用->点击基本信息栏“编辑”按钮->勾选"成员敏感信息"

获取code，获取当前用户信息

• 对于我们的需求来说，只要能获取到未被消费 的code ，就可以重新调用我们的项目的token接口，获取到对应的token，后续的页面以及接口，也就可以调用以及展示了。

开发中遇到的问题

在进行开发的过程中，遇到了两个问题，我觉得也算是比较好玩，比较深刻的问题了，尽管这些问题并不是多么难得问题，可往往由于自己经验的缺乏，以及开发时的眼高手低，导致这两个问题，当时一度让我们十分棘手。

两个问题都是在同一时刻，生成Oauth2.0链接后，企微生成code，重定向回到前端页面时，如下：

获取code问题。

• 问题情况

  由于第一次开发时，没有做自定义页面转发的操作，所以分享出去的链接，默认获取的当前页面地址，这就具备多种情况：

  1. 首次入口进入，链接中会存在code，且code位置在hash路由之前，即前端路由之前

  //例如
  https://www.ssss.com/?code=xxxx#/test?params=jjjj
  

  如上，上述地址再进行构造企业oauth2链接获取code操作时，返回的code会有两个。一旧一新，难以区分。（我们一开始老获取错！！！）且如果一直重复转发上一次转发的链接，code数量递增。

  2. 页面跳转后，路径上则不会携带code
  3. 转上一条转发的内容时，code不做处理，数量也会递增。且code 位置如下

  //例如
  https://www.ssss.com/#/test?code=xxxx&params=jjjj
  

• 解决方式

  • 转发时处理，自定义转发路径；
  • 路由拦截，在页面进入后，跳转页面前将code截取掉。

前端页面出现白屏问题。

• 原因
  1. hash路由模式下，路由参数发生变化，但是页面并不会刷新，由授权链接重定向回到当前页面，因为hash 的问题，所以页面不会重新挂载，所以挂载的生命周期不会重新执行。
• 解决方式
  • 通过app.vue组件中的watch 去监听$route的变化，来判断当前是否需要重新执行登录操作
  • 通过路由守卫，进行第三方进入监听，特殊处理code问题，同时刷新页面。

总结

在日常工作开发中，我们没有使用过的东西，有些虽然不是很难，按照文档按部就班实现，有时一时的疏忽，可能会耽误大事，我当时为此也算付出了很多时间，但当时都是在纠结code是否正常获取到了，忽略了上述情况。

当时在网上找了许久都没有发现什么有价值的文章来说明这种情况。