在网站的标题中,我显示了有关用户的信息(电子邮件,姓名)(这些信息来自他们的microsoft openwork)。不过,我也想添加用户的照片。不管我做什么我都会出错
GET https://graph.microsoft.com/v1.0/me/photo/$value 401(未授权)
Uncaught(in promise)AxiosError {message:“请求失败,状态代码为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>
);
}
Header.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`;
1条答案
按热度按时间2hh7jdfx1#
我创建了一个Azure AD SPA应用程序,并授予API权限如下所示:
现在,我使用下面的端点对用户进行授权:
代码生成如下:
现在,我通过Postman使用PKCE流生成了访问令牌,传递参数如下:
当我解码访问令牌时,scp是
Directory.Read.All
,User.Read
,profile
,openid
,email
,如下所示:我可以成功获取个人资料照片,如下所示:
如果没有执行该操作所需的权限,通常会出现**
401Unauthorized
**错误。要解决错误,请检查以下内容:
在代码中修改以下更改:
https://graph.microsoft.com
**Directory.Read.All
时,User.Read
API权限时,检查在解码令牌时scp参数中是否反映了相同的权限。参考:
获取配置文件照片- Microsoft Graph v1.0