iframe嵌入页面实现免登录思路（以vue为例）

一、概述

在一些应用场景中，可能需要将某个页面通过 iframe嵌入到另一个应用中，并实现免登录功能。本文以Vue.js为例，详细介绍如何通过 iframe实现免登录功能的思路和步骤。

二、技术思路

1. 统一认证：通过单点登录（SSO）实现用户在多个系统间的免登录。
2. Token传递：在主应用中生成访问Token，通过 iframe传递给子应用，子应用验证Token后实现免登录。
3. 消息传递：利用 window.postMessage进行跨域消息传递，实现认证信息的安全传输。

三、实现步骤

1. 主应用生成Token并传递

主应用在用户登录后生成一个Token，并通过 iframe的URL参数或 postMessage方法将Token传递给子应用。

// 主应用中的方法
function generateToken() {
  // 假设我们生成了一个Token
  const token = 'generatedToken12345';
  return token;
}

function embedIframe() {
  const token = generateToken();
  const iframe = document.createElement('iframe');
  iframe.src = `https://subapp.example.com?token=${token}`;
  document.body.appendChild(iframe);
}

embedIframe();
​

 

 

2. 子应用接收Token并验证

子应用在接收到Token后，通过API或其他方式验证Token，并根据验证结果实现免登录功能。

// 子应用中的方法
function getQueryParameter(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

function verifyToken(token) {
  // 这里应该通过API请求后端进行Token验证
  // 假设验证成功，返回用户信息
  return fetch(`https://api.example.com/verify-token?token=${token}`)
    .then(response => response.json())
    .then(data => {
      if (data.valid) {
        // Token验证成功，执行登录操作
        loginUser(data.user);
      } else {
        // Token验证失败，处理错误
        console.error('Token verification failed');
      }
    });
}

function loginUser(user) {
  // 执行用户登录操作，如设置用户信息，跳转到主页等
  console.log(`User ${user.name} logged in`);
}

const token = getQueryParameter('token');
if (token) {
  verifyToken(token);
}
​

 

 

3. 使用 postMessage进行安全传递

为了提高安全性，可以使用 postMessage进行跨域消息传递，避免通过URL传递敏感信息。

主应用：

// 主应用中的方法
function generateToken() {
  const token = 'generatedToken12345';
  return token;
}

function sendMessageToIframe() {
  const token = generateToken();
  const iframe = document.getElementById('myIframe');
  iframe.contentWindow.postMessage({ token: token }, 'https://subapp.example.com');
}

window.onload = function() {
  const iframe = document.createElement('iframe');
  iframe.src = 'https://subapp.example.com';
  iframe.id = 'myIframe';
  document.body.appendChild(iframe);

  iframe.onload = function() {
    sendMessageToIframe();
  };
}
​

 

 

子应用：

// 子应用中的方法
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://mainapp.example.com') {
    return; // 忽略非可信来源的消息
  }

  const { token } = event.data;
  if (token) {
    verifyToken(token);
  }
});

function verifyToken(token) {
  return fetch(`https://api.example.com/verify-token?token=${token}`)
    .then(response => response.json())
    .then(data => {
      if (data.valid) {
        loginUser(data.user);
      } else {
        console.error('Token verification failed');
      }
    });
}

function loginUser(user) {
  console.log(`User ${user.name} logged in`);
}
​

 

 

四、注意事项

1. 安全性：通过 postMessage传递Token时，需要验证消息来源，防止跨站脚本攻击（XSS）。
2. Token有效性：Token应具有时效性，避免长期有效的Token带来的安全风险。
3. HTTPS：确保在HTTPS协议下进行Token传递，避免中间人攻击。