前端内嵌iframe网页单点登录的三种方式

在现代Web应用中，单点登录（Single Sign-On，SSO）是一种重要的身份验证机制，可以让用户在多个应用程序之间无缝切换，而无需在每个应用程序中重复登录。尤其是在使用iframe嵌套网页的情况下，实现单点登录变得尤为重要。本文将介绍前端内嵌iframe网页的单点登录实现的三种方式，并提供相应的代码示例。

1. Cookie共享

Cookie是最常用的单点登录方式之一。通过设置共享的Cookie，你可以让多个子域共享同一个认证信息。

// 登录成功后，在主域下设置Cookie
document.cookie = "authToken=yourAuthToken; domain=.example.com; path=/";

在子iframe中，你可以通过读取这个Cookie来判断用户是否已登录：

// 在iframe网页中，获取主域的Cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

const authToken = getCookie('authToken');
if (authToken) {
    // 用户已登录，继续加载内容
} else {
    // 跳转到登录页
}

优点：简单易懂，适用于同一主域下的多个子域的场景。

缺点：跨域情况下，Cookie无法共享，且需要浏览器支持。

2. OAuth 2.0

OAuth 2.0是另一种流行的单点登录方式，尤其适用于第三方身份验证（如使用Google、Facebook等）。在这种方式下，用户在主应用中进行登录，获取到的token可以在iframe中使用，进行身份验证。

// 主应用登录成功后，获取OAuth Token
const token = 'yourOAuthToken';

// 将token存储在localStorage中
localStorage.setItem('oauthToken', token);

在子iframe中，可以通过读取localStorage来获取token：

// 在iframe网页中获取token
const token = localStorage.getItem('oauthToken');
if (token) {
    // 用户已登录，验证token并请求数据
} else {
    // 跳转到登录页
}

优点：安全性高，且支持多种身份提供者。

缺点：实现相对复杂，需要处理token的过期以及刷新。

3. Message Passing

如果主应用和iframe是完全不同的域，使用HTML5的postMessage API进行跨文档消息传递是一种有效的单点登录方案。

在主应用中，可以发送登录状态消息：

// 登录成功后
function sendLoginMessage() {
    const iframe = document.getElementById('yourIframe');
    iframe.contentWindow.postMessage({ loggedIn: true, authToken: 'yourAuthToken' }, 'https://iframe.example.com');
}

在iframe中，你需要监听这些消息：

// 在iframe网页中接收消息
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://main.example.com') return;

    if (event.data.loggedIn) {
        const authToken = event.data.authToken;
        // 使用authToken进行身份验证
    } else {
        // 用户未登录，跳转到登录页
    }
});

优点：支持跨域，适用于完全不同域名的场景。

缺点：实现较复杂，需要考虑安全性和消息验证。

总结

以上三种方法各有优缺点，可以根据实际项目需求选择适合的单点登录方式。Cookie共享方式适合同一主域下的应用，OAuth 2.0适合第三方身份验证，而Message Passing则是不同域名间安全的数据沟通方式。希望本篇文章能为你在实现前端内嵌iframe的单点登录提供帮助。