Веб-приложение Azure с Acitve Directory Express с Graph API для получения фотографии пользователя

Question

В моем веб-приложении Azure 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

Я смог вытащить изображение, используя MSDAL для обработки токена. Новый блэйд регистрации приложений (по состоянию на 10.10.2009 находится в предварительном просмотре) имеет быстрый старт, который обеспечит правильную настройку регистрации вашего приложения и позволит вам загрузить пример кода.

В этом блейде убедитесь, что вы добавили разрешения API Graph, как показано ниже. Когда вы нажмете на Quick Start, вы получите образец, подобный этому 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.

Answer 2

Райан, jwt не работает, когда я вставляю полный токен из auth / me.

Answer 3

Ваша регистрация в приложении AD может не иметь необходимых прав доступа . Чтобы добавить эти разрешения в ваше приложение, см. эти шаги. Я думаю, что вам, возможно, придется использовать конечную точку oauth (login.microsoftonline.com/ enjwidthtenant отпуска‹/oauth2/v2.0/token) вместо .auth / me. С конечной точкой oauth вы можете даже выбрать scopes , который нужен вашему токену для вызова API графа. Вы можете использовать http://jwt.ms до декодировать токен и посмотреть, есть ли у него необходимые разрешения делегата.

Кроме того, я наткнулся на эту серию блогов , в которой перечислены различные учебные пособия по работе с 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 и управления ими.

Надеюсь, это поможет.

Answer 4

Райан, я добавил полномочия делегата в настройки разрешений моего веб-приложения для чтения профилей пользователей, но я все еще получаю сообщение об ошибке при попытке получить изображение профиля из графика. Не уверен, какие разрешения ему нужны, но я в основном дал ему полный доступ к профилю использования. График просто не похож на токен, предоставленный конфигурацией 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 5

Чтобы получить фотографию в версии 1.0, она поддерживает только рабочие или школьные почтовые ящики пользователя, а не личные почтовые ящики.

Для получения подробной информации, вы можете прочитать здесь .