Laravel+Vue SPA实现GitHub登录：回调JSON返回当前页而非弹窗

我来帮你搞定这个弹窗登录的问题～ 目前的问题是回调直接把JSON返回给了弹窗窗口，咱们需要调整一下服务端的回调逻辑，让它通过JS和原SPA页面通信，然后关闭弹窗。以下是具体步骤：

1. 修改服务端回调方法，返回通信页面 #

不再直接返回JsonResponse，而是返回一个包含JS代码的HTML页面，让这个页面负责把用户数据传给父窗口并关闭自己。

修改Laravel的回调控制器方法：

public function handleProviderCallback($service, Request $request) {
    $providerUser = Socialite::driver($service)->stateless()->user();
    // 将用户数据转为JSON字符串，传给视图
    $userData = json_encode($providerUser);

    // 返回专门的回调视图页面
    return response()->view('auth.callback', [
        'userData' => $userData
    ]);
}

2. 创建回调视图文件 #

在resources/views/auth目录下新建callback.blade.php文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>登录回调处理</title>
    <script>
        // 向原SPA页面（父窗口）发送登录成功的数据
        window.opener.postMessage(
            {
                type: 'GITHUB_LOGIN_SUCCESS',
                data: {!! $userData !!}
            },
            window.opener.origin // 确保只发给原域名，提升安全性
        );

        // 发送完成后关闭弹窗
        window.close();
    </script>
</head>
<body></body>
</html>

3. 在Vue客户端监听消息事件 #

在你的Vue组件里添加postMessage的监听，接收弹窗传过来的用户数据，然后处理后续的登录逻辑：

export default {
    mounted() {
        // 监听来自弹窗的消息
        window.addEventListener('message', this.handleLoginCallback);
    },
    beforeUnmount() {
        // 组件销毁时移除监听，避免内存泄漏
        window.removeEventListener('message', this.handleLoginCallback);
    },
    methods: {
        authenticate() {
            window.open("login/github", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
        },
        handleLoginCallback(event) {
            // 安全校验：只处理来自自己域名的消息
            if (event.origin !== window.location.origin) return;

            if (event.data.type === 'GITHUB_LOGIN_SUCCESS') {
                const userData = event.data.data;
                // 这里可以处理登录逻辑：比如存到Vuex、localStorage，或者调用后端接口创建用户
                console.log('GitHub登录成功，用户数据：', userData);
                // 示例：调用自己的后端登录接口
                // this.$axios.post('/api/auth/login', { provider: 'github', user: userData })
                //     .then(res => { /* 处理登录成功后的逻辑 */ });
            }
        }
    }
}

为什么要这么做？ #

弹窗是一个独立的浏览器窗口，直接返回JSON会让弹窗显示这些数据。通过postMessageAPI，我们可以在弹窗和原SPA页面之间建立通信，把用户数据传递过去，然后关闭弹窗，完美实现你想要的效果。

另外，一定要注意event.origin的校验，这能防止恶意网站通过伪造消息来攻击你的应用，提升安全性。

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