有没有办法提高 MSAL 浏览器 js 登录的性能? [英] Is there a way to improve the performance of MSAL-browser js login?

问题描述

我在 Azure 上作为应用服务托管了一个单页 JavaScript (TypeScript) 应用程序，并且我正在使用带有 @msal-browser npm 包的 Azure AAD 的隐式流 MSAL 身份验证来对我的用户进行身份验证.我已将我的 MSAL 实例配置为使用登录重定向.登录有效，但响应非常慢:我的应用需要超过 7 秒才能收到响应.我已将我的 MSAL 配置作为代码片段包含在下面.

在重定向发生之前，handleRedirectPromise 承诺会多次触发，响应为空.用户登录后，他们会立即被重定向到我的应用程序中的正确 URL，但承诺需要很长时间才能解决.我的用户感到沮丧，因为他们认为什么都没有发生.

有没有一种方法可以在不涉及使用弹出窗口的情况下提高登录性能?我尝试使用弹出版本的 MSAL，但它同样慢.我希望我的登录是无缝的.转到站点，立即重定向到 MS 登录，重定向回我的站点，立即收到登录成功，最后在成功验证时加载应用程序.

const cacheLocation: 'localStorage' = 'localStorage';常量 msalConfig:Msal.Configuration = {授权:{clientId: environment.clientId,权限:`https://login.microsoftonline.com/${environment.tenant}/`，knownAuthorities:[`https://login.microsoftonline.com/${environment.tenant}/`]，//validateAuthority: true,redirectUri:environment.redirectUri，navigateToLoginRequestUrl: false,postLogoutRedirectUri:environment.postLogoutRedirectUri},缓存:{缓存位置，storeAuthStateInCookie: 假},系统: {记录器选项:{loggerCallback:(级别:Msal.LogLevel，消息:字符串，包含Pii:布尔值):void =>{控制台日志(消息)},piiLoggingEnabled:真，日志级别:Msal.LogLevel.Verbose}}};this.msalInstance = new Msal.PublicClientApplication(msalConfig);this.msalInstance.handleRedirectPromise().then((tokenResponse) => { console.log('登录回调')if (tokenResponse !== null) {<在这里做事>}})

解决方案

你可以使用

Http 请求

回应

I have a single page JavaScript (TypeScript) application hosted on Azure as an app service, and I am using Implicit Flow MSAL authentication with Azure AAD with the @msal-browser npm package to authenticate my users. I have configured my MSAL instance to use login redirect. The login works, but the response is very slow: it takes >7 seconds for my app to receive a response. I have included my MSAL config as a code snipit below.

The handleRedirectPromise promise is triggered several times with a null response before the redirect happens. After the user signs in, they are immediately redirected to the correct URL inside my app, but the promise takes a really long time to resolve. My users are getting frustrated because they think nothing is happening.

Is there a way to improve the performance of the login that doesn't involve using the popup? I tried using the popup version of MSAL, but it is just as slow. I would like my login to be seamless. Go to site, immediate redirect to MS login, redirect back to my site, immediate receipt of login success, and finally app loads on successful authentication.

const cacheLocation: 'localStorage' = 'localStorage';
const msalConfig: Msal.Configuration = {
      auth: {
          clientId: environment.clientId,
          authority: `https://login.microsoftonline.com/${environment.tenant}/`,
          knownAuthorities: [`https://login.microsoftonline.com/${environment.tenant}/`],
          //validateAuthority: true,
          redirectUri: environment.redirectUri,
          navigateToLoginRequestUrl: false,
          postLogoutRedirectUri: environment.postLogoutRedirectUri
      },
      cache: {
          cacheLocation,
          storeAuthStateInCookie: false
      },
      system: {
        loggerOptions: {
          loggerCallback: (level: Msal.LogLevel, message: string, containsPii: boolean): void => {
            console.log(message)
          },
          piiLoggingEnabled: true,
          logLevel: Msal.LogLevel.Verbose 
        }
      }
    };
    this.msalInstance = new Msal.PublicClientApplication(msalConfig);

    this.msalInstance
    .handleRedirectPromise()
    .then((tokenResponse) => { console.log('log in callback')
      if (tokenResponse !== null) {
         <DO THINGS HERE>
      }
    })

解决方案

You can use ROPC flow to login your MS Account.

Use ROPC, you can send http request to get access_token and id_token.

However, Microsoft does not recommend this method, and other authentication methods will have pop-up windows.

Http Request

Response

这篇关于有没有办法提高 MSAL 浏览器 js 登录的性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！