Google One Tap在iOS及Mac Safari中无法打开弹窗的问题求助

问题核心：Safari（包含iOS端）的弹窗拦截机制比Chrome、Firefox更严格，仅允许在用户主动触发的同步交互上下文里打开弹窗。你当前在Google One Tap的异步回调中调用client.requestAccessToken()，这个回调已经脱离了用户最初点击登录按钮的事件上下文，因此被Safari判定为非用户主动操作，直接拦截弹窗。

解决方案：将access token请求放在用户主动触发的交互中 #

最可靠的方式是增加一个明确的操作按钮，让用户在One Tap登录完成后，主动点击按钮触发access token请求，确保操作处于用户交互的同步上下文里。

示例代码调整：

// 初始化Google One Tap
window.google.accounts.id.initialize({
  client_id: publicRuntimeConfig.socials.google.auth.id,
  callback: ({ credential }) => {
    const user = decodeJwt(credential);
    if (user.email_verified) {
      // 缓存用户必要信息
      window.googleAuthUser = {
        clientId: user.aud,
        email: user.email
      };
      // 显示获取权限的按钮（提前在页面中隐藏该按钮）
      document.getElementById('fetch-profile-btn').style.display = 'inline-block';
    }
  },
});

window.google.accounts.id.prompt();

// 绑定按钮点击事件，在用户主动交互中请求access token
document.getElementById('fetch-profile-btn').addEventListener('click', () => {
  const { clientId, email } = window.googleAuthUser;
  const tokenClient = window.google.accounts.oauth2.initTokenClient({
    client_id: clientId,
    scope: 'https://www.googleapis.com/auth/userinfo.profile',
    hint: email,
    prompt: '',
    callback: ({ access_token }) => {
      // 这里处理获取到的access token
    },
  });
  tokenClient.requestAccessToken();
});

其他辅助排查点 #

• 确认用户未在Safari中开启「阻止所有弹窗」的严格设置（但这属于用户端操作，不能作为核心解决方案）
• 避免在prompt()调用后立即执行异步操作，所有涉及弹窗的请求必须绑定到用户明确的点击、触摸等交互事件上

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