使用 Azure AD 实例进行 Ionic 和 MSAL 身份验证

Question

我想从我的 Ionic 移动应用程序登录 Azure AD。

我一直在尝试使用 msal 模块中的 UserAgentApplication.loginPopup() 来实现我的实现，就像用户最初在此处描述的那样：Ionic 和 MSAL 身份验证，我终于在 Ionic 中遇到了重定向问题（我可以使用 ng 服务和浏览器完成该过程，但当我在移动设备上测试它时却没有：重定向到我的基本应用程序会引发错误并且永远不会回来；这似乎是一个已知问题）

Paolo Cuscela提出的解决方法是避免使用此 PopupLogin 实用程序，并使其与 InAppBrowser 和 CustomNavigationClient 一起使用，但在这种情况下，我不知道如何实例化我的 msalService.instance使用正确的 msal 配置，就像我之前使用 UserAgentApplication 所做的那样（clientId、authority、redirectUri 等...）。

你能帮我解决这个问题吗？我快疯了。

提前谢谢您。

我正在尝试使用 Azure AD 实例登录，但在 Ionic 移动应用程序中遇到很多问题。

Answer 1

最后，我使用

InAppBrowser做到了。

private iab: InAppBrowser;
(...)
return new Promise<string>((resolve, reject) => {
      const authUrl = `${environment.activeDirectory.authority + environment.activeDirectory.tenantId}/oauth2/v2.0/authorize?`
        + `client_id=${environment.activeDirectory.clientId}&`
        + `response_type=token&`
        + `redirect_uri=${encodeURIComponent(environment.activeDirectory.redirectUri)}&`
        + `scope=${environment.activeDirectory.scope}`;

      const browserOptions = 'location=yes,mediaPlaybackRequiresUserAction=yes,' +
          'shouldPauseOnSuspend=yes,usewkwebview=yes,clearcache=yes,clearsessioncache=yes,fullscreen=yes,hidenavegationbuttons=yes';

      const browser = this.iab.create(authUrl, '_blank', browserOptions); 

      browser.on('loadstart').subscribe((event: any) => {
        if (event.url.includes('#access_token')) {
          // do something
        }
      });
  });

此方法使用完整的 authUrl 来访问 AzureAD 登录。该response_type=token 使得access_token 在redirect_uri 中返回。这在浏览器中不起作用，因为 X-Frame-Option 错误导致无法访问 Azure 登录，但如果我将其安装在设备中，它就可以工作。

我知道它可能会更复杂，但目前对我有用。