记录：实现钉钉（企业内部应用）登录第三方网站

最新推荐文章于 2024-06-04 15:42:34 发布

landeying

最新推荐文章于 2024-06-04 15:42:34 发布

阅读量1.5k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837473/article/details/123900952

版权

由于后台无法配合前端配置路由为history模式，故vue路由采用hash模式。但是钉钉扫码成功后会导致重定向地址格式错误：

错误格式：https://xxx.com/?authCode=xxxx#/xxxx
期望格式：https://xxx.com/#/xxxx?authCode=xxxx

解决方法

index.html同级目录新建redirect.html。扫码成功后先重定向到redirect.html，在redirect.html中重新拼接跳转地址，获取authCode。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>跳转中...</title>
</head>
<body>
  <script>
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }
    const code = getQueryVariable('authCode')
    if (code) {
      window.location.href = window.location.protocol + '//' + window.location.host + '/#/login?authCode=' + code
    } 
  </script>
</body>

</html>

// 钉钉扫码登录
    dLogin() {
      const redirectUrl = encodeURIComponent(window.location.protocol + '//' + window.location.host + '/redirect.html')
      window.location.href = `https://login.dingtalk.com/oauth2/challenge.htm?redirect_uri=${redirectUrl}&response_type=code&client_id=dingbbbbbbb&scope=openid&prompt=consent&FEForceLogin=true`
    },