Cognito 用戶池“用戶名”顯示為 ID 而不是電子郵件，如何解決？

Question

我正在使用 Amazon Cognito 用戶池，並且我選擇讓用戶使用他們的電子郵件進行注冊/登錄。 根據在線指南，選擇時，用戶池應將具有“用戶名”值的用戶列為他們的電子郵件，但事實並非如此，我看到的“id”也稱為“子”作為“用戶名”字段！ 它具有 UUID 格式。

任何想法如何獲取用戶名顯示電子郵件？ ** 注意：我說的是從 AWS Cognito 控制台顯示用戶。 附上截圖

Answer 1

當您選擇使用電子郵件或電話注冊時，似乎會發生這種情況。 顯然，在該配置中，Cognito 使用子...

我建議將 Congito 配置為使用“用戶名”，然后在注冊時將“用戶名”設置為電子郵件，您還可以將電子郵件（和電話）作為附加屬性傳遞。

我希望有幫助

Answer 2

@Luke 是正確的，這只發生在您在向導的“您希望最終用戶如何登錄”部分中選擇“電子郵件地址或電話號碼”選項時。

這有點令人困惑，因為 SignUp API 在注冊期間需要一個電子郵件格式的用戶名，但最終創建了一個具有 GUID 作為用戶名的用戶，並將提交的用戶名分配給電子郵件屬性。 這在文檔中描述：

• 調用 SignUp API 並在 API 的 username 參數中傳遞電子郵件地址或電話號碼。 此 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>