Expo Auth Session 对接微软Azure OAuth2时redirect_uri无效问题及多平台配置咨询

看起来你在第一次用Expo+React Native对接微软邮箱OAuth2时，卡在了redirect URI的配置上，这个问题确实是新手常踩的坑，我来一步步帮你理清楚解决思路和具体操作。

先搞懂：什么是Redirect URI？ #

简单说，Redirect URI就是微软登录服务器在验证完你的账号密码后，把授权凭证（比如令牌、授权码）“送回”你的App的专属地址。这个地址必须和你在Azure后台注册的完全一致，哪怕多一个斜杠、大小写不对，都会直接报invalid_request错误。

核心错误解决：你的开发环境Redirect URI没在Azure注册 #

你代码里console.log输出的exp://172.20.10.3:8081/--/redirect，就是当前Expo开发环境下的回调地址，但你Azure后台里根本没加这个地址，所以微软不知道该把凭证发给谁，直接报错了。

接下来分平台给你说具体配置方法：

1. Expo 移动端（iOS/Android）配置 #

第一步：确保App Scheme一致

你代码里用了scheme: 'finky'，这个必须和app.json里的scheme字段完全匹配，打开你的app.json，确认有这段：

"expo": {
  "scheme": "finky",
  // 其他配置...
}

第二步：在Azure里添加移动端的Redirect URI

登录Azure Portal，找到你注册的应用，进入「认证」页面：

• 点击「添加平台」，选择「移动和桌面应用」
• 除了Azure自动生成的https://login.microsoftonline.com/common/oauth2/nativeclient，还要手动添加两个地址：
  1. 开发环境临时地址：把你console.log输出的exp://172.20.10.3:8081/--/redirect直接复制进去（注意：开发时你的IP可能会变，每次变了都要重新加，或者用exp://localhost:8081/--/redirect代替，本地调试时也能用）
  2. 生产环境地址：finky://redirect（这个是固定的，打包成IPA/APK后会用这个地址回调）

2. Expo Web端配置 #

开发环境（本地调试）

• Expo Web启动后默认地址是http://localhost:19006，所以你的Redirect URI是http://localhost:19006/redirect
• 在Azure里「添加平台」选择「Web」，然后把这个地址填进去

生产环境（比如部署到GitHub Pages）

• 假设你的GitHub Pages地址是https://xxx.github.io/your-repo-name，那么Redirect URI就是https://xxx.github.io/your-repo-name/redirect
• 在Azure的Web平台配置里添加这个地址，同时修改代码里的redirectUri配置：

  const redirectUri = makeRedirectUri({
    scheme: 'finky',
    web: 'https://xxx.github.io/your-repo-name/redirect' // 替换成你的GitHub Pages地址
  });
  

3. 关于域名的疑问：完全不需要自己买！ #

• 移动端（iOS/Android）：不管开发还是生产，都不需要自己的域名，用scheme://xxx格式的地址就行
• Web端：开发用localhost完全没问题；生产用免费的GitHub Pages、Vercel、Netlify这些平台的域名就足够，不需要自己买

你的代码优化建议 #

我帮你调整了代码，解决了几个潜在问题：

import { makeRedirectUri, useAuthRequest, ResponseType } from 'expo-auth-session';
import * as WebBrowser from 'expo-web-browser';
WebBrowser.maybeCompleteAuthSession();

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

export const useMicrosoftAuth = () => {
  // 自动适配开发/生产、移动/Web的Redirect URI
  const redirectUri = makeRedirectUri({
    scheme: 'finky', // 必须和app.json的scheme一致
    web: process.env.NODE_ENV === 'production'
      ? 'https://你的用户名.github.io/你的仓库名/redirect' // 替换成你的GitHub Pages地址
      : 'http://localhost:19006/redirect',
  });

  console.log('当前使用的Redirect URI:', redirectUri);

  // 把ResponseType改成Code，比Token模式更安全，Expo会自动处理令牌交换
  const [request, response, promptAsync] = useAuthRequest(
    {
      clientId: process.env.EXPO_PUBLIC_MICROSOFT_CLIENT_ID!,
      scopes: ['openid', 'profile', 'User.Read', 'Mail.Read'],
      redirectUri,
      responseType: ResponseType.Code,
    },
    discovery
  );

  const signIn = async () => {
    try {
      const result = await promptAsync({ useProxy: false });
      if (result?.type === 'success') {
        console.log('登录成功，令牌信息:', response?.authentication);
        return response?.authentication?.accessToken;
      } else if (result?.type === 'error') {
        console.error('[微软登录错误]', result.error);
      } else if (result?.type === 'dismiss') {
        console.warn('用户取消了登录');
      }
      return null;
    } catch (error) {
      console.error('[登录异常]', error);
      return null;
    }
  };

  return { signIn, redirectUri, response };
};

最后验证步骤 #

1. 把console.log输出的Redirect URI直接复制到Azure对应的平台配置里，不要手动输入，避免拼写错误
2. 修改Azure配置后，等1-2分钟让配置生效（Azure有时候会有延迟）
3. 重启Expo开发服务器，重新测试登录

内容来源于stack exchange