我想在 Angular 7+ http 调用中从 Microsoft graph 调用 Token API [英] I want to call Token API from Microsoft graph in angular 7+ http call

问题描述

我想从 Angular 应用程序调用

首先运行这个演示.

成功运行这个demo后，进入profile.component.ts，在下面添加代码:

 getAccessTokenAndCallGraphAPI(){this.authService.acquireTokenPopup({范围:['GroupMember.Read.All']}).then(结果=>{console.log("访问令牌:"+ result.accessToken)常量 httpOptions = {标头:新的 HttpHeaders({'内容类型':'应用程序/json'，授权:'Bearer'+result.accessToken})}常量 reqBody = {securityEnabledOnly":真}this.http.post("https://graph.microsoft.com/v1.0/users/<你要查询的用户>/getMemberGroups",reqBody,httpOptions).toPromise().then(result=>{console.log(result)});})}

初始化页面时调用该函数:

ngOnInit() {this.getProfile();this.getAccessTokenAndCallGraphAPI();}

结果:

如果您有任何其他问题，请告诉我.

From angular application i want to call https://login.microsoftonline.com/##tenant##/oauth2/v2.0/token api to get access token from http call and using that token i want to call https://graph.microsoft.com/v1.0/users/##UserId##​​​​​​​​​​​​​/getMemberGroups API without using any npm package of angular.

I tried using http service, but getting below error

Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxxx/oauth2/v2.0/token' from origin 'https://xxx.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there any another way to call Graph API for token and user get login user groups ?

解决方案

It is not allowed to call https://login.microsoftonline.com/<tenant>/oauth2/v2.0/token directly from a signal page application due to CORS. You should use MSAL for angular to do this. My code is based on this angular official demo.

Pls go to src/app/app.module.ts to config your Azure Ad:

and run this demo first.

After you run this demo successfully,go to profile.component.ts, add codes below:

  getAccessTokenAndCallGraphAPI(){

    this.authService.acquireTokenPopup({
      scopes: ['GroupMember.Read.All']
    }).then(result=>{
      console.log("access token: "+ result.accessToken)

      const httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          Authorization: 'Bearer '+result.accessToken
        })}

      const reqBody = {
        "securityEnabledOnly": true
      }
      this.http.post("https://graph.microsoft.com/v1.0/users/<user you want to query>/getMemberGroups",reqBody,httpOptions).toPromise().then(result=>{console.log(result)});
    })
  }

Call this function when init page:

ngOnInit() {
    this.getProfile();
    this.getAccessTokenAndCallGraphAPI();
  }

result:

Let me know if you have any other questions.

这篇关于我想在 Angular 7+ http 调用中从 Microsoft graph 调用 Token API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！