AWS 上的專案：

使用 AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB 和 Amazon Cognito

來建置無伺服器 Web 應用程式

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

簡介

Progression-Bar-07

託管靜態網站

Progression-Bar-14

管理使用者

Progression-Bar-09

建置無伺服器後端

Progression-Bar-10

部署 RESTful API

Progression-Bar-11

終止資源

單元 2.使用者管理

在本單元中，您將建立 Amazon Cognito 使用者集區，來管理使用者的帳戶。您將部署一些頁面，讓使用者可以註冊為新的使用者、驗證其電子郵件地址，以及登入網站。

架構概觀

Serverless_Web_App_LP_assets-03

當使用者造訪您的網站時，他們首先將註冊新的使用者帳戶。基於此講座的目的，我們只需要他們提供電子郵件地址和密碼即可註冊。不過，您可以設定 Amazon Cognito，以需要您自己應用程式中的其他屬性。

在使用者提交其註冊之後，Amazon Cognito 會將確認電子郵件與驗證碼傳送至他們提供的地址。若要確認其帳戶，使用者將回到您的網站，並輸入其電子郵件地址，以及他們收到的驗證碼。如果想要使用虛假的電子郵件地址進行測試，您也可以使用 Amazon Cognito 主控台來確認使用者帳戶。

在使用者具有已確認的帳戶 (使用電子郵件驗證程序或透過主控台進行手動確認) 之後，他們將能夠登入。當使用者登入時，他們會輸入其使用者名稱 (或電子郵件) 和密碼。然後，JavaScript 函數會與 Amazon Cognito 通訊、使用安全遠端密碼協定 (SRP) 進行身份驗證，然後收到一組 JSON Web Token (JWT)。JWT 包含使用者身分的聲明，而且將用於下一個單元，以針對您使用 Amazon API Gateway 建置的 RESTful API 進行身份驗證。

完成單元的時間：30 分鐘

使用的服務：Amazon Cognito

CloudFormation 範本：如果您想要跳至下一個單元，則可以在您已於單元 1 中使用的同一個區域中啟動其中一個 AWS CloudFormation 範本。

區域 CloudFormation 範本
美國東部 (維吉尼亞北部) 啟動堆疊 >
美國東部 (俄亥俄) 啟動堆疊 >
美國西部 (奧勒岡) 啟動堆疊 >
歐洲 (法蘭克福) 啟動堆疊 >
歐洲 (愛爾蘭) 啟動堆疊 >
歐洲 (倫敦) 啟動堆疊 >
亞太區域 (東京) 啟動堆疊 >
亞太區域 (首爾) 啟動堆疊 >
亞太區域 (雪梨) 啟動堆疊 >
亞太區域 (孟買) 啟動堆疊 >
Serverless_Web_App_LP_assets-17

CloudFormation 啟動指示

  1. 選擇上面適用於您所選區域的 Launch Stack (啟動堆疊) 連結。

  2. 在 Select Template (選取範本) 頁面上，選擇 Next (下一步)。

  3. 提供單元 1 中的網站儲存貯體名稱做為 Website Bucket Name (網站儲存貯體名稱) (例如 wildrydes-yourname)，然後選擇 Next (下一步)。

    附註：您必須指定您已在前一個單元中使用的相同儲存貯體名稱。如果您提供不存在或對其沒有寫入存取權的儲存貯體，則 CloudFormation 堆疊將在建立期間失敗。

  4. 在 Options (選項) 頁面上，保留所有預設值，然後選擇 Next (下一步)。

  5. 在 Review (檢閱) 頁面上，勾選方塊來確認 CloudFormation 將會建立 IAM 資源，然後選擇 Create (建立)。

    此範本會使用自訂資源，來建立 Amazon Cognito 使用者集區和用戶端，以及產生組態檔案，其中具有連接至此使用者集區，並將其上傳至網站儲存貯體所需的詳細資訊。範本將建立一個角色，讓您可以建立這些資源，並將組態檔案上傳至您的儲存貯體。

  6. 等待 wildrydes-webapp-2 堆疊的狀態變更為 CREATE_COMPLETE。

  7. 請遵循步驟 4。測試您的實作中所概述的步驟，來確認您已準備好移至下一個單元。

實作說明

