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

问题描述

我在Azure上托管了一个单页JavaScript(TypeScript)应用程序作为应用程序服务，并且我正在使用带有@ msal-browser npm包的Azure AAD和Implicit Flow MSAL身份验证来对我的用户进行身份验证.我已将我的MSAL实例配置为使用登录重定向.登录有效，但响应速度非常慢:我的应用需要多于7秒钟的时间才能收到响应.我已经将我的MSAL配置作为下面的代码添加了.

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

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

  const cacheLocation:'localStorage'='localStorage';const msalConfig:Msal.Configuration = {身份验证:{clientId:environment.clientId，权限:`https://login.microsoftonline.com/$ {environment.tenant}/`，knownAuthorities:[`https://login.microsoftonline.com/$ {environment.tenant}/`]，//validateAuthority:true，redirectUri:environment.redirectUri，navigationToLoginRequestUrl:否，postLogoutRedirectUri:environment.postLogoutRedirectUri}，缓存:{cacheLocation，storeAuthStateInCookie:否}，系统: {loggerOptions:{loggerCallback :(级别:Msal.LogLevel，消息:string，containsPii:boolean):void =>{console.log(消息)}，piiLoggingEnabled:是，logLevel:Msal.LogLevel.Verbose}}};this.msalInstance =新的Msal.PublicClientApplication(msalConfig);this.msalInstance.handleRedirectPromise().then((tokenResponse)=> {console.log('登录回调')如果(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屋！