React页面添加两个Apple登录按钮报错AppleID未定义求助

问题原因 #

1. 脚本重复加载冲突：你使用的react-apple-login组件会自动插入Apple登录脚本，渲染两个组件时会重复尝试加载脚本，导致全局AppleID对象初始化异常，抛出ReferenceError。
2. Client ID未区分：你提到已为学生和导师创建不同的Client ID，但当前代码里两个按钮都用了同一个globalVariable.APPLE_ID，不符合配置要求。

修复方案 #

1. 给两个按钮配置正确的Client ID #

将两个按钮的clientId分别替换为对应的学生/导师专属ID：

{/* 学生登录按钮 */}
<div className="col-12 col-sm-12 mt-2">
  <AppleLogin
    clientId={globalVariable.APPLE_ID_STUDENT} {/* 替换为学生专属Client ID */}
    redirectURI="https://test.example.com/sign-up"
    usePopup={true}
    callback={(e) => this.getAppleToken(e, 'student')}
    scope="email name"
    responseMode="query"
    render={renderProps => (
      <div className='btn btn-google'                              
        onClick={renderProps.onClick}                                                          
        disabled={renderProps.disabled}                                                        
      >                                                               
        学生账号 - 继续使用Apple登录
      </div>
    )}
  />
</div>

{/* 导师登录按钮 */}
<div className="col-12 col-sm-12 mt-2">
  <AppleLogin
    clientId={globalVariable.APPLE_ID_TUTOR} {/* 替换为导师专属Client ID */}
    redirectURI="https://test.example.com/sign-up"
    usePopup={true}
    callback={(e) => this.getAppleToken(e, 'tutor')}
    scope="email name"
    responseMode="query"
    render={renderProps => (
      <div className='btn btn-google' 
        onClick={renderProps.onClick}                                                        
        disabled={renderProps.disabled}                                                     
      >                                                               
        导师账号 - 继续使用Apple登录
      </div>
    )}
  />
</div>

2. 手动控制Apple登录脚本加载 #

禁用组件自动加载脚本，只在页面初始化时加载一次：

第一步：给两个AppleLogin组件添加scriptUrl={null}

<AppleLogin
  scriptUrl={null} {/* 禁止组件自动加载脚本 */}
  {/* 其他属性保持不变 */}
/>

第二步：在组件生命周期中手动加载脚本

类组件在componentDidMount中添加：

componentDidMount() {
  // 检查脚本是否已存在，避免重复加载
  if (!document.getElementById('apple-auth-script')) {
    const script = document.createElement('script');
    script.id = 'apple-auth-script';
    script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }
}

函数组件用useEffect：

useEffect(() => {
  if (!document.getElementById('apple-auth-script')) {
    const script = document.createElement('script');
    script.id = 'apple-auth-script';
    script.src = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  }
}, []);

3. 确保回调函数正确处理用户类型 #

getAppleToken要正确接收userType参数，后续和Apple返回的凭证一起传给后端，让后端用对应Client ID验证：

getAppleToken = async (response, userType) => {
  const res = await fetch('/api/apple-login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      code: response.code,
      userType: userType,
      // 其他必要参数如state等
    })
  });
  // 处理登录结果
};

备选方案：单按钮切换用户类型 #

如果上述方案仍有问题，可改成一个按钮，点击时让用户选择类型再触发登录：

<div className='btn btn-google' onClick={() => {
  const isStudent = window.confirm('选择用户类型：确定=学生，取消=导师');
  const userType = isStudent ? 'student' : 'tutor';
  const clientId = isStudent ? globalVariable.APPLE_ID_STUDENT : globalVariable.APPLE_ID_TUTOR;

  if (window.AppleID) {
    window.AppleID.auth.signIn({
      clientId: clientId,
      redirectURI: "https://test.example.com/sign-up",
      scope: "email name",
      responseMode: "query",
      state: userType // 用state传递用户类型，回调页面读取
    });
  }
}}>
  继续使用Apple登录
</div>

之后在sign-up页面，从URL的state参数获取用户类型，完成后续登录流程。

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