Azure Web App with Active Directory Express with Graph API 以获取用户照片答案

【问题标题】：Azure Web App with Acitve Directory Express with Graph API to get user photoAzure Web App with Active Directory Express with Graph API 以获取用户照片
【发布时间】：2019-03-13 14:17:12
【问题描述】：

我的 Azure Web 应用使用 Express 选项启用了 Active Directory。我可以从 auth.me 获取用户声明/用户名。然后我如何获取用户的照片/头像？我得到的令牌在 Graph API 调用中不起作用。我从 Graph API 得到这个错误。这是我的代码。

请帮忙！花了几个小时搜索和阅读文档，但似乎没有任何东西可以解决 Express AD 场景。谢谢唐尼

{
"error": {
"code": "InvalidAuthenticationToken",
"message": "CompactToken parsing failed with error code: 80049217",
"innerError": {
  "request-id": "e25f1fe5-4ede-4966-93c2-6d92d34da6ae",
  "date": "2019-03-13T14:13:26"
}
}
}

axios.get('/.auth/me').then(resp => {

      if(resp.data){
           loggedInUser = {
            accessToken:resp.data[0].access_token,
            userId: resp.data[0].user_id,
            username: resp.data[0].user_claims[9].val,
            lastname: resp.data[0].user_claims[8].val,
            fullname: resp.data[0].user_claims[11].val,
            avatar:'https://cdn.vuetifyjs.com/images/lists/1.jpg'
          } 
          let config = {
            'headers':{
              'Authorization': 'Bearer ' + loggedInUser.accessToken
            }
          }

           axios.get('https://graph.microsoft.com/v1.0/me/photos/48x48/$value',config).then(resp => {
            let photo = resp.data;
            const url = window.URL || window.webkitURL;
            const blobUrl = url.createObjectURL(photo);
            document.getElementById('avatar').setAttribute("src", blobUrl);
            loggedInUser.avatar = blobUrl;
            console.log(blobUrl)
          }); 
      }
      })

【问题讨论】：

您是如何设置 Azure AD 的？我想知道您是否需要在 webapp 下使用 login.microsoftonline.com 而不是 /.auth/me。
我刚刚为一个 azure Web 应用启用了 Active Directory。 AD 可以正常登录。我得到令牌。问题在于图形调用。
您已将 Microsoft 委托权限添加到您的 AD 应用注册中？
不知道这是什么意思或怎么做？请提供更多细节？谢谢

标签： azure-active-directory azure-web-app-service

【解决方案1】：

我能够使用 MSDAL 提取图像来处理令牌。新的应用注册刀片（截至 2019 年 4 月 10 日为预览版）具有快速启动功能，可确保您的应用注册正确配置并允许您下载示例代码。

在此刀片中，确保您已添加图形 API 权限，如下所示。当您单击“快速启动”时，您将获得类似于此gist 的示例。它利用了处理令牌协商的 MSAL js 库。

    var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority,
        acquireTokenRedirectCallBack, {
            storeAuthStateInCookie: true,
            cacheLocation: "localStorage"
        });

    function signIn() {
        myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
            //Login Success
            showWelcomeMessage();
            acquireTokenPopupAndCallMSGraph();
        }, function (error) {
            console.log(error);
        });
    }

在那之后，奇迹发生在

acquireTokenPopupAndCallMSGraph()

将获取令牌，以便您可以使用它来调用图形 API。现在我的gist 使用了 XMLHttpRequest，我相信你可以用 axios 替换它。

【讨论】：

是的。 Express 将创建注册。您只需打开 Azure Active Directory 刀片，选择 App Registrations，您的 AD Express 注册就会被列出。
谢谢瑞恩！这看起来很全面。谢谢你的要点！我唯一的问题是为什么这需要用户单击登录按钮而不是当前的自动重定向快递？
MSAL js 库中可能有一个可用的 API 方法可以让您连接到快速身份验证，我只是对这个库不太熟悉。但是，如果有限制，我会指出在获取具有必要身份验证的令牌时必须发送的所需范围。

【解决方案2】：

在v1.0中获取照片，只支持用户的工作或学校邮箱，不支持个人邮箱。

详情可以阅读here。

【讨论】：

谢谢。这是我用来编写附加代码的文档。但是，我仍然收到错误消息。我的问题是，它是否适用于 Azure Web App 中 AzureAD Express 的令牌。我的是公司邮箱。
您能分享您的代码以请求令牌吗？您的请求可能有问题？

【解决方案3】：

您的 AD 应用注册可能没有必要的委托 permissions。要将这些权限添加到您的应用程序，请参阅these 步骤。我认为您可能需要使用 oauth (login.microsoftonline.com/{{tenant}}/oauth2/v2.0/token) 端点而不是 .auth/me。使用 oauth 端点，您甚至可以选择传入您的令牌所需的 scopes 以调用图形 API。您可以使用http://jwt.ms 到decode 的令牌，看看是否有必要的委托权限。

另外，我遇到了这个blog series，其中列出了使用 Microsoft Graph 的各种教程。您也可以查看https://github.com/microsoftgraph/nodejs-apponlytoken-rest-sample。

此外，https://github.com/microsoftgraph/nodejs-connect-rest-sample 使用了 passport 和 passport-azure-ad npm 包。这实际上可能比从 Azure AD 获取和管理令牌更有利。

希望这会有所帮助。

【讨论】：

我尝试了这个端点而不是 auth/me, login.microsoftonline.com/BelmontTechnology/oauth2/v2.0/token' ，但我的 CORS 被阻止了。
非常令人沮丧！有很多令人困惑的方法可以做到这一点。我只是想要按照 Azure Web App 说明传递我获得的 auth/me 令牌，然后传递它以获取用户的照片！
我很沮丧，隧道尽头有光。 jwt.ms 是否有助于解码您从 .auth/me 获得的令牌？您是否能够为您的 App AD 注册添加额外的委托权限？
我确实添加了权限。见截图其他回复。我还没有尝试jwt。会试试的
知道为什么令牌在 jwt.ms 中不起作用吗？查看我发布的屏幕截图

【解决方案4】：

Ryan，我在我的 Web 应用程序的权限设置中添加了委托权限以读取用户配置文件，但在绑定从图表中获取配置文件图片时，我仍然收到错误消息。不确定它需要什么权限，但我基本上给了它对用户个人资料的完全访问权限。 Graph 似乎不喜欢 AD Express 配置 (login.microsoftonline.com) 提供的令牌

{
"error": {
"code": "InvalidAuthenticationToken",
"message": "CompactToken parsing failed with error code: 80049217",
"innerError": {
"request-id": "e25f1fe5-4ede-4966-93c2-6d92d34da6ae",
"date": "2019-03-13T14:13:26"
}
}
}

【讨论】：

【解决方案5】：

Ryan，当我从 auth/me 粘贴完整令牌时，jwt 失败。

【讨论】：