Cognito 用户池“用户名”显示为 ID 而不是电子邮件，如何解决？

Question

我正在使用 Amazon Cognito 用户池，并且我选择让用户使用他们的电子邮件注册/登录。根据在线指南，选择时，用户池应将具有“用户名”值的用户列为他们的电子邮件，但事实并非如此，我看到的“id”也称为“子”作为“用户名”字段！它具有 UUID 格式。

任何想法如何获取用户名显示电子邮件？** 注意：我说的是从 AWS Cognito 控制台显示用户。附上截图

Answer 1

当您选择使用电子邮件或电话注册时，似乎就会发生这种情况。显然，在该配置中，Cognito 使用子命令生成“用户名”...

我建议将 Congito 配置为使用“用户名”，然后在注册时将“用户名”设置为电子邮件，您还可以将电子邮件（和电话）作为附加属性传递。

我希望这有帮助

Answer 2

@Luke 是正确的，只有当您在向导的“您希望最终用户如何登录”部分中选择“电子邮件地址或电话号码”选项时，才会发生这种情况。

这有点令人困惑，因为 SignUp API 在注册期间需要电子邮件格式的用户名，但最终会创建一个使用 GUID 作为用户名的用户，并将提交的用户名分配给电子邮件属性。文档中对此进行了描述：

• 调用 SignUp API 并在 API 的用户名参数中传递电子邮件地址或电话号码。该 API 执行以下操作：
  • 如果用户名字符串采用有效的电子邮件格式，则用户池会自动使用用户名值填充用户的电子邮件属性。
  • 如果用户名字符串格式不是电子邮件或电话号码格式，则 SignUp API 会引发异常。
  • SignUp API 为您的用户生成一个持久的 UUID，并在内部将其用作不可变的用户名属性。此 UUID 与用户身份令牌中的 sub 声明具有相同的值。
  • 如果用户名字符串包含已在使用的电子邮件地址或电话号码，则 SignUp API 会引发异常。

事实上，这可能是您想要的，因为它允许用户更改他们的电子邮件（因为实际用户名无法更改）。此外，文档指出“您可以在除 ListUsers API 之外的所有 API 中使用电子邮件地址或电话号码作为别名来代替用户名”，因此用户名在后端是 GUID 的事实并不具有对您与 API 交互的方式有很大影响。

至于在控制台中列出电子邮件，看起来他们已经在用户列表中添加了电子邮件列，因此这不再是问题。

Answer 3

这里有一个例子。

auth.service.ts

您必须在身份验证服务中执行 Cognito 的登录方法。像这样的东西：

login(username: string, password: string): Promise<CognitoUser|any> {
    return new Promise((resolve,reject) => {
      Auth.signIn(username,password)
      .then((user: CognitoUser|any) => {
        this.currentUserSubject.next(user);
        localStorage.setItem("currentUser", JSON.stringify(user));
        localStorage.setItem("token", user.signInUserSession.idToken.jwtToken);
        localStorage.setItem("userGroup", user.signInUserSession.idToken.payload['cognito:groups']);
        localStorage.setItem("userEmail", user.attributes.email);
        this.loggedIn = true;
        resolve(user);
      }).catch((error: any) => reject(error));
    });
  }

然后在组件的 .ts 中，您必须在构造函数中调用该方法，并将从 Cognito 在 localStorage 中获取的 userEmail 参数存储在变量中：

constructor(
    private authService: AuthService,
  ) {
    this.authService.currentUser.subscribe(response => {
      this.currentUser = response;
    });

    this.userSessionName = localStorage.getItem('userEmail');
  }

最后，您必须在 .html 组件中显示 userSessionName 变量：

<p>{{ userSessionName }}</p>