Ionic React中Azure AD/MSAL安卓原生端登录跳转问题排查

• 已在Ionic React Capacitor应用中实现Azure Active Directory（AAD）认证，通过ionic serve运行Web端时功能正常
• Android端点击登录按钮后无法跳转回应用，也未设置任何凭据
• 已知Web端redirectUri不适用于Android，尝试过Azure AD中「移动和桌面应用」「Android」平台的重定向URI，均未生效
• 已尝试的思路：
  • 更换多种重定向URI，期望实现应用回跳
  • 尝试使用内置浏览器，但无法让msal实例的loginRedirect函数在其中打开

1. 正确配置Android平台的重定向URI #

在Azure AD门户中添加Android平台的重定向URI时，必须使用应用包名+签名哈希值的固定格式：msauth://<包名>/<签名哈希值>

• 包名：对应android/app/build.gradle里的applicationId
• 签名哈希值：用Keytool工具生成，调试环境命令示例：

  keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
  

  注意：调试和发布环境的签名哈希值不同，需分别配置。

2. 配置Capacitor App插件处理深度链接 #

安装并配置@capacitor/app插件，用来监听AAD的回调链接：

1. 安装插件：

   npm install @capacitor/app
   npx cap sync
   

2. 在应用初始化阶段添加监听逻辑：

   import { App } from '@capacitor/app';
   
   App.addListener('appUrlOpen', (data) => {
     const callbackUrl = data.url;
     if (callbackUrl.startsWith('msauth://')) {
       // 将回调URL传递给msal实例处理
       msalInstance.handleRedirectPromise(callbackUrl);
     }
   });
   

3. 替换loginRedirect适配Android环境 #

loginRedirect在Capacitor Android环境下难以正确处理浏览器回调，推荐两种替代方案：

方案一：使用loginPopup登录 #

调整msal登录逻辑，改用弹窗模式：

async function handleLogin() {
  try {
    const loginResult = await msalInstance.loginPopup({
      scopes: ['openid', 'profile', 'User.Read']
    });
    // 处理登录成功后的凭据逻辑
  } catch (err) {
    console.error('登录失败:', err);
  }
}

方案二：用Capacitor Browser插件唤起内置浏览器 #

1. 安装插件：

   npm install @capacitor/browser
   npx cap sync
   

2. 手动构造授权URL并监听浏览器回调：

   import { Browser } from '@capacitor/browser';
   import { PublicClientApplication } from '@azure/msal-browser';
   
   const msalInstance = new PublicClientApplication({
     auth: {
       clientId: '你的ClientID',
       authority: 'https://login.microsoftonline.com/你的租户ID',
       redirectUri: 'msauth://<包名>/<签名哈希值>' // 与Azure配置一致
     }
   });
   
   async function loginWithBuiltInBrowser() {
     const authUrl = await msalInstance.getAuthCodeUrl({
       scopes: ['openid', 'profile', 'User.Read']
     });
   
     await Browser.open({ url: authUrl });
   
     Browser.addListener('browserFinished', async () => {
       const result = await msalInstance.handleRedirectPromise();
       if (result) {
         // 处理登录成功后的逻辑
       }
     });
   }
   

4. 检查AndroidManifest.xml配置 #

确保AndroidManifest.xml中添加了匹配重定向URI的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"
          android:host="<你的包名>"
          android:path="/<你的签名哈希值>" />
</intent-filter>

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