React Native用react-native-app-auth接Office365登录无法获取令牌

问题描述 #

使用react-native-app-auth包为iOS、Android双端应用接入Microsoft Office 365认证时，可正常跳转至微软登录页完成账号校验、授权确认，但跳转回应用后无令牌返回、无错误抛出，无法获取access token。

已尝试的实现 #

第一种配置（基于issuer自动发现端点） #

const config = {
   issuer: 'https://login.microsoftonline.com/{tenant-id}/v2.0',
   clientId: '{client-id}',
   redirectUrl: 'msauth.org.xxx.xxx://auth', // 该值从Azure平台获取
   scopes: ['openid', 'profile', 'email', 'offline_access'],
};

第二种配置（手动指定服务端点） #

const config = {
  clientId: AuthConfig.appId,
  warmAndPrefetchChrome: true,
  redirectUrl: 'msauth.org.xxx.xxx://auth',
  scopes: AuthConfig.appScopes,
  additionalParameters: {prompt: 'select_account'},
  serviceConfiguration: {
    authorizationEndpoint: 'https://login.microsoftonline.com/' + AuthConfig.tenantId + '/oauth2/v2.0/authorize',
    tokenEndpoint: 'https://login.microsoftonline.com/' + AuthConfig.tenantId + '/oauth2/v2.0/token',
  },
};

登录逻辑代码 #

const loginWithOffice365 = async () => {
  try {
    let result = await authorize(config);
    console.log('result', result); // 无结果输出，也无错误打印
  } catch (error) {
    console.log('error', error);
  }
}

前置操作与现象 #

• 已在Azure平台完成应用注册，重定向URL配置截图如下：
  
• 登录流程可正常跳转至微软官方登录页，输入账号、确认授权后直接跳回应用登录页
• 跳转后无回调结果、无错误抛出，无法确认重定向配置是否正确

修复步骤 #

该问题90%以上由原生端重定向拦截配置缺失、OAuth请求参数不符合微软端点要求导致，按以下顺序排查修复：

• Android端配置检查
  1. 确认android/app/build.gradle中applicationId与redirectUrl前缀完全匹配：若redirectUrl为msauth.org.xxx.xxx://auth，应用包名必须为org.xxx.xxx
  2. 在android/app/src/main/AndroidManifest.xml的主Activity节点下新增intent-filter拦截重定向请求，替换为自身应用的scheme、host配置：

  <!-- 主Activity下新增，不要覆盖原有intent-filter -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="msauth.org.xxx.xxx" android:host="auth" />
  </intent-filter>
  

  3. 确认debug、release签名对应的SHA1哈希均已配置到Azure平台应用注册的重定向配置中，签名不一致会导致回调静默失败。
• iOS端配置检查
  1. 在ios/Info.plist中添加URL Scheme配置，替换为自身应用的redirect scheme：

  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>msauth.org.xxx.xxx</string>
      </array>
    </dict>
  </array>
  

  2. 在AppDelegate中实现openURL回调，将跳转事件传递给react-native-app-auth：

  // Objective-C 版本
  - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    return [RNAppAuthAuthorizationFlowManager resumeExternalUserAgentFlowWithURL:url];
  }
  

  同时确保AppDelegate遵守RNAppAuthAuthorizationFlowManagerDelegate协议。
• JS层配置修正
  1. 不要混用两种配置方式，优先使用手动指定serviceConfiguration的方案，避免issuer自动发现请求失败导致流程静默中断
  2. scopes中新增{你的clientId}/.default权限，微软v2.0端点对非MSAL的OAuth客户端要求显式声明.default scope，否则会拦截token请求
  3. 配置中增加usePKCE: true，微软v2.0端点强制公共客户端使用PKCE流程，缺少该参数无法完成token换取
• 验证操作
  所有配置修改完成后必须重新编译原生端安装包（JS热重载不会加载原生配置改动），重新触发登录流程即可在控制台拿到包含accessToken、refreshToken的完整返回结果。

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