# AWS Cognito 使用者登入功能實作

## Referneces
[用 AWS Cognito 實作經典的登入服務](https://qrtt1.medium.com/aws-cognito-with-classic-auth-method-490fcc63fb34)
[Amazon Cognito 入門](https://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/what-is-amazon-cognito.html#getting-started-overview)
[UserInfo endpoint](https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html)
[Common Amazon Cognito scenarios](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-scenarios.html)
[How to integrate the AWS Cognito built-in UI?](https://stackoverflow.com/questions/51504899/how-to-integrate-the-aws-cognito-built-in-ui)

## Today's Goal
1. 認識AWS Cognito服務架構
2. 建立Cognito User Pool
3. 利用Cognito架設登入服務頁面

## Prerequesties
請依照之前的S3靜態網站架設教學，預先架設登入後顯示的HTML網頁。(callback.html)

## What Is a User Pool

> 使用者集區(User Pool)是在 Amazon Cognito 中的使用者目錄。利用使用者集區，您的使用者可以透過 Amazon Cognito 登入您的 Web 或行動應用程式。

----[AWS cognito document](https://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/cognito-user-identity-pools.html)

白話文: 註冊後會新增一個使用者到User pool. User pool會儲存使用者的資料.

Note: User pool 與 identity pool的差別
Note: User status

## Example System Architectures

### 透過User Pool存取伺服器端資源


登入成功後，您的 Web 或行動應用程式就會收到來自Amazon Cognito的token。使用者可以透過token存取你的server端資源

### 以User Pool透過 API Gateway 和 Lambda 存取資源


登入成功後得到access token，可以讓使用者透過API Gateway存取API

### 透過User Pool和Identity Pool存取 AWS 服務


User Pool身分驗證成功後，您的應用程式將會收到來自 Amazon Cognito 的User Pool token。使用token透過Identity Pool交換臨時存取其他 AWS 服務的權限。

## Let's Get Started

### Steps

1. 建立User Pool, 設定App Client與Hosted UI
3. 修改callback javascript上傳html檔
5. 測試登入功能與登出功能

### 建立User Pool, 設定App Client與Hosted UI

**Note: 統一使用新版Console**

1. 進入AWS Cognito服務
2. 選擇Create user pool
3. **Configure sign-in experience/Cognito user pool sign-in options**: 勾選 User name & Email
4. **Configure security requirements/Multi-factor authentication**: 選擇 No MFA
5. **Configure message delivery/Email**: 選擇 Send email with Cognito
6. **Integrate your app**
1. **User pool name**: 設定User pool name
2. **Hosted authentication pages**: 勾選Use the Cognito Hosted UI
3. **Domain**: 設定Cognito domain名稱
4. **Initial app client**:
a. 選擇Public client (Don't generate a client secret.)
b. 設定client name
c. 設定Allowed callback URLs, ex. https://d3roixe7dwlv0e.cloudfront.net/callback.html
*(從先前創建的cloudfront取得url)*
5. **Advanced app client settings**: 設定Allowed sign-out URLs, ex. https://d3roixe7dwlv0e.cloudfront.net/callback.html
7. 創建user pool
8. 選擇自己創建的User pool
9. 進入App integration->App client list，選擇剛才創建的app client
10. Hosted UI->Edit
11. **Hosted sign-up and sign-in pages/OAuth 2.0 grant types**: 取消選取Authorization code grant，選擇Implicit grant

### 修改callback javascript上傳html檔

1. 進入AWS Cognito服務
2. 選擇自己創建的User pool
3. 進入App integration: 複製Domain
4. 至App client list，選擇剛才創建的app client: 複製Client ID
5. 下載 [callback.html](https://biomotionstaticsite.s3.ap-northeast-1.amazonaws.com/callback.html) (點擊右鍵另存)
6. 修改callback.html: domain\*3, client_id\*2, redirect_uri, logout_uri
7. 上傳callback.html至s3 bucket (靜態網站伺服器)

Note: briefly explain the callback.html

### 測試登入功能與登出功能

1. 打開自己的cloudfront url, ex: https://d3roixe7dwlv0e.cloudfront.net/callback.html
3. 點選Login
4. 註冊帳號[(教學)](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-hosted-ui-user-sign-up.html)並驗證電子郵件
5. 使用註冊時的帳號密碼登入即可看到自己的使用者資料
5. (Optional)點擊Logout可登出帳號