在本單元中,您會建立一個 Amazon Cognito 使用者集區來管理使用者的帳戶。您會部署頁面,以讓客戶註冊為新使用者、確認電子郵件地址和登入網站。

Serverless_Web_App_LP_assets-03

使用者瀏覽您的網站時,會先註冊一個新使用者帳戶。針對本研習營之用途,這些使用者僅需提供電子郵件地址和密碼來進行註冊。不過,您可設定 Amazon Cognito 在您的專屬應用程式中要求提供額外屬性。

使用者提交註冊後,Amazon Cognito 會將一封附有驗證代碼的確認電子郵件,傳送至使用者提供的地址。為了確認其帳戶,使用者將會回到網站,並輸入電子郵件地址和其收到的驗證代碼。若您想要使用假電子郵件地址進行測試,亦可使用 Amazon Cognito 主控台來確認使用者帳戶。

使用者已確認帳戶 (使用電子郵件驗證程序或是透過主控台手動確認) 並可登入。使用者登入時,會輸入使用者名稱 (或電子郵件) 和密碼。接著,JavaScript 功能會與 Amazon Cognito 進行通訊、使用「安全遠端密碼」通訊協定 (SRP) 執行驗證,並接收回一組「JSON Web 權杖」(JWT)。JWT 包含關於使用者身分的宣告,且在下一個單元中會用來驗證您使用 Amazon API Gateway 建立的 RESTful API。

單元完成時間:30 分鐘

使用的服務:Amazon Cognito

CloudFormation 範本:若您想要直接跳到下一個單元,可在您於「第 1 單元」所用的相同區域中,啟動以下其中一個 AWS CloudFormation 範本。

區域 CloudFormation 範本
美國東部 (維吉尼亞北部) Launch stack (啟動堆疊) >
美國東部 (俄亥俄) Launch stack (啟動堆疊) >
美國西部 (奧勒岡) Launch stack (啟動堆疊) >
歐洲 (法蘭克福) Launch stack (啟動堆疊) >
歐洲 (愛爾蘭) Launch stack (啟動堆疊) >
歐洲 (倫敦) Launch stack (啟動堆疊) >
亞太區域 (東京) Launch stack (啟動堆疊) >
亞太區域 (首爾) Launch stack (啟動堆疊) >
亞太區域 (雪梨) Launch stack (啟動堆疊) >
亞太區域 (孟買) Launch stack (啟動堆疊) >
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 提供兩種不同的使用者驗證機制。您可使用「Cognito 使用者集區」為應用程式新增註冊與登入功能,或是使用「Cognito 身分集區」透過諸如 Facebook、Twitter 或 Amazon 等社交身分提供者來驗證使用者,使用 SAML 身分解決方案,或是使用您的專屬身分系統。針對本單元,將使用使用者集區做為提供之註冊與登入頁面的後端。


    1. 在「AWS 主控台」中,選擇「Services (服務)」,然後再於「Mobile Services (行動服務)」下方選取 Cognito
    2. 選擇「Manage your User Pools (管理您的使用者集區)」。
    3. 選擇「Create a User Pool (建立使用者集區)
    4. 提供使用者集區的名稱 (例如:WildRydes),然後選取「Review Defaults (檢閱預設值)
    5. 在檢閱頁面上,按一下「Create pool (建立集區)」。
    6. 在新建立之使用者集區的「Pool details (集區詳細資訊)」頁面上,記下「Pool Id (集區 ID)」。
  • 步驟 2. 將應用程式新增至您的使用者集區

    從 Amazon Cognito 主控台選取您的使用者集區,然後再選取「App clients (應用程式用戶端)」區段。添加新的應用程式用戶端,確認取消選取「Generate client secret (產生用戶端密碼)」選項。用戶端密碼目前不支援 JavaScript SDK。若您已使用產生的密碼建立應用程式,請將其刪除,然後使用正確的組態建立新應用程式。


    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. 在您的網站儲存貯體中更新 config.js 檔案

    /Js/config.js 檔案包含適用於使用者集區 Id、應用程式用戶端 ID 和「區域」的設定。運用您在先前步驟中建立之使用者集區和應用程式的設定,來更新此檔案,然後再將其上傳回儲存貯體。


    1. 從此儲存庫第一個單元的網站目錄,將 config.js 檔案下載至本機電腦。回到您建立的 S3 儲存貯體並導覽至名為 'js’ 的資料夾,即可找到該檔案。
    2. 使用選擇的文字編輯器,開啟已下載的檔案。
    3. 運用剛建立之使用者集區和應用程式的正確值,更新 cognito 區段。
    4. 選取您建立的使用者集區後,即可在 Amazon Cognito 主控台的「Pool details (集區詳細資訊)」頁面找到 userPoolId 值。
      從左側導覽列選取「 App clients (應用程式用戶端)」即可看到 userPoolClientId 值。針對您在先前區段中建立的應用程式,使用來自「 App client id (應用程式用戶端 ID)」欄位的值。
      region 值應為建立您的使用者集區的所在「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', } };

    1. 儲存已修改的檔案,確認檔名仍為 config.js
    2. 瀏覽以下網址開啟 Amazon S3 主控台:https://console.aws.amazon.com/s3/
    3. 選取您在先前單元中建立的 Wild Rydes 網站儲存貯體。
    4. 瀏覽至 js 字首。
    5. 依序選擇「Upload (上傳)」、Add Files (新增檔案)」。
    6. 瀏覽至儲存本機修訂版 config.js 檔案的所在目錄,選取該檔案,然後選擇「Open (開啟)」。
    7. 在對話方塊左側,選擇「Upload (上傳)」。

    注意:您無須寫入瀏覽器端程式碼來管理註冊、驗證和登入流程,我們針對您在第一個單元中部署的資產,提供了可順暢運作的實作。Cognito-auth.jsognito-auth.js 檔案包含程式碼,其會處理 UI 事件並叫用適當的 Amazon Cognito Identity SDK 方法。如需有關 SDK 的詳細資訊,請參閱 GitHub 上的專案頁面

  • 步驟 4. 測試實作


    1. 瀏覽網站網域下的 /register.html,或選擇位於網站首頁的 Giddy Up! 按鈕。
    2. 完成註冊表單,然後選擇 Let's Ryde。您可使用專屬電子郵件或是輸入假電子郵件。確認選擇至少包含一個大寫字母、數字和特殊字元的密碼。記住您輸入的密碼以供日後使用。您應會看到確認已建立使用者的提醒。
    3. 您可使用下列兩種方法之一來確認新使用者。
    4. 若您使用自己控管的電子郵件地址,則可透過以下方式完成帳戶驗證程序:瀏覽位於網站網域下的 /verify.html,然後輸入透過電子郵件寄送給您的驗證代碼。 請注意,驗證電子郵件可能會位於垃圾郵件資料夾。針對實際部署,建議設定您的使用者集區使用 Amazon Simple Email Service,以傳送來自您專屬網域的電子郵件。
    5. 若您使用虛擬電子郵件地址,則必須透過 Cognito 主控台手動確認使用者。
    6. 在 AWS 主控台中,按一下「Services (服務)」,然後再於「Security, Identity & Compliance (安全、身分與合規)」下方選取 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