前端单点登录(iframe方式)

1.首先在主页面1创建一个不可见的iframe:

 var token = '我是token999999';

 
  var iframe = document.createElement("iframe");
  iframe.src = "http://需要嵌入的页面地址";
  document.body.append(iframe);

  // 使用postMessage()方法将token传递给iframe
  setTimeout(function () {
    iframe.contentWindow!.postMessage(token, "http://需要嵌入的页面地址");
    console.log(11111);
  });

  setTimeout(function () {
    iframe.remove();
  });

2.页面2监听发送过来的信息

 window.addEventListener("message", function (event) {
          localStorage.setItem("tokendd", event.data);

      }, false);

最后就能看见浏览器localstoryage存入的token信息了

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iframe 单点登录(Single Sign-On, SSO)是一种可用于在不同的网站或应用程序之间实现用户身份验证的机制。通常情况下,当用户登录到一个网站后,他们不需要再次输入用户名和密码就可以访问其他受信任的网站。 要在 iframe 中实现单点登录,可以参考以下步骤: 1. 配置认证服务器:首先,你需要设置一个认证服务器,它将负责验证用户的身份并生成令牌。这个认证服务器可以是一个独立的身份提供者(Identity Provider, IdP),也可以是一个支持 SSO 的第三方服务提供商。 2. 嵌入 iframe:在你的网站或应用程序中,使用 HTML 的 iframe 元素来嵌入其他受信任网站的登录页面。确保在 iframe 的 src 属性中指定正确的登录 URL。 3. 接收令牌:当用户在嵌入的 iframe 中成功登录后,认证服务器会返回一个令牌(通常是 JSON Web Token, JWT)。你可以使用 JavaScript 代码从 iframe 中获取该令牌。 4. 验证令牌:在你的网站或应用程序中,使用服务器端代码来验证接收到的令牌。这通常涉及到使用认证服务器提供的公钥来解密和验证令牌的签名。 5. 用户会话管理:一旦令牌被验证为有效,你可以使用令牌中的用户信息来创建用户会话或者进行其他操作。在后续的用户请求中,你可以使用会话信息来验证用户身份。 需要注意的是,iframe 单点登录可能存在一些安全风险,如点击劫持(clickjacking)和跨站脚本攻击(XSS)。为了保护用户的安全,你应该采取适当的安全措施,比如使用 X-Frame-Options 头来限制 iframe 的使用范围,并对用户输入进行适当的验证和过滤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值