在Angular 6中获取和使用Microsoft Graph令牌以从Azure获取组成员身份 [英] Getting and using Microsoft Graph token in Angular 6 to get group membership from Azure

问题描述

我有一个Angular 6应用，我在其中使用 microsoft-adal-对用户进行身份验证针对Azure Active Directory的angular6 .很好.

I have an Angular 6 app where I am authenticating the user using microsoft-adal-angular6 against Azure Active Directory. That is working fine.

然后我获取用户OID并运行:

I then take the user OID and run:

https://graph.microsoft.com/v1.0/users/' + this.userOID + '/memberOf

要运行该调用，我需要拥有我的应用程序令牌和适当的权限.

To run that call I need to have my applications token and the appropriate permission.

https://login.microsoftonline.com/' + this.appID + '/oauth2/v2.0/token

我的代码看起来像这样...

my code looks like this...

getAuzrdddeToken(): Observable<any> {
    const url = 'https://login.microsoftonline.com/' 
        + environment.adalConfigGraph.orgID + '/oauth2/v2.0/token';

    const headers = new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'});

    const body = new HttpParams();
    body.set('client_id',  environment.adalConfigGraph.clientID);
    body.set('grant_type', 'client_credentials');
    body.set('scope', 'https://graph.microsoft.com/.default');
    body.set('client_secret',  environment.adalConfigGraph.secret);

    return this._http.post(url, body, {headers: headers}).pipe(
        tap(data => console.log('======== Token: ' + JSON.stringify(data))),
    );
}

我的权限工作正常，并且呼叫本身在Postman中正常工作，但是当我尝试将其构建到Angular中时，出现以下错误.

I have the permission working fine, and the call itself is working in Postman, but when I try to build this into Angular I am getting the following error.

在' https://login.microsoftonline.com/上访问XMLHttpRequest来自来源" http://localhost:4201 的xxx/oauth2/v2.0/token "具有已被CORS政策阻止:对预检请求的响应未通过访问控制检查:所请求的资源上没有"Access-Control-Allow-Origin"标头.

Access to XMLHttpRequest at 'https://login.microsoftonline.com/xxx/oauth2/v2.0/token' from origin 'http://localhost:4201' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我不是特别高级的Angular/AAD用户，但在我看来，也许我在构造服务时出错，还是请求的标头或正文?

I'm not a particularly advanced Angular/AAD user, but it seems to me that maybe I am constructing my service wrong or the header or the body of the request?

我目前也在尝试将令牌存储在获取令牌的类中的字符串中，但是如果有人可以帮助我以正确的方式将其存储在Angular应用中以供使用，将不胜感激. /p>

I am also currently trying to store the token in a string on the class where I get the token, but if someone can help me with the correct way to store that for consumption around the Angular app, that would be appreciated.

推荐答案

您不应像这样在客户端使用client_credentials.这是非常危险的，因为您授权的任何范围都可能在您不知情的情况下被任何恶意行为者利用(即mail.read将使我能够在不知道的情况下阅读每个用户的电子邮件).

You shouldn't be using client_credentials on the client side like this. It is extremely dangerous since any scope you authorized can be leveraged by any malicious actor without your knowledge (i.e. mail.read would give me the ability to read every single user's email without you knowing about it).

如果您需要使用授权代码授予，则需要在服务器端管理令牌.这样可以确保client_secret不会在客户端上公开.理想情况下，您应该更进一步，并将机密信息存储在Key Vault中，以提供额外的保护.

If you need to use either the Client Credentials or Authorization Code grants, then you need to manage the tokens server-side. This ensures the client_secret isn't exposed on the client. Ideally, you should go one step further and store the secret in a Key Vault to provide an extra layer of protection.

已更新高级图

下面是有关授权代码在此处如何工作的非常高级的概述.从概念上讲，access_token仅驻留在服务器上.因此，当您需要来自Graph之类的API的信息时，您的应用程序的前端会调用您的应用程序的后端，从而将调用(以及令牌)路由回Graph.

Below is a really high-level overview of how the Authorization Code might work here. Conceptually, the access_token only lives on the server. So when you need information from an API such as Graph, your app's frontend calls your app's backend, which in turn routes the call (along with the token) back to Graph.

通过这种方式有很多好处:

There are a couple of big upsides to doing it this way:

1. 您可以完全控制 将哪些数据发送到客户端
2. 您可以在发送数据之前编辑/修改数据(例如，您可能希望始终屏蔽潜在的风险数据).
3. 您可以将自己的数据与Graph合并，然后再返回，从而允许您一次调用返回整个数据集，而不必进行多次往返.
4. 如果请求offline_access范围，则可以获取(并存储)refresh_token.这样，您可以在需要时刷新access_token，而不必要求用户进行身份验证.反过来，这使您即使在用户不在线时也可以使用他们的数据.如果您有一些长时间运行的流程，那么您宁愿在停机期间运行，也可以在应用程序的高峰运行期间运行，这将带来巨大的好处.

1. You get to control exactly what data gets sent to the client
2. You can edit/revise the data before sending it off (i.e. maybe you want to always mask potentially risky data).
3. You can merge your own data with Graph before returning it, allowing you to make a single call return the entire dataset rather than having to make multiple round trips.
4. If you request the offline_access scope, you can get (and store) a refresh_token. This lets you refresh the access_token whenever you need without having to ask the user to authenticate against. In turn, this allows you to work with the user's data even when they are not online; a huge benefit if you have some long-running processes you'd rather run during downtimes rather than during your app's peak operation.

如果您需要在客户端执行所有操作，则需要使用隐式授予.这要求用户进行身份验证，然后您的应用程序才能访问API.

If you need to execute everything client-side, then you need to use the Implicit Grant. This requires the user to authenticate before your application can access the API.

这篇关于在Angular 6中获取和使用Microsoft Graph令牌以从Azure获取组成员身份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！