如何让Next-Auth Google Provider调用弹窗而非跳转页面？

方案1：手动构造授权URL+弹窗通信 #

如果找不到现成的uxMode配置，可以手动实现弹窗登录流程：

• 步骤1：构造Google OAuth授权URL
  拼接包含必要参数的授权地址，参数包括client_id、redirect_uri（需在Google Cloud控制台提前配置）、response_type、scope等。

• 步骤2：打开弹窗并监听回调
  用window.open()打开授权URL，然后通过postMessage实现弹窗与主页面的通信，传递授权码或令牌。

示例代码：

// 主页面代码
const authUrl = `https://accounts.google.com/o/oauth2/v2/auth?${new URLSearchParams({
  client_id: '你的客户端ID',
  redirect_uri: `${window.location.origin}/auth-callback.html`,
  response_type: 'code',
  scope: 'openid email profile',
  access_type: 'online'
})}`;

// 打开登录弹窗
const authPopup = window.open(authUrl, 'GoogleAuth', 'width=600,height=600');

// 监听弹窗返回的消息
window.addEventListener('message', (event) => {
  if (event.origin !== window.location.origin) return;
  if (event.data.type === 'google_auth_success') {
    const authCode = event.data.code;
    // 将授权码发送到后端换取访问令牌
    authPopup.close();
  }
});

<!-- auth-callback.html 回调页面代码 -->
<script>
const urlParams = new URLSearchParams(window.location.search);
const authCode = urlParams.get('code');

// 向主页面发送授权码
window.opener.postMessage({
  type: 'google_auth_success',
  code: authCode
}, window.opener.origin);

window.close();
</script>

方案2：使用Google Identity Services的原生弹窗模式 #

Google最新的Identity Services SDK已经支持弹窗模式，直接配置ux_mode: 'popup'即可：

<!-- 加载Google Identity Services SDK -->
<script src="https://accounts.google.com/gsi/client" async defer></script>

<script>
window.onload = () => {
  const authClient = google.accounts.oauth2.initCodeClient({
    client_id: '你的客户端ID',
    scope: 'openid email profile',
    ux_mode: 'popup', // 启用弹窗模式
    callback: (response) => {
      // 处理返回的授权码response.code
      console.log('授权码:', response.code);
    }
  });

  // 绑定登录按钮点击事件
  document.getElementById('google-login-btn').addEventListener('click', () => {
    authClient.requestCode();
  });
};
</script>

注意事项 #

• 确保redirect_uri已在Google Cloud控制台的OAuth 2.0客户端设置中添加
• 弹窗尺寸建议设置为600x600，避免被浏览器拦截
• 使用postMessage时必须验证event.origin，防止跨域安全问题

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