React Native集成Azure AD认证遇CompactToken解析错误80049217求助

我是React Native新手，尝试通过react-native-azure-ad-auth库实现Microsoft认证，但遇到问题。该库实现流程看似简单，我的凭证配置如下：

const credentials = {
  authority: `https://login.microsoftonline.com/${AuthConfig.tenantId}`,
  client_id: AuthConfig.appId,
  client_secret: AuthConfig.secret,
  redirect_uri: "http://localhost:8081/",
  scope: AuthConfig.appScopes,
};

当redirect_uri设为http://localhost:8081时，认证成功后可正常重定向，且能返回令牌和用户数据，说明凭证配置无误。但将其改为"com.msgraph://oauth/redirect/"或"msauth://com.msgraph/<signature HASH>"时，Azure返回如下错误：

{"error": {"code": "InvalidAuthenticationToken", "innerError": {"client-request-id": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX", "date": "2022-10-14T07:27:30", "request-id": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXX"}, "message": "CompactToken parsing failed with error code: 80049217"}}

同时提示：

Error: Could not open URL 'com.msgraph://oauth/redirect/?code=0.ATkAbbMV87Ls8UuRKyUe8...... etc

我已在Azure门户配置好对应重定向URI，请问问题出在哪里？

• 自定义URL Scheme未在React Native项目中注册
  移动端APP需要在系统中注册对应的URL Scheme，否则系统无法识别并将认证回调URL跳转至你的APP。

  • iOS配置：在Info.plist中添加以下配置，替换对应的scheme值：

    <!-- 允许查询微软认证相关的scheme -->
    <key>LSApplicationQueriesSchemes</key>
    <array>
      <string>msauth</string>
      <string>com.msgraph</string>
    </array>
    <!-- 注册APP自身的URL Scheme -->
    <key>CFBundleURLTypes</key>
    <array>
      <dict>
        <key>CFBundleURLSchemes</key>
        <array>
          <string>com.msgraph</string> <!-- 对应你的redirect_uri中的scheme -->
        </array>
      </dict>
    </array>
    

  • Android配置：在AndroidManifest.xml的主Activity标签内添加intent-filter：

    <activity
      android:name=".MainActivity"
      ...>
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- 匹配com.msgraph开头的重定向URI -->
        <data
          android:scheme="com.msgraph"
          android:host="oauth"
          android:path="/redirect/" />
        <!-- 如果用msauth开头的URI，添加以下data配置 -->
        <data
          android:scheme="msauth"
          android:host="com.msgraph"
          android:path="/<你的签名HASH>" />
      </intent-filter>
    </activity>
    

• 移除不必要的client_secret参数
  React Native属于公共客户端（移动端APP），微软认证体系中公共客户端不需要client_secret，将其从credentials配置中删除即可。这个敏感信息不应出现在前端代码中，同时可能导致令牌解析错误。修改后的配置示例：

  const credentials = {
    authority: `https://login.microsoftonline.com/${AuthConfig.tenantId}`,
    client_id: AuthConfig.appId,
    redirect_uri: "com.msgraph://oauth/redirect/",
    scope: AuthConfig.appScopes,
  };
  

• 验证msauth:// URI的签名HASH准确性
  如果使用msauth://com.msgraph/<signature HASH>作为重定向URI，确保HASH值是你APP签名的SHA-256哈希，且与Azure门户中配置的完全一致（大小写敏感）。可以通过以下方式生成：

  • Android：使用keytool命令生成签名哈希，命令示例：

    keytool -exportcert -alias <你的签名别名> -keystore <你的签名文件路径> | openssl sha256 -binary | openssl base64
    

  • iOS：可以通过Xcode的Build Settings查看签名证书的哈希，或使用微软提供的工具生成。

• 处理APP的URL回调逻辑
  确保在React Native代码中监听URL跳转事件，处理认证回调：

  import { Linking } from 'react-native';
  
  useEffect(() => {
    // 处理APP已启动时的回调
    const handleRedirect = async (event) => {
      const url = event.url;
      // 调用react-native-azure-ad-auth的处理方法
      await authClient.handleRedirect(url);
    };
  
    Linking.addEventListener('url', handleRedirect);
  
    // 处理APP冷启动时的回调
    Linking.getInitialURL().then(url => {
      if (url) {
        authClient.handleRedirect(url);
      }
    });
  
    return () => {
      Linking.removeEventListener('url', handleRedirect);
    };
  }, []);
  

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