React Native集成Azure AD登录遇AADSTS50011错误及发布适配咨询

• 确认Expo环境的重定向URI格式：
  Expo开发与生产环境的重定向URI规则不同，不要手动从登录页提取动态URI，需配置官方规定的固定格式：
  • 开发环境（Expo Go）：使用exp://127.0.0.1:19000/--/oauthredirect，或通过AuthSession.makeRedirectUri()获取当前环境的精准URI，将其完整复制到Azure AD应用配置中。
  • 确保Azure AD中添加的是「移动和桌面应用」类型的重定向URI，而非Web类型。
• 检查Azure AD配置细节：
  登录Azure门户进入目标AD应用的「身份验证」选项卡，确认配置的URI与代码中使用的完全一致，包括大小写、路径和协议。
• 清除缓存重试：
  运行expo r -c清除Expo缓存后重启项目，避免旧URI残留导致的匹配失败。

Expo开发环境代码无法直接用于应用商店发布，需配置专属重定向URI并调整生产模式逻辑，以下是完整适配示例：

1. 先配置应用商店重定向URI #

• Google Play：自定义scheme（如com.yourapp.azureoauth），在Azure AD中添加com.yourapp.azureoauth://oauthredirect作为重定向URI。
• App Store：推荐使用App Links，配置域名关联后添加https://yourdomain.com/oauthredirect；也可使用自定义scheme，但需符合App Store审核规范。

2. 生产环境适配代码 #

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { AuthSession, makeRedirectUri } from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';

WebBrowser.maybeCompleteAuthSession();

// 替换为你的Azure AD参数
const AZURE_CLIENT_ID = '你的客户端ID';
const AZURE_TENANT_ID = '你的租户ID（common或具体ID）';

// 生成对应环境的重定向URI
const REDIRECT_URI = makeRedirectUri({
  native: 'com.yourapp.azureoauth://oauthredirect', // 应用商店自定义scheme
  web: 'https://yourdomain.com/oauthredirect', // App Links或Web端用
});

const discovery = {
  authorizationEndpoint: `https://login.microsoftonline.com/${AZURE_TENANT_ID}/oauth2/v2.0/authorize`,
  tokenEndpoint: `https://login.microsoftonline.com/${AZURE_TENANT_ID}/oauth2/v2.0/token`,
};

export default function AzureLogin() {
  const [accessToken, setAccessToken] = useState(null);

  const handleLogin = async () => {
    const authRequest = {
      clientId: AZURE_CLIENT_ID,
      scopes: ['openid', 'profile', 'email'],
      redirectUri: REDIRECT_URI,
    };

    const authResponse = await AuthSession.startAsync({
      authUrl: `${discovery.authorizationEndpoint}?client_id=${AZURE_CLIENT_ID}&response_type=code&redirect_uri=${encodeURIComponent(REDIRECT_URI)}&scope=${encodeURIComponent(authRequest.scopes.join(' '))}`,
    });

    if (authResponse.type === 'success') {
      // 交换授权码获取令牌
      const tokenResponse = await fetch(discovery.tokenEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `client_id=${AZURE_CLIENT_ID}&redirect_uri=${encodeURIComponent(REDIRECT_URI)}&grant_type=authorization_code&code=${authResponse.params.code}`,
      });

      const tokenData = await tokenResponse.json();
      setAccessToken(tokenData.access_token);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {accessToken ? (
        <Text>登录成功，令牌：{accessToken.substring(0, 20)}...</Text>
      ) : (
        <Button title="微软账号登录" onPress={handleLogin} />
      )}
    </View>
  );
}

3. 发布额外配置 #

• Google Play：在app.json中添加scheme配置：

  "expo": {
    "scheme": "com.yourapp.azureoauth",
    // 其他项目配置
  }
  

• App Store：若使用App Links，需在app.json中配置associatedDomains，并在域名服务器部署apple-app-site-association文件。

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