Ionic移动端Azure AD登录：MSAL实例配置求助（替代loginPopup）

1. 安装依赖 #

• 安装MSAL Angular及核心库：

  npm install @azure/msal-angular @azure/msal-browser
  

• 安装Ionic InAppBrowser插件及封装库：

  ionic cordova plugin add cordova-plugin-inappbrowser
  npm install @awesome-cordova-plugins/in-app-browser
  

2. 配置MSAL核心参数 #

在app.module.ts中导入并配置MsalModule，参数逻辑和原UserAgentApplication完全对齐，重点注意移动端专属的redirectUri格式：

import { NgModule } from '@angular/core';
import { MsalModule, MsalService, MSAL_INSTANCE } from '@azure/msal-angular';
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';

export function MSALInstanceFactory() {
  return new PublicClientApplication({
    auth: {
      clientId: '你的Azure AD应用Client ID', // 替换为实际Client ID
      authority: 'https://login.microsoftonline.com/你的租户ID', // 替换为实际租户ID，格式示例：https://login.microsoftonline.com/xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx
      redirectUri: 'msal你的Client ID://auth', // 移动端专用重定向URI，需在Azure AD门户提前配置
      postLogoutRedirectUri: 'msal你的Client ID://auth' // 可选，登出后跳转目标
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: false // 移动端无需Cookie存储
    }
  });
}

@NgModule({
  imports: [
    MsalModule.forRoot(
      new PublicClientApplication({}), // 留空，用工厂函数注入配置
      {
        interactionType: InteractionType.Redirect, // 适配InAppBrowser模拟的重定向流程
        authRequest: {
          scopes: ['user.read'] // 按需添加业务所需权限
        }
      }
    )
  ],
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    MsalService
  ]
})
export class AppModule { }

3. 实现CustomNavigationClient #

创建custom-navigation.client.ts文件，将默认导航逻辑替换为InAppBrowser打开：

import { NavigationClient } from '@azure/msal-browser';
import { InAppBrowser, InAppBrowserOptions } from '@awesome-cordova-plugins/in-app-browser/ngx';

export class CustomNavigationClient extends NavigationClient {
  constructor(private inAppBrowser: InAppBrowser) {
    super();
  }

  async navigateExternal(url: string, options: any) {
    const browserOptions: InAppBrowserOptions = {
      location: 'yes',
      clearsessioncache: 'yes',
      clearcache: 'yes'
    };

    const browser = this.inAppBrowser.create(url, '_blank', browserOptions);

    // 监听页面加载完成，捕获回调
    browser.on('loadstop').subscribe(async (event) => {
      // 检查是否跳转到配置的redirectUri
      if (event.url.startsWith('msal你的Client ID://auth')) {
        browser.close();
        // 让MSAL捕获回调参数完成登录流程
        window.location.href = event.url;
      }
    });

    return Promise.resolve(false); // 告知MSAL由自定义逻辑处理导航
  }
}

4. 注册CustomNavigationClient #

在app.component.ts中替换默认导航客户端：

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { CustomNavigationClient } from './custom-navigation.client';
import { InAppBrowser } from '@awesome-cordova-plugins/in-app-browser/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private msalService: MsalService, private inAppBrowser: InAppBrowser) {}

  ngOnInit() {
    // 替换为自定义InAppBrowser导航客户端
    this.msalService.instance.setNavigationClient(new CustomNavigationClient(this.inAppBrowser));

    // 处理应用启动时的登录回调
    this.msalService.instance.handleRedirectPromise().then(res => {
      if (res) {
        // 登录成功后的业务逻辑，比如获取用户信息
        console.log('登录成功', res.account);
      }
    });
  }
}

5. 实现登录按钮逻辑 #

在登录组件中添加触发登录的方法：

import { Component } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { AuthRequest } from '@azure/msal-browser';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage {
  constructor(private msalService: MsalService) {}

  login() {
    const authRequest: AuthRequest = {
      scopes: ['user.read'] // 和配置中的权限保持一致
    };

    // 调用MSAL重定向登录方法，触发CustomNavigationClient逻辑
    this.msalService.loginRedirect(authRequest);
  }
}

关键配置注意事项 #

• Azure AD门户配置：必须将msal你的Client ID://auth添加到应用注册的「重定向URI」列表中，类型选择「移动和桌面应用」。
• iOS URL Scheme配置：在config.xml中添加：

  <platform name="ios">
    <config-file parent="CFBundleURLTypes" target="*-Info.plist">
      <array>
        <dict>
          <key>CFBundleURLSchemes</key>
          <array>
            <string>msal你的Client ID</string>
          </array>
        </dict>
      </array>
    </config-file>
  </platform>
  

• Android Intent配置：在AndroidManifest.xml中添加：

  <activity
      android:name="com.microsoft.identity.client.BrowserTabActivity">
      <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="msal你的Client ID" />
      </intent-filter>
  </activity>
  

内容的提问来源于stack exchange，提问作者Agent-47