实现iframe重定向通知父级页面跳转

需求: 在登录页面通过iframe嵌入钉钉提供的登录页面,用户扫码登录成功后,回到系统首页

问题: 钉钉登录页面授权登录后会携带一个code重定向到预设好的url路径,但是因为它是嵌入在iframe中的,所以重定向后的页面也是嵌入在iframe里面,这显然不是我们期望看到的。

解决思路:

  1. 钉钉授权登录成功后,重定向到一个中转页面
  2. 中转页面使用postMessage携带code通知父页面
  3. 父页面通过window.addEventListener('message')监听消息,并验证消息来源
  4. 父页面监听到消息,并验证成功后,处理code,将code发送给后台转为token
  5. 接收到后台发送回的token,登录成功,隐藏iframe并跳转首页

参考文档:
使用钉钉提供的页面登录授权
一文搞懂window.postMessage和window.parent.postMessage

实现代码:

js 复制代码
// 中转页面
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>钉钉登录中转</title>
    <script>
      // 钉钉登录回调页面
      window.addEventListener("load", () => {
        // 从URL参数中获取授权码
        const code = new URLSearchParams(window.location.search).get("code");
        if (code) {
          // 发送消息给父页面
          console.log("发送消息给父页面", code);
          window.parent.postMessage(
            {
              type: "DINGTALK_LOGIN_REDIRECT",
              code: code,
            },
            window.location.origin
          );
        }
      });
    </script>
  </head>
</html>
js 复制代码
// 父页面部分html代码
<div class="ding-talk" v-if="useDingtalkLogin">
  <el-button class="normal-login" @click="changeLoginType('general')">普通登录</el-button>
  <iframe :src="ddLoginUrl" width="100%" height="100%"></iframe>
</div>
<div v-else>
    // 普通登录页面
</div>
js 复制代码
// 父页面逻辑代码【vue2】
mounted() {
  this.initMessageListener();
},
beforeDestroy() {
  window.removeEventListener("message", this.handleMessage);
},
methods:{
  // 初始化消息监听
  initMessageListener() {
    window.addEventListener("message", this.handleMessage);
  },
  // 处理接收到的消息
  handleMessage(event) {
    console.log("event.origin", event.origin, window.location.origin);
    if (event.origin !== window.location.origin) {
      console.log("忽略来自未知来源的消息:", event.origin);
      return;
    }
    // 验证消息格式
    if (event.data && event.data.type === "DINGTALK_LOGIN_REDIRECT") {
      console.log("收到钉钉登录重定向消息:", event.data);
      this.handleDingtalkLogin(event.data.code);
    }
  },
  handleDingtalkLogin(code) {
    // 处理code的逻辑...
    this.useDingtalkLogin = false;  // 隐藏iframe
  },
}
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui