透過 AWS Cognito 建立使用者集群

Cpchin

Published in

eCloudture

7 min readOct 29, 2021

前言

Amazon Cognito 可以讓使用者輕鬆的註冊、驗證、登入 Web 應用程式，可擴展到數百萬的使用者，並且支援第三方(如：Facebook, Google, Amazon)以及透過SAML 2.0以企業及身份供應商進行登入。

Amazon Cognito 的兩個分類主要為 使用者集區(User Pool) 和 身份集區(Identity Pool)。使用者集區(User Pool)是一種使用者目錄，不論用註冊帳號的方式登入或者是透過第三方平台登入，都會被記錄在AWS Cognito當中。利用身份集區，您可以取得臨時 AWS 登入資料，以及直接存取其他 AWS 服務（S3, Dynamo DB）或透過 Amazon API Gateway 存取資源的許可。

透過 AWS Cognito 建立登入系統，你可以不需要耗費時間及資源來開發登入系統，Cognito也支援多重因素認證以及靜態資料和傳輸中資料的加密，並且可以快速地與你的應用程式做整合，透過自訂UI，將公司品牌放在前面和中央，以便與所有使用者互動。

情境架構

使用 AWS Cognito 建立一個的使用者登入、註冊系統，Amazon Cognito 的託管 UI 是其他功能的基礎，例如透過其他第三方來進行註冊或登入(如:Facebook, Google, Amazon)或者是 OpenID Connect (OIDC) 和 SAML身份供應商直接登入使用者集區的功能。

建置過程

S3託管靜態網頁

使用S3託管靜態網頁，讓使用者透過 Object URL 就可以看到架設的網頁。

下載附件中的 index.html 。
在服務選單，選擇 S3，點選 create bucket 然後 Create，建立bucket來儲存網頁。

Bucket 名稱: cognitoyourname

輸入你的 bucket 名稱進行搜尋，選擇你的bucket。

點選 upload，選擇 index.html 然後上傳你的網頁。
選擇 Permissions 標籤然後選擇 public access settings，讓bucket可以公開在網路中，其他人也可以看到。

edit 和 unclick 四個選項然後 save。

輸入 confirm 然後點選 Confirm，確認你要改變S3 bucket 的 policy，讓 S3 bucket 公開到網路上。

點選你的 index.html 然後點選標籤 Permissions，大家都可以讀取到 index.html。

選擇 everyone 和 Read Object 然後 save。

返回前一頁。
點選標籤 Properties 然後選擇 static website hosting。

選擇 Use this bucket to host a website，輸入 index.html 和 save。

新增user pool(使用者集區)

建立一個client pool讓使用者可以註冊或登入你的網頁，運用AWS Cognito來記錄使用者的帳號。

在服務的選單下，選擇 Cognito。
選擇左邊的 Manage User Pools，然後選擇右上角的 Create a user pool，做為存放使用者資訊的地方以及設定使用者登入資訊所需的資料。
在 Pool name的空格處輸入 UserPool_yourname，點選右下角的 Step through settings。
在左邊的選單選擇 App clients，點選 Add an app client。
在 App client name的空格輸入 myclient_yourname，並取消勾選 Generate client secret，點選Create app client。

點選右側的 Return to pool details，點選 Create Pool。
在 Eabled Identity Providers 勾選 Select All。
在Callback URL(s) 輸入 S3 bucket's Object URL。

到 S3 選擇你的 bucket，然後選擇index.html並且複製Object URL。

點選右下角的 Save changes，然後點選右下角 Choose domain name。
在 your domain name 輸入 yourname，或者是你希望 AWS Cognito 幫你保護的網頁，點選 check availability 和 Save changes。

測試

查看你的登入頁面

a. 新開一個標籤頁，輸入

https://<your domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

your_domain 可以在左邊選單 App integration 的 Domain name 找到
your_app_cleient_id, your_callback_url 可以在左邊選單 App integration 的 App client setting 找到

範例：

https:/yourname.auth.yourregion.amazoncognito.com/login?response_type=token&client_id=1234xxxxxx123xxxx78x93x80x&redirect_uri=https://s3.amazonaws.com/yourbucketname/index.html

b. 你可以選擇登入或註冊。