如何将基于Spring Boot的Facebook OAuth2登录改为弹窗形式？

我之前也碰到过类似的需求，要把跳转式的OAuth2登录改成弹窗形式，其实需要前端和后端配合调整，下面是具体的实现步骤：

1. 前端修改登录按钮的触发逻辑 #

首先要把原来直接跳转的登录按钮，改成通过JavaScript打开一个居中的弹窗来加载Facebook授权页面，这样不会让整个页面跳转。

给登录按钮绑定点击事件，示例代码如下：

// 获取登录按钮元素
const facebookLoginBtn = document.getElementById('facebook-login-btn');

facebookLoginBtn.addEventListener('click', function(e) {
    // 阻止默认的跳转行为
    e.preventDefault();

    // 设置弹窗的尺寸和位置（居中显示）
    const popupWidth = 600;
    const popupHeight = 600;
    const leftPos = (window.innerWidth / 2) - (popupWidth / 2);
    const topPos = (window.innerHeight / 2) - (popupHeight / 2);

    // 打开授权弹窗，指向Spring Security的Facebook授权端点
    const authPopup = window.open(
        '/oauth2/authorization/facebook',
        'FacebookOAuthLogin',
        `width=${popupWidth},height=${popupHeight},left=${leftPos},top=${topPos},resizable=yes,scrollbars=yes`
    );

    // 监听弹窗关闭事件，关闭后刷新主页面获取登录状态
    const checkPopupStatus = setInterval(() => {
        if (authPopup.closed) {
            clearInterval(checkPopupStatus);
            // 刷新页面以加载已登录用户的信息
            window.location.reload();
        }
    }, 1000);
});

2. 后端配置自定义登录成功回调页面 #

默认情况下，Facebook授权成功后会直接跳转回你的应用首页，我们需要改成跳转到一个中间页面，这个页面的作用是通知主页面登录成功，然后自动关闭弹窗。

2.1 配置Spring Security的登录成功处理器 #

在你的Spring Security配置类中，指定OAuth2登录成功后的跳转目标页面：

import org.springframework.security.web.authentication.SimpleUrlAuthenticationSuccessHandler;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.context.annotation.Bean;

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .anyRequest().authenticated()
                .and()
            .oauth2Login()
                // 指定登录成功后的跳转页面
                .successHandler(successHandler());
    }

    @Bean
    public SimpleUrlAuthenticationSuccessHandler successHandler() {
        SimpleUrlAuthenticationSuccessHandler handler = new SimpleUrlAuthenticationSuccessHandler();
        // 设置成功后跳转的自定义回调页面
        handler.setDefaultTargetUrl("/oauth2/login-success");
        return handler;
    }
}

2.2 创建自定义回调页面 #

创建一个静态HTML或者Thymeleaf页面（比如/oauth2/login-success），页面内容负责向主页面发送登录成功的消息，然后关闭弹窗：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Success</title>
    <script>
        // 向主页面发送登录成功的消息（验证来源确保安全）
        if (window.opener && window.opener.location.origin === window.location.origin) {
            window.opener.postMessage(
                { type: "OAUTH_LOGIN_SUCCESS" },
                window.location.origin
            );
        }
        // 关闭当前弹窗
        window.close();
    </script>
</head>
<body>
    <p>登录成功，正在关闭窗口...</p>
</body>
</html>

3. 主页面监听登录成功消息（可选优化） #

如果不想依赖弹窗关闭后的定时检测，可以在主页面监听弹窗发送的消息，收到登录成功通知后再执行刷新或其他操作：

// 监听来自弹窗的消息
window.addEventListener('message', function(event) {
    // 验证消息来源，防止跨域攻击
    if (event.origin !== window.location.origin) {
        return;
    }

    // 处理登录成功的消息
    if (event.data?.type === "OAUTH_LOGIN_SUCCESS") {
        // 刷新页面加载用户信息，或者更新页面状态
        window.location.reload();
    }
});

4. 处理登录失败的情况（可选） #

同样的，你可以配置登录失败处理器，跳转到一个失败回调页面，通知主页面登录失败：

// 在SecurityConfig的configure方法中添加失败处理器
.oauth2Login()
    .successHandler(successHandler())
    .failureHandler(failureHandler());

// 定义失败处理器Bean
@Bean
public OAuth2AuthenticationFailureHandler failureHandler() {
    SimpleUrlAuthenticationFailureHandler handler = new SimpleUrlAuthenticationFailureHandler();
    handler.setDefaultFailureUrl("/oauth2/login-failure");
    return handler;
}

对应的失败页面/oauth2/login-failure可以类似成功页面，发送失败消息后关闭弹窗：

<script>
    if (window.opener && window.opener.location.origin === window.location.origin) {
        window.opener.postMessage(
            { type: "OAUTH_LOGIN_FAILURE", message: "登录失败，请重试" },
            window.location.origin
        );
    }
    window.close();
</script>

注意事项 #

• 确保你的Facebook OAuth应用配置的回调URL和Spring Boot中配置的一致（可以在application.properties中设置spring.security.oauth2.client.registration.facebook.redirect-uri={baseUrl}/login/oauth2/code/facebook）
• 浏览器可能会拦截非用户主动触发的弹窗，所以一定要在用户点击按钮时打开弹窗，不要自动触发
• 使用postMessage时一定要验证消息来源，避免跨域安全问题

内容的提问来源于stack exchange，提问作者Igor