Question

我目前正在关注此document，但是我有点麻烦，请帮助我。有人可以告诉我如何将这些javascript代码放入相应的文件中。

首先，将Interceptor类作为您的应用程序的提供程序：

    import { MsalInterceptor, MsalModule } from "@azure/msal-angular";
    import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
    
        @NgModule({
            // ...
            providers: [
                {
                    provide: HTTP_INTERCEPTORS,
                    useClass: MsalInterceptor,
                    multi: true
                }
            ]
        }

接下来，以MsalModule.forRoot()的形式向protectedResourceMap提供受保护资源的映射，并将这些范围包括在consentScopes中。您在protectedResourceMap集合中提供的URL <区分大小写。

    @NgModule({
      // ...
      imports: [
        // ...
        MsalModule.forRoot({
          auth: {
            clientId: 'Enter_the_Application_Id_here', // This is your client ID
            authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // This is your tenant info
            redirectUri: 'Enter_the_Redirect_Uri_Here' // This is your redirect URI
          },
          cache: {
            cacheLocation: 'localStorage',
            storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
          },
        },
        {
          popUp: !isIE,
          consentScopes: [
            'user.read',
            'openid',
            'profile',
          ],
          unprotectedResources: [],
          protectedResourceMap: [
            ['https://graph.microsoft.com/v1.0/me', ['user.read']]
          ],
          extraQueryParameters: {}
        })
      ],
    });

最后，使用HTTP请求检索用户的个人资料：

    const graphMeEndpoint = "https://graph.microsoft.com/v1.0/me";
    
    getProfile() {
      this.http.get(graphMeEndpoint).toPromise()
        .then(profile => {
          this.profile = profile;
        });
    }

静默获取用户令牌

    const requestObj = {
        scopes: ["user.read"]
    };
    
    this.authService.acquireTokenSilent(requestObj).then(function (tokenResponse) {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch(function (error) {
        console.log(error);
    });

添加以下代码以注销用户：

    logout() {
      this.authService.logout();
    }

谢谢！

Answer 1

要使用Interceptor类为在MSAL Angular中使用Angular http客户端的传出请求自动获取令牌，您需要在相应页面中进行更改

app.module.ts

import { MsalInterceptor, MsalModule } from "@azure/msal-angular";
import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";

@NgModule({
    // ...
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        }
    ]
}

在同一个文件中，在导入文件内设置 Msal.Module.forRoot ，如下所示：

@NgModule({
  // ...
  imports: [
    // ...
    MsalModule.forRoot({
      auth: {
        clientId: 'Enter_the_Application_Id_here', // This is your client ID
        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // This is your tenant info
        redirectUri: 'Enter_the_Redirect_Uri_Here' // This is your redirect URI
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['https://graph.microsoft.com/v1.0/me', ['user.read']]
      ],
      extraQueryParameters: {}
    })
  ],
});

要通过HTTP请求检索用户的个人资料，您可以使用任何组件，也可以在下面的组件中使用

。

 constructor(private authService: MsalService, private http: HttpClient) { }

  getProfile() {
    this.http.get(GRAPH_ENDPOINT)
      .toPromise().then(profile => {
        this.profile = profile;
      });
  }

要在app.component.ts

中设置注销功能

 logout() {
    this.authService.logout();
  }

请参阅此document以获得更多信息，其中有一个GitHub sample可帮助您参考实施

天蓝色广告角度教程

1 个答案: