Angular+Capacitor Apple登录双SDK集成遇auth/missing-or-invalid-nonce错误

云原生阿岚

2026-7-28

解决Angular+Capacitor集成Apple登录时的"auth/missing-or-invalid-nonce"错误

问题场景

基于Angular和Capacitor的应用，已通过@capacitor-firebase/authentication完成Apple登录，但集成@angular/fire Web SDK时触发错误：auth/missing-or-invalid-nonce。

错误原因

@capacitor-firebase/authentication发起Apple登录请求时会自动生成nonce，Apple返回的idToken中包含该nonce的哈希值。@angular/fire的OAuthProvider需要原始nonce验证idToken合法性，若传入的rawNonce与生成的原始值不匹配，就会触发该错误。

解决方案

直接使用Capacitor登录返回结果中credential字段的nonce作为rawNonce参数传入OAuthProvider.credential()，无需手动生成或填写任意值。

修正后的代码

import { OAuthProvider, signInWithCredential, getAuth } from '@angular/fire/auth';
import { FirebaseAuthentication } from '@capacitor-firebase/authentication';

AppleAuth() {
  // STEP 1: Capacitor Firebase 完成Apple登录
  FirebaseAuthentication.signInWithApple({}).then((result) => {
    if (result.credential?.idToken && result.credential.nonce) {
      // STEP 2: 使用Capacitor返回的原始nonce创建Angular Fire凭证
      const credential = new OAuthProvider('apple.com').credential({
        idToken: result.credential.idToken,
        rawNonce: result.credential.nonce, // 直接使用Capacitor返回的nonce
      });
      signInWithCredential(getAuth(), credential)
        .then((userCredential) => {
          // 登录成功逻辑
          console.log('Angular Fire登录成功:', userCredential);
        })
        .catch((error) => {
          console.error('登录错误:', error);
        });
    }
  });
}