使用React调用MS Graph更新AAD用户头像出现404/400错误如何解决

1 404错误的常见原因 #

• 首先确认你使用的是工作或学校账户，MS Graph的头像接口不支持个人微软账户（outlook.com、live.com等），个人账户调用/me/photo相关接口会固定返回404
• 确认权限配置正确：User.ReadWrite.All是应用权限，如果你是委托权限场景（用户登录后操作自己的头像），实际只需要User.ReadWrite权限即可，注意不要混淆应用权限和委托权限的配置，需要在Azure门户的应用注册中对应配置并完成管理员同意

2 400错误的核心原因 #

你当前的文件读取方式完全错误：

• 用readAsText把二进制图片转成UTF-8字符串会破坏图片的二进制结构，readAsBinaryString已经是废弃API，也不适合fetch请求的body传输
• 正确的读取方式是使用readAsArrayBuffer直接读取图片的二进制数据流，不需要做额外转码

3 可运行的修正代码 #

前端文件读取逻辑 #

const reader = new FileReader();
reader.onloadend = () => {
    // 直接传递读取到的ArrayBuffer给API方法
    setProfileImage(reader.result).then(res => {
        // 处理返回结果
    })
}
// 注意不要转成文本，直接读二进制缓冲
reader.readAsArrayBuffer(image)

请求调用逻辑 #

export const setProfileImage = async (fileBuffer) => {
    // 委托场景用User.ReadWrite权限即可，应用权限场景再用User.ReadWrite.All
    const accessToken = await getToken("User.ReadWrite");
    const headers = new Headers();
    headers.append("Authorization", `Bearer ${accessToken}`);
    // 如果上传的是png格式，这里要对应改成image/png
    headers.append("Content-Type", "image/jpeg");
    const options = {
        method: "PUT",
        headers: headers,
        body: fileBuffer
    };

    const response = await fetch("https://graph.microsoft.com/v1.0/me/photo/$value", options)
    // 可以增加错误日志方便排查问题
    if (!response.ok) {
        console.log(await response.json())
    }
    return response
}

4 额外排查点 #

• 确认上传的图片大小不超过4MB，这是MS Graph头像接口的固定限制
• 如果是操作其他用户的头像（应用权限场景），使用https://graph.microsoft.com/v1.0/users/{用户ID}/photo/$value即可，不需要调用beta版本接口，正式版接口已经稳定可用
• 拿到访问令牌后可以自行解析JWT内容，确认令牌的scp（委托权限）或者roles（应用权限）声明中包含你申请的权限，避免权限没有正确下发的问题

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