Получить фото пользователя из Microsoft Azure
В шапке сайта у меня выводится информация (почта, имя) о пользователе (информация взята с их ажура майкрософта). Однако я также хотел бы добавить фотографию пользователя. Что бы я ни делал, я получаю ошибку
ПОЛУЧИТЬ https://graph.microsoft.com/v1.0/me/photo/$value 401 (Не авторизовано)
Uncaught (в обещании) AxiosError {сообщение: 'Ошибка запроса с кодом состояния 401', имя: 'AxiosError', код: 'ERR_BAD_REQUEST', конфигурация: {…}, запрос: XMLHttpRequest, …}
Просмотрел уже много ответов и советов по похожей теме, но ошибка не исчезает. Можете ли вы сказать мне, как я могу отобразить фотографию пользователя?
export default function UserPhoto() {
const [imageUrl, setImageUrl] = useState(null)
useEffect(() => {
Axios.get('https://graph.microsoft.com/v1.0/me/photo/$value', {
headers: { 'Authorization': `Bearer ${localStorage.getItem('access_token')}` },
responseType: 'blob'
}).then(o => {
const url = window.URL || window.webkitURL;
const blobUrl = url.createObjectURL(o.data);
setImageUrl(blobUrl)
})
}, [])
return (
<div className = "App">
{imageUrl && <img alt='my-user-avatar' src = {imageUrl} />}
</div>
);
}
Заголовок.jsx
export default function Header() {
return (
<div >
<UserInformation />
<UserPhoto/>
</div>
);
}
получение токена
import axios from "axios";
import jwt_decode from "jwt-decode";
import { config } from "../config";
const clientId = config.microsoftAuth.clientId;
const tenantId = config.microsoftAuth.tenantId;
const scope = 'https://graph.microsoft.com/User.Read offline_access';
const tokenRequestScope = `${clientId}/.default`;
@GauravMantri Спасибо, что обратили внимание на мой вопрос. Не совсем понял ваш вопрос, так как не силен в теме токенов. Вот пример кода: const baseUrl = ${host}/${tenantId}/oauth2/v2.0; пусть tokensRequestUrl = ${baseUrl}/token?; const response = await axios.post(tokensRequestUrl, body, config);
Я считаю, что проблема только с токеном. Пожалуйста, проверьте токен, используя что-то вроде jwt.io. Пожалуйста, проверьте области в расшифрованном токене.
@GauravMantri Если я правильно вас понял, то проанализированный токен имеет следующий столбец: «scp»: «User.Read»
Объем правильный. Какие разрешения Graph API назначаются приложению в Azure AD?
@GauravMantri Я полагаю, вы говорите об offline_access? const scope = 'graph.microsoft.com/User.Read offline_access'
Ага. Не могли бы вы отредактировать свой вопрос и включить полный код для получения токена? Я хочу видеть данные, отправленные в этом запросе.
Проверить, не истек ли срок действия токена доступа?
@Rukmini В коде есть проверка токена доступа с истекшим сроком действия, и если эта проверка не проходит, то токен доступа обновляется автоматически.
Предоставляется ли согласие администратора для разрешений API?
@Rukmini, где я могу это проверить (предоставлено ли согласие администратора для разрешений API?)
Перейдите в Приложение Azure AD -> Разрешения API и проверьте это.
@Rukmini Это займет некоторое время, я вернусь к вам с ответом позже.
Конечно, дайте мне знать, если это сработает.
@Rukmini Да, такое разрешение не было предоставлено. Я попросил исправить. Но я все еще получаю эту ошибку 401, просто немного другую: Не удалось загрузить ресурс: сервер ответил со статусом 401 (Неавторизованный)
Давайте продолжим обсуждение в чате.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я создал приложение Azure AD SPA и предоставил разрешения API, как показано ниже:
Теперь я использовал следующую конечную точку для авторизации пользователей:
https://login.microsoftonline.com/TenantID/oauth2/v2.0/authorize?
client_id=ClientID
&response_type=code
&redirect_uri=https://jwt.ms
&response_mode=query
&scope=https://graph.microsoft.com/.default
&state=12345
&code_challenge=CodeChallenge
&code_challenge_method=S256
Код был сгенерирован, как показано ниже:
Теперь я сгенерировал токен доступа, используя поток PKCE через Postman, передав параметры, как показано ниже:
https://login.microsoftonline.com/TenantID/oauth2/v2.0/token
client_id:ClientID
scope:https://graph.microsoft.com/.default
grant_type:authorization_code
code:code
code_verifier:S256
redirect_uri:https://jwt.ms
Когда я расшифровал токен доступа, scp выглядит как Directory.Read.All, User.Read, profile, openid, email, как показано ниже:
Я могу успешно получить фотографию профиля, как показано ниже:
GET https://graph.microsoft.com/v1.0/me/photo/$value
Ошибка 401Unauthorized обычно возникает, если для выполнения действия нет необходимых разрешений.
Чтобы устранить ошибку, проверьте следующее:
В вашем коде измените следующие изменения:
const scope = 'https://graph.microsoft.com/User.Read offline_access';
const tokenRequestScope = 'https://graph.microsoft.com/.default';
- Убедитесь, что звук должен быть
https://graph.microsoft.com - Убедитесь, что вы предоставили согласие администратора на разрешения API:
- Как вы предоставили
Directory.Read.All,User.Readразрешения API проверяют, отражается ли то же самое в параметре scp при декодировании токена. - Убедитесь, что срок действия токена доступа не истек, а процесс обновления токена доступа настроен правильно.
Ссылка:
Ошибка 401 означает, что есть проблема с разрешениями. Как вы получаете токен доступа? В остальном ваш код выглядит нормально.