Ionic/Capacitor集成MS认证：浏览器登录无法跳转回Android应用

你的核心问题是自定义URL Scheme的跳转需要系统层面的配置，而非仅依赖Ionic内部路由——路由只能处理应用内的页面导航，无法捕获外部浏览器跳转回应用的Scheme请求。以下是具体修正步骤：

1. 配置Android系统识别你的Scheme #

在Capacitor项目的android/app/src/main/AndroidManifest.xml中，找到主Activity（通常是MainActivity）的<activity>标签，添加如下intent-filter，告诉Android系统你的应用负责处理msal123-abc://auth这个URL：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 与redirectUri的scheme和host严格对应 -->
    <data android:scheme="msal123-abc" />
    <data android:host="auth" />
</intent-filter>

2. 用Capacitor App插件捕获回调URL #

外部浏览器跳回应用时，需要通过Capacitor的App插件监听跳转事件，再把URL交给MSAL处理回调：

• 先安装插件：

npm install @capacitor/app
npx cap sync

• 在应用初始化代码（比如app.component.ts）中添加监听逻辑：

import { App } from '@capacitor/app';
import { PublicClientApplication } from '@azure/msal-browser';

// ...

private msalInstance: PublicClientApplication;

constructor() {
  this.initMsal();
  this.setupCallbackListener();
}

private initMsal() {
  this.msalInstance = new PublicClientApplication({
    auth: {
      clientId: 'abc-123',
      authority: 'https://login.microsoftonline.com/abc-123',
      redirectUri: 'msal123-abc://auth' 
    },
    cache: {
      cacheLocation: 'localStorage'
    }
  });
}

private setupCallbackListener() {
  App.addListener('appUrlOpen', async (data) => {
    const callbackUrl = data.url;
    // 确认是MSAL的回调URL
    if (callbackUrl.startsWith('msal123-abc://auth')) {
      // 交给MSAL处理令牌获取
      await this.msalInstance.handleRedirectPromise(callbackUrl);
      // 此处可添加登录成功后的逻辑，比如跳转首页
    }
  });
}

3. 删除无效的路由配置 #

你之前在路由中添加的path: 'msal123-abc'完全无效——自定义Scheme的跳转不属于Ionic内部路由范畴，直接删除该路由项即可。

4. 验证Azure AD应用注册配置 #

确保在Azure AD的应用注册页面，已经将msal123-abc://auth添加到移动和桌面应用的重定向URI列表中，否则Azure会拒绝回调请求。

内容的提问来源于stack exchange，提问作者n.r.