带有Acitve Directory Express和Graph API的Azure Web应用程序可获取用户照片

Question

我的Azure Web App使用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)
          }); 
      }
      })

Answer 1

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

有关详细信息，您可以阅读here。

Answer 2

您的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-azure-ad npm软件包。实际上，这可能更有利于从Azure AD获取和管理令牌。

希望这会有所帮助。

Answer 3

Ryan，我将委托权限添加到了Web应用程序的权限设置中，以读取用户个人资料，但在尝试从图形中获取个人资料图片时，我仍然收到错误消息。不知道它需要什么权限，但是我基本上给了它使用使用配置文件的完全权限。图似乎不喜欢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"
}
}
}

Answer 4

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

Answer 5

我能够使用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。