Ionic 6+Capacitor跨端Android/iOS App集成Azure AD认证跳转浏览器无法返回App问题

问题根因 #

你当前使用的是Web端Azure AD示例配置，重定向URI指向localhost:8100，移动端运行时外部浏览器无法识别该地址属于你的应用，因此不会跳转回应用内。 #

分步配置 #

1. 调整Azure AD应用注册的重定向URI #

在Azure门户的应用注册页面，新增两个平台专属的重定向URI：

• 安卓端：格式为 msauth://[应用包名]/[Base64编码的签名哈希]
• iOS端：格式为 msauth.[应用包名]://auth
  注意：安卓签名哈希可通过keytool工具从打包用的keystore文件导出，测试阶段直接用debug.keystore生成即可

2. 配置Capacitor自定义URL Scheme #

修改项目根目录下的capacitor.config.ts，添加对应平台的URL Scheme配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用包名（如com.example.myapp）',
  appName: '你的应用名称',
  webDir: 'www',
  ios: {
    urlScheme: 'msauth.你的应用包名'
  },
  android: {
    urlScheme: 'msauth'
  }
};

export default config;

配置完成后执行npx cap sync同步配置到原生项目。

3. 环境区分的MSAL配置 #

修改MSAL初始化逻辑，根据运行环境自动切换重定向地址：

import { Platform } from '@ionic/angular';
import { Configuration, PublicClientApplication } from '@azure/msal-browser';

constructor(private platform: Platform) {}

initMsal() {
  let redirectUri = 'http://localhost:8100';
  // 移动端环境切换专属重定向地址
  if (this.platform.is('capacitor')) {
    redirectUri = this.platform.is('ios') 
      ? 'msauth.你的应用包名://auth' 
      : 'msauth://你的应用包名/你的签名哈希';
  }

  const msalConfig: Configuration = {
    auth: {
      clientId: '你的Azure AD客户端ID',
      authority: 'https://login.microsoftonline.com/你的租户ID',
      redirectUri: redirectUri
    },
    // 保留原有其他MSAL配置
  };
  this.msalInstance = new PublicClientApplication(msalConfig);
}

4. 监听回调处理登录逻辑 #

使用Capacitor App插件监听应用被重定向唤起的事件，处理登录完成后的回调：

import { App, AppUrlOpenEvent } from '@capacitor/app';
import { Router } from '@angular/router';

ngOnInit() {
  if (this.platform.is('capacitor')) {
    // 监听应用唤起事件
    App.addListener('appUrlOpen', async (event: AppUrlOpenEvent) => {
      // 校验是否为Azure AD回调地址
      if (event.url.startsWith(this.msalConfig.auth.redirectUri)) {
        // 传递回调地址给MSAL处理登录凭证
        const authResult = await this.msalInstance.handleRedirectPromise(event.url);
        if (authResult) {
          // 登录成功跳转应用内首页
          await this.router.navigate(['/home']);
          // 关闭外部浏览器窗口
          window.close();
        }
      }
    });
  }
}

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