调用Microsoft Graph获取用户照片遇401未授权错误的解决咨询

可能的原因及对应解决方案 #

1. 权限范围配置错误 #

你的代码中定义了scope = 'https://graph.microsoft.com/User.Read offline_access'，但请求token时用的是tokenRequestScope = ${clientId}/.default``，这会导致获取到的token可能不包含User.Read权限：

• 如果使用授权码流程（前端获取用户信息的标准流程），请求token时必须使用User.Read offline_access作为scope，而非clientId/.default。修改token请求的scope参数为你定义的scope变量。
• 解码access_token，检查scp字段是否包含User.Read：

  const token = localStorage.getItem('access_token');
  const decoded = jwt_decode(token);
  console.log(decoded.scp); // 应输出 "User.Read offline_access"
  

2. Token有效性问题 #

• 检查token是否过期：解码token查看exp字段，对比当前时间戳，若已过期需重新获取。
• 确认token从正确端点获取：租户的授权码流程token端点应为https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token。

3. 代码细节问题 #

• 确认Axios导入正确：若你导入的是小写axios，代码中Axios.get会报错，应改为：

  import axios from 'axios';
  // ...
  axios.get('https://graph.microsoft.com/v1.0/me/photo/$value', {
    headers: { 'Authorization': `Bearer ${localStorage.getItem('access_token')}` },
    responseType: 'blob'
  })
  

• 添加错误捕获，排查具体错误：

  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)
    }).catch(err => {
      console.log('错误详情:', err.response?.data || err.message); // 打印具体错误信息
    })
  }, [])
  

4. 应用注册配置问题 #

• 登录Azure门户，检查应用注册是否已添加User.Read委托权限，并已授予管理员同意（租户内应用需此操作）。
• 确认应用注册的重定向URI配置正确，确保token能正常获取并存储到localStorage。

额外验证步骤 #

如果上述步骤都没问题，先调用https://graph.microsoft.com/v1.0/me接口验证token有效性：

axios.get('https://graph.microsoft.com/v1.0/me', {
  headers: { 'Authorization': `Bearer ${localStorage.getItem('access_token')}` }
}).then(res => console.log(res.data)).catch(err => console.log(err));

若该接口也返回401，说明token本身存在问题，重点排查token获取流程和权限配置；若接口成功，再检查用户是否设置了照片（部分用户未上传照片会返回404，此时可设置默认头像）。

内容的提问来源于stack exchange，提问作者Paul