React Native向Firebase传Azure令牌时遇无效凭据/提供商ID错误

问题描述 #

我正在开发React Native应用，在iOS模拟器的开发构建中测试。使用Firebase Auth管理登录，邮箱/密码登录已正常运行，但集成Microsoft Azure SSO时遇到问题：能获取Microsoft令牌，提交给Firebase时返回auth/invalid-credential-or-provider-id错误。Microsoft返回的令牌是有效的JWT，我看到有信息称Firebase不支持Microsoft SSO，但Firebase Auth控制台却有该选项，这让我困惑。

相关代码 #

// Endpoint
const discovery = useAutoDiscovery(
    'https://login.microsoftonline.com/common/v2.0',
);

let redirectUri = null

if (Platform.OS === 'ios') {
    redirectUri = 'msauth.com.<my app's address>://auth'
}
else if (Platform.OS === 'android') {
    redirectUri = 'msauth://com.<my app's address>/2jmj7l5rSw0yVb%2FvlWAYkK%2FYBwk%3D'
}


const clientId = '<my app's client id>';
// Request
const [request, , promptAsync] = useAuthRequest(
    {
    clientId,
    scopes: ['openid', 'profile', 'email'],
    redirectUri,
    },
    discovery,
);


return (
    <Button 
        onPress={() => {
            promptAsync().then((codeResponse) => {
            if (request && codeResponse?.type === 'success' && discovery) {
                exchangeCodeAsync(
                {
                    clientId,
                    code: codeResponse.params.code,
                    extraParams: request.codeVerifier
                    ? { code_verifier: request.codeVerifier }
                    : undefined,
                    redirectUri,
                },
                discovery,
                ).then((res) => {                        
                    const provider = new OAuthProvider('microsoft.com');
                    const credential = provider.credential({
                        idToken: res.idToken,
                        // accessToken: res.accessToken,
                    });
                    console.log('Credential', credential);

                    // Sign in with the credential
                    signInWithCredential(auth, credential)
                        .then((userCredential) => {
                            // Signed in
                            const user = userCredential.user;
                            console.log('User signed in', user);
                            // ...
                        })
                        .catch((error) => {
                            console.log('Error signing in', error);
                        });
                });
            }
            });
        }}
    >
        Sign in with {props.provider_type}
    </Button>
)

排查与修复方案 #

• 检查Firebase与Azure的重定向URI配置
  Firebase Auth集成Microsoft SSO时，需要将Firebase生成的重定向URI（格式为https://<你的Firebase项目ID>.firebaseapp.com/__/auth/handler）添加到Azure Active Directory应用的"重定向URI"列表中，不能仅使用自定义的App Link Scheme。同时确保Firebase控制台中Microsoft身份提供者的重定向URI与Azure配置完全一致。

• 确认Firebase控制台的Microsoft提供者配置
  进入Firebase Auth控制台，确保Microsoft身份提供者已启用，且填写的客户端ID和客户端密钥与Azure应用的"应用程序(客户端)ID"、"客户端密码"完全匹配，注意不要混淆租户ID和客户端ID。

• 完善Credential构造参数
  尝试同时传入idToken和accessToken到provider.credential方法中，Firebase可能需要同时验证这两个令牌的有效性：

  const credential = provider.credential({
      idToken: res.idToken,
      accessToken: res.accessToken,
  });
  

• 验证JWT令牌的受众与签发者
  解码获取到的Microsoft JWT令牌，检查aud字段是否等于Firebase中配置的Microsoft客户端ID，iss字段是否为https://login.microsoftonline.com/common/v2.0（或对应租户的签发地址），不匹配的令牌会被Firebase拒绝。

• 检查React Native的深度链接配置
  在iOS的Info.plist中确认CFBundleURLTypes已正确配置msauth.com.<my app's address> scheme，对应的CFBundleURLSchemes值准确，确保令牌能正确传递回应用，避免因链接配置问题导致令牌丢失或篡改。

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