javascript - 从 Microsoft Azure 获取用户的照片

Question

在网站的标题中，我显示有关用户的信息(电子邮件、姓名)(该信息取自他们的 microsoft openwork)。不过，我还想添加用户的照片。无论我做什么，我都会收到错误

GET https://graph.microsoft.com/v1.0/me/photo/$value 401 (Unauthorized)

Uncaught (in promise) AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, 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>
    );
}

获取 token

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`;

Answer 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

代码生成如下:

现在，我通过传递如下参数，通过 Postman 使用 PKCE 流生成了访问 token :

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

当我解码访问 token 时，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';

• 确保aud必须是https://graph.microsoft.com
• 确保您已向 API 权限授予管理员同意:

• 当您授予 Directory.Read.All 时，User.Read API 权限会在 token 时检查 scp 参数中是否反射(reflect)了相同的权限已解码。
• 确保访问 token 未过期，并且刷新访问 token 的过程配置正确。

引用:

Get profilePhoto - Microsoft Graph v1.0