透過 AWS Cognito 建立使用者集群

前言

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 就可以看到架設的網頁。

1. 下載附件中的 index.html 。

2. 在服務選單，選擇 S3，點選 create bucket 然後 Create，建立bucket來儲存網頁。

   • Bucket 名稱: cognitoyourname

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

   

4. 點選 upload，選擇 index.html 然後上傳你的網頁。

5. 選擇 Permissions 標籤然後選擇 public access settings，讓bucket可以公開在網路中，其他人也可以看到。

   • edit 和 unclick 四個選項然後 save。

   

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

   

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

   • 選擇 everyone 和 Read Object 然後 save。

   

8. 返回前一頁。

9. 點選標籤 Properties 然後選擇 static website hosting。

   

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

    

新增user pool(使用者集區)

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

1. 在服務的選單下，選擇 Cognito。

2. 選擇左邊的 Manage User Pools，然後選擇右上角的 Create a user pool，做為存放使用者資訊的地方以及設定使用者登入資訊所需的資料。

3. 在 Pool name的空格處輸入 UserPool_yourname，點選右下角的 Step through settings。

4. 在左邊的選單選擇 App clients，點選 Add an app client。

5. 在 App client name的空格輸入 myclient_yourname，並取消勾選 Generate client secret，點選Create app client。

   

6. 點選右側的 Return to pool details，點選 Create Pool。

7. 在 Eabled Identity Providers 勾選 Select All。

8. 在Callback URL(s) 輸入 S3 bucket's Object URL。

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

   

9. 點選右下角的 Save changes，然後點選右下角 Choose domain name。

10. 在 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. 你可以選擇登入或註冊。

c. 註冊一個帳號。

d. 收到驗證信。

e. 登入網頁，你會跳出你在S3上設置的靜態網頁如下。

f. 回到 Cognito頁面，你可以查看你剛剛註冊或登入帳號。

補充

使用者集區(User Pool)

是一種使用者目錄，協助使用者提供註冊和登入的選項，或者是第三方身份供應商 (Idp) 以聯合身份登入。不論透過哪種方法登入，使用者集區所有成員都有目錄的設定檔。

身份集區(Identity Pool)

使用者可以取得臨時 AWS 登入資料來存取 AWS 服務，例如 S3 和 Dynamo DB。

結論

恭喜你學會使用 Cognito 開發一個註冊登入的網頁，你可以嘗試在上面登入、註冊帳號，資訊會顯示於 AWS Cognito，你可以在上面查看註冊資訊，並且在轉跳到你的網頁，讓你不用另外撰寫、管理自己的網頁登入頁面。

越來越多網站進行會進行登入系統的整合，可能是運用Facebook登入，運用 Google 登入等等，透過 AWS Cognito 不僅可以省去自己寫登入系統的時間，也有進階的安全功能，可協助您保護對應用程式使用者帳戶的存取，避免使用遭到入侵的登入資料。

參考網址

1. AWS Cognito

2. AWS Cognito文件