Sign in with Apple弹窗在Chrome中登录成功后无法自动关闭的问题

你的Apple ID登录代码在iOS/macOS Safari中运行正常，但在Windows/macOS Chrome里，登录成功后弹窗无法自动关闭（可正常接收返回数据），且该功能曾正常运行过，已排除重定向设置和Service ID配置问题。以下是针对性的解决方案：

你的原始代码 #

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js";
  script.async = true;
  script.onload = () => {
    if (window.AppleID) {
      (window as any).AppleID.auth.init({
        clientId: "com.example.client",
        scope: "name email",
        redirectURI: "https://www.example.com",
        state: "example",
        responseMode: "web_message",
        usePopup: true,
      });
    }
  };
  document.body.appendChild(script);
  // 监听授权成功事件
  document.addEventListener("AppleIDSignInOnSuccess", (event) => {
    // 处理成功响应
    console.log(event);
  });
}, []);

const response = await window.AppleID.auth.signIn();
console.log(response.authorization.id_token);

解决方案 #

1. 手动触发弹窗关闭

既然能正常收到AppleIDSignInOnSuccess事件，可在回调中手动关闭弹窗。通过重写signIn方法记录弹窗引用，在成功回调中执行关闭操作：

useEffect(() => {
  let appleSignInPopup;
  const script = document.createElement("script");
  script.src = "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js";
  script.async = true;
  script.onload = () => {
    if (window.AppleID) {
      (window as any).AppleID.auth.init({
        clientId: "com.example.client",
        scope: "name email",
        redirectURI: "https://www.example.com",
        state: "example",
        responseMode: "web_message",
        usePopup: true,
      });
      // 重写signIn方法，记录弹窗引用
      const originalSignIn = (window as any).AppleID.auth.signIn;
      (window as any).AppleID.auth.signIn = async () => {
        appleSignInPopup = window.open('', '_blank', 'width=500,height=600');
        const response = await originalSignIn();
        console.log(response.authorization.id_token);
        return response;
      };
    }
  };
  document.body.appendChild(script);

  // 监听成功事件，手动关闭弹窗
  const handleSuccess = (event) => {
    console.log(event);
    if (appleSignInPopup && !appleSignInPopup.closed) {
      appleSignInPopup.close();
    }
  };
  document.addEventListener("AppleIDSignInOnSuccess", handleSuccess);

  return () => {
    document.removeEventListener("AppleIDSignInOnSuccess", handleSuccess);
  };
}, []);

2. 排查Web Message跨域兼容性

Chrome对Web Message的跨域处理可能存在差异，可补充监听全局message事件，确认是否收到Apple ID的回调并手动关闭弹窗：

useEffect(() => {
  let appleSignInPopup;
  const script = document.createElement("script");
  script.src = "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js";
  script.async = true;
  script.onload = () => {
    if (window.AppleID) {
      (window as any).AppleID.auth.init({
        clientId: "com.example.client",
        scope: "name email",
        redirectURI: "https://www.example.com",
        state: "example",
        responseMode: "web_message",
        usePopup: true,
      });
      const originalSignIn = (window as any).AppleID.auth.signIn;
      (window as any).AppleID.auth.signIn = async () => {
        appleSignInPopup = window.open('', '_blank', 'width=500,height=600');
        return await originalSignIn();
      };
    }
  };
  document.body.appendChild(script);

  // 额外监听全局message事件
  const handleMessage = (event) => {
    if (event.origin === "https://appleid.apple.com") {
      console.log("收到Apple ID回调消息:", event.data);
      if (appleSignInPopup && !appleSignInPopup.closed) {
        appleSignInPopup.close();
      }
    }
  };
  window.addEventListener("message", handleMessage);

  return () => {
    window.removeEventListener("message", handleMessage);
  };
}, []);

3. 确保SDK初始化完成后再调用signIn

Chrome的脚本加载时序可能与Safari不同，通过状态变量控制signIn的调用时机，避免过早执行：

import { useState, useEffect } from 'react';

const [appleIdReady, setAppleIdReady] = useState(false);

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js";
  script.async = true;
  script.onload = () => {
    if (window.AppleID) {
      (window as any).AppleID.auth.init({
        clientId: "com.example.client",
        scope: "name email",
        redirectURI: "https://www.example.com",
        state: "example",
        responseMode: "web_message",
        usePopup: true,
      });
      setAppleIdReady(true);
    }
  };
  document.body.appendChild(script);

  document.addEventListener("AppleIDSignInOnSuccess", (event) => {
    console.log(event);
  });

  return () => {
    document.removeEventListener("AppleIDSignInOnSuccess", () => {});
  };
}, []);

// 触发登录的函数
const handleAppleSignIn = async () => {
  if (!appleIdReady) return;
  try {
    const response = await (window as any).AppleID.auth.signIn();
    console.log(response.authorization.id_token);
  } catch (err) {
    console.error("登录失败:", err);
  }
};

4. 清除浏览器缓存与Cookie

Chrome的缓存或Apple ID相关Cookie可能导致SDK状态异常，尝试清除后重试：

• 打开Chrome设置，进入「隐私和安全」→「清除浏览数据」
• 勾选「Cookie和其他网站数据」「缓存的图片和文件」，选择时间范围为「所有时间」，点击清除

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