請遵循下方的逐步指示來建立使用者集區。按一下每一個步驟號碼來展開區段。

  • 步驟 1.建立 Amazon Cognito 使用者集區

    建立 Amazon Cognito 使用者集區

    Amazon Cognito 提供兩種不同機制來驗證使用者。您可以使用 Cognito 使用者集區，將註冊和登入功能新增至應用程式，或使用 Cognito 身分集區，透過 Facebook、Twitte 或 Amazon 等社交身分供應商，或藉由使用您自己的身分系統來驗證使用者。對於本單元，您將使用一個使用者集區，做為所提供之註冊和登入頁面的後端。

    1. 從 AWS 主控台中，按一下 Services (服務)，然後選取行動服務下的 Cognito。
    2. 選擇 Manage your User Pools (管理您的使用者集區)。
    3. 選擇 Create a User Pool (建立使用者集區)
    4. 提供使用者集區的名稱，例如 WildRydes，然後選取 Review Defaults (檢閱預設值)。
    5. 在檢閱頁面上，按一下 Create pool (建立集區)。
    6. 記下剛建立之使用者集區的集區詳細資訊頁面上的 Pool Id (集區 ID)。

  • 步驟 2.將應用程式新增至您的使用者集區

    將應用程式新增至您的使用者集區

    從 Amazon Cognito 主控台中，選取您的使用者集區，然後選取應用程式用戶端區段。新增應用程式用戶端，並確定已取消選取 Generate client secret (產生用戶端密碼) 選項。目前不支援用戶端密碼與 JavaScript 軟體開發套件搭配。如果您的確使用產生的密碼建立應用程式，請刪除它，然後使用正確組態來建立新的應用程式。

    1. 從使用者集區的 Pool Details (集區詳細資訊) 頁面中，從導覽列左邊的 General Settings (一般設定) 區段中選取 App clients (應用程式用戶端)。
    2. 選擇 Add an app client (新增應用程式用戶端)。
    3. 為應用程式用戶端命名，例如 WildRydesWebApp。
    4. 取消選取 Generate client secret (產生用戶端密碼) 選項。目前不支援用戶端密碼與瀏覽器型應用程式搭配使用。
    5. 選擇 Create app client (建立應用程式用戶端)。
    6. 記下新建立的應用程式的 App client id (應用程式用戶端 ID)。

  • 步驟 3.更新網站組態

    更新網站組態

    /js/config.js 檔案包含使用者集區 ID、應用程式用戶端 ID 和區域的設定。使用來自您在先前步驟中建立之使用者集區和應用程式的設定來更新此檔案，然後將此檔案再次上傳至您的儲存貯體。

    a.從本機電腦上，在您選擇的文字編輯器中開啟 `wild-ryde-site/js/config.js`。

    b.使用您剛才建立之使用者集區和應用程式的正確值，來更新 cognito 區段。

    在選取您建立的使用者集區之後，即可在 Amazon Cognito 主控台的 Pool details (集區詳細資訊) 頁面上找到 userPoolId 的值。
    您可以從左側導覽列中選取應用程式用戶端，來尋找 userPoolClientId 的值。針對您在前一個區段中建立的應用程式，使用來自應用程式用戶端 ID 欄位的值。

    區域值應為您在其中建立使用者集區的 AWS 區域碼。例如，維吉尼亞北部區域為 us-east-1，或奧勒岡區域為 us-west-2。若您不確定要使用哪個代碼，可查看位於「Pool details (集區詳細資訊)」頁面的「Pool ARN (集區 ARN)」值。此區域碼是 ARN 的一部分，其會緊接在 arn:aws:cognito-idp: 後面。

    更新的 config.js 檔案應如下所示。注意，您檔案的實際值會有所不同：

    window._config = {
    cognito: {
        userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb
        userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
        region: 'us-west-2' // e.g. us-east-2
    },
    api: {
        invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod',
    }
};

    d.儲存修改的檔案並推送至 Git 儲存庫，使其自動部署至 Amplify 主控台。

    $ git push

  • 步驟 4.測試您的實作

    驗證您的實作

    1. 造訪網站網域下的 /register.html，或選擇網站首頁上的 Giddy Up! 按鈕。
    2. 完成註冊表單，然後選擇 Let's Ryde。您可以使用自己的電子郵件，或輸入虛假的電子郵件。確定選擇的密碼至少包含一個大寫字母、一個數字和一個特殊字元。不要忘了您輸入的密碼，因為稍後還要使用。您應該看到一個提醒，其會確認已建立您的使用者。
    3. 使用以下兩種方法之一確認您的新使用者。
    4. 若您使用自己控管的電子郵件地址，則可透過以下方式完成帳戶驗證程序：造訪位於網站網域下的 /verify.html，然後輸入透過電子郵件寄送給您的驗證碼。 請注意，驗證電子郵件可能出現在您的垃圾郵件資料夾中。如需真正部署，我們建議將您的使用者集區設定為使用 Amazon Simple Email Service，以從您擁有的網域中傳送電子郵件。
    5. 如果您已使用虛擬的電子郵件地址，則必須透過 Cognito 主控台手動確認使用者。
    6. 從 AWS 主控台中，按一下 Services (服務)，然後選取安全性、身分與合規下的 Cognito。
    7. 選擇 Manage your User Pools (管理您的使用者集區)
    8. 選取 WildRydes 使用者集區，然後在左側導覽列中按一下 Users and groups (使用者與群組)。
    9. 您應該看到一個使用者對應至您透過註冊頁面提交的電子郵件地址。選擇該使用者名稱來檢視使用者詳細資訊頁面。
    10. 選擇 Confirm user (確認使用者)，以完成帳戶建立程序。
    11. 在使用 /verify.html 頁面或 Cognito 主控台確認新的使用者之後，造訪 /signin.html 並使用您在註冊步驟期間輸入的電子郵件地址和密碼登入。
    12. 若登入成功，會將您重新導向至 /ride.html。您應該看到未設定 API 的通知。
    successful-login
下一個：建置無伺服器後端