0

我正在尝试将基于 React 的 Graph API 工具包与在 Angular JS 1.x 上构建的现有应用程序集成。React 应用程序部署为现有 Angular 应用程序中的 Web 组件。

现有的 Angular 应用程序通过 Azure AD 使用 "@azure/msal-angularjs": "^0.1.1" 进行身份验证，当我集成包含 MGT 控件的 React 应用程序时，除非我明确使用登录组件和登录后他们反应应用程序的工作。

我想避免我的反应应用程序中的登录组件，因为用户已经使用 Azure AD 登录到现有的角度应用程序。

我确实尝试使用 Simple Provider 但没有运气。有人可以分享一些示例代码并提供正确的方法来实现相同的目标。在现有 Angular 应用程序的身份验证代码下方。

 window.msalApplicationConfig = {
          scopes: ['ChannelMessage.Send','Chat.Read','Chat.ReadWrite','Directory.Read.All','email','Group.Read.All','GroupMember.Read.All','openid','profile','Sites.Manage.All','Sites.Read.All','Sites.ReadWrite.All','Team.ReadBasic.All','TeamSettings.Read.All','TeamSettings.ReadWrite.All','User.Read','User.Read.All','User.ReadBasic.All','User.ReadWrite.All']
        };

        msalAuthenticationServiceProvider.init({
          clientID: appConfig.authContextConfig.clientId,
          redirectUri: window.location.origin + '/#/',
          authority: appConfig.authContextConfig.instance + appConfig.authContextConfig.tenant,
          postlogoutRedirectUri: window.location.origin + '/' + appConfig.authContextConfig.postLogoutRedirectUri
        });

function msalLoginSuccess(config, defer) {
      return function (loginToken) {
        msalAuthenticationService.acquireTokenSilent(window.msalApplicationConfig.scopes).then(function (accessToken) {
          localStorage.setItem('msal_token', accessToken);
          config.extraHeaders[appService.getAuthorizationHeaderName()] = 'Bearer ' + loginToken;
          ajaxService.setGlobalHeader(appService.getAuthorizationHeaderName(), config.extraHeaders[appService.getAuthorizationHeaderName()]);
          defer.resolve();
        });
      }
    }

简单的提供者代码

Providers.globalProvider = new SimpleProvider((scopes:string[]) => { 
    //return accessToken for scopes using your msal instance
    return Promise.resolve(localStorage.getItem('msal_token'));
  
   });

 Providers.onProviderUpdated(()=>{
    if(Providers.globalProvider.state==ProviderState.SignedIn)
{
  console.log("Signed IN");
  setSignedIn(true)

}
4

1 回答 1

0

由于您正在处理身份验证，因此您需要在登录状态更改时处理 SimpleProvider 的状态更改。为此，请将setStatesetter 与适当的ProviderState.

Providers.globalProvider.setState(ProviderState.SignedIn)

组件侦听此状态，并且仅在提供者登录时才调用图。

于 2021-01-25T16:15:21.067 回答