React AWS Cognito：電子郵件身份驗證設定指南（第一部分）

這是由兩部分組成的系列中的第一部分，我們將使用 AWS Cognito 建立一個 React 應用程序，以進行基於電子郵件的使用者身份驗證。第 1 部分重點介紹設定必要的 AWS 配置，而第 2 部分將深入研究 React 程式碼，將它們結合在一起。

我們將使用以下 AWS 服務：

• 亞馬遜簡單電子郵件服務 (SES)
• AWS Cognito

讓我們從設定 AWS 資源開始。

亞馬遜簡單電子郵件服務 (SES)

域SES身份

出於測試目的，驗證 SES 中的網域所有權是可選的，因為 AWS 提供了解決方法。但是，對於生產，驗證所有權對於允許 SES 代表您的網域發送電子郵件至關重要。

設定過程如下：

1. 前往亞馬遜簡單電子郵件服務。
2. 選擇身分。
3. 點選建立身分。

在設定中，我選擇「網域」並使用範例domain.com。

• 點選建立身分。

然後，您將看到類似此的頁面：

導覽至發布 DNS 記錄部分，並使用這些值在您的網域供應商中新增記錄。

在您的網域供應商中設定 DNS 記錄後，您應該會看到您的網域名稱已驗證，如下所示：

完美，您的網域現在已經驗證，這允許 SES 代表您發送電子郵件。由於 AWS 提供了替代方法，因此測試不需要此驗證，但它對於生產至關重要。

電子郵件 SES 身份

測試時，此步驟很重要，因為您在身分驗證流程中使用的電子郵件地址需要新增至 AWS 的「允許清單」。在這裡，我們將新增並驗證電子郵件地址。

前往：

• 亞馬遜簡單電子郵件服務
• 身分
• 建立身分

這次，選擇電子郵件地址：

• 輸入您要驗證的電子郵件地址。
• 點選建立身分。

建立身分後，您將收到一封來自 AWS 的電子郵件，其中包含驗證連結。請務必檢查您的收件匣並點擊該連結以驗證您的電子郵件。

驗證電子郵件後，您應該會看到一個表明其已驗證的標籤。

此時，您應該已驗證您的網域和電子郵件。雖然網域驗證在測試期間是可選的，但在生產中卻是必需的。另一方面，測試需要電子郵件驗證，但生產不需要。

注意：作為身分驗證流程的一部分，確認碼將發送到此電子郵件帳戶。如果電子郵件帳戶未經過驗證，則不會收到代碼。

亞馬遜認知

要設定的最後一個部分是Cognito。此服務啟用帳戶驗證，在本例中，我們將使用 電子郵件 進行身份驗證。其工作原理如下：

• 使用者使用他們的電子郵件和密碼建立一個帳戶。
• 他們透過輸入 AWS 發送的程式碼來驗證他們的電子郵件。
• 驗證後，使用者可以使用他們的電子郵件和密碼登入。

您可以利用 AWS Cognito，而不是自行處理身分驗證。

我們去：

注意：對於大多數步驟，我堅持使用預設選項，因此我只會提及我所做的自訂選擇。根據您的項目，您可能需要配置不同的設定。

• 認知
• 建立使用者池
• 第 1 步：檢查電子郵件

• 第2步：選擇無MFA；這對測試來說不是必需的。

• 第3步：我保留預設選項。

• 第 4 步：選擇您經過驗證的「寄件者電子郵件地址」。

Cognito 將發送一封包含驗證碼的電子郵件，最好來自您的網域，這就是為什麼需要在上一節中驗證網域的原因。在這裡，您可以看到 AWS 提供了適合開發的選項「使用 Cognito 發送電子郵件」。但是，在生產中，您需要確保您的網域經過驗證，以便實現更專業、更可靠的電子郵件發送流程。

• 第5步：除了新增池和客戶端名稱之外，關鍵部分是展開「進階應用程式客戶端設定」並啟用ALLOW_USER_PASSWORD_AUTH。此設定允許使用者使用其電子郵件和密碼進行身份驗證，這對於您的身份驗證流程至關重要。

• 第6步：這是審核步驟，這裡沒有什麼可以編輯的。在繼續之前，請確保一切看起來都很好。

建立後，您應該在儀表板上看到它，如下所示：

就是這樣！現在您已在 AWS 上完成所有設定。在下一篇文章中，我將示範如何將 React 應用程式與 Cognito 連接，以使用使用者的電子郵件對使用者進行身份驗證。請留意下週一發布的貼文。

以上是React AWS Cognito：電子郵件身份驗證設定指南（第一部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！