angular - 在 Angular 6 中获取并使用 Microsoft Graph token 从 Azure 获取组成员身份

Question

我有一个 Angular 6 应用程序，我使用 microsoft-adal-angular6 对用户进行身份验证针对 Azure Active Directory。这工作得很好。

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

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

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

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

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

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 中时，我收到以下错误。

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 用户，但在我看来，我可能构建了错误的服务或者请求的 header 或正文？

我目前还尝试将 token 存储在获取 token 的类上的字符串中，但如果有人可以帮助我以正确的方式存储该 token 以供 Angular 应用程序使用，我将不胜感激。

Answer 1

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

如果您需要使用Client Credentials或Authorization Code授予，那么您需要在服务器端管理 token 。这可确保 client_secret 不会在客户端上公开。理想情况下，您应该更进一步，将 secret 存储在 Key Vault 中，以提供额外的保护层。

---

更新了高级图表

下面是授权代码如何在这里工作的真正高级概述。从概念上讲，access_token 仅存在于服务器上。因此，当您需要来自 Graph 等 API 的信息时，应用程序的前端会调用应用程序的后端，后者又将调用(以及 token )路由回 Graph。

这样做有几个很大的好处:

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

如果您需要在客户端执行所有操作，那么您需要使用 Implicit Grant 。这要求用户在您的应用程序可以访问 API 之前进行身份验证。