如何从Amplify获取用户资料URL及资料属性用于展示头像？

• 如何从Amplify获取用户资料URL？
• 如何获取用户的资料属性以展示头像？当前user对象结构中不包含该属性。

用户提供的代码示例：

import { withAuthenticator } from '@aws-amplify/ui-react';

function App({signOut, user}) {
  console.log(user)


  return (
  <div className="App">
    <header className="App-header">
      <StandardCardCollection />
    </header>
  </div>
);
}

export default withAuthenticator (App);

解决方案 #

1. 获取完整用户资料属性 #

withAuthenticator传入的user对象仅包含基础身份信息，要拿到头像这类扩展属性，需要借助Amplify Auth模块的fetchUserAttributes方法：

首先导入Auth模块：

import { Auth } from 'aws-amplify';

然后在组件内编写获取属性的逻辑：

async function fetchUserAttributes() {
  try {
    const authUser = await Auth.currentAuthenticatedUser();
    const attributes = await Auth.fetchUserAttributes(authUser);
    // 从属性数组中提取头像URL（通常存储在`picture`字段）
    const avatarUrl = attributes.find(item => item.Name === 'picture')?.Value;
    return avatarUrl;
  } catch (err) {
    console.error('获取用户属性失败:', err);
  }
}

结合React状态管理在组件中使用：

import { useEffect, useState } from 'react';

function App({signOut, user}) {
  const [avatarUrl, setAvatarUrl] = useState('');

  useEffect(() => {
    if (user) {
      fetchUserAttributes().then(url => setAvatarUrl(url));
    }
  }, [user]);

  return (
  <div className="App">
    <header className="App-header">
      {avatarUrl && <img src={avatarUrl} alt="用户头像" style={{width: '50px', borderRadius: '50%'}} />}
      <StandardCardCollection />
    </header>
  </div>
);
}

2. 从Amplify Storage获取头像URL #

如果用户头像是上传到Amplify Storage存储的，需要通过Storage模块生成可访问的URL：

首先导入Storage模块：

import { Storage } from 'aws-amplify';

编写获取存储头像的逻辑：

async function getStorageAvatarUrl() {
  try {
    const authUser = await Auth.currentAuthenticatedUser();
    // 假设头像存储路径为`avatars/{用户名}/profile.jpg`
    const filePath = `avatars/${authUser.username}/profile.jpg`;
    const accessUrl = await Storage.get(filePath);
    return accessUrl;
  } catch (err) {
    console.error('获取存储头像失败:', err);
  }
}

同样在useEffect中调用并更新状态即可。

注意事项 #

• 确保用户注册或资料更新时，已将头像信息存入picture属性，或上传至Storage对应路径。
• 若使用Storage，需配置正确的IAM权限，允许用户访问自身的头像文件。

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