在此模块中,您将创建一个 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. 选择上面列出的针对您所选地区的启动堆栈链接。

  2. 在“Select Template (选择模板)”页面上,选择 Next (下一步)

  3. 对于 Website Bucket Name (网站存储桶名称),提供模块 1 中您的网站存储桶的名称(例如 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 软件开发工具包目前不支持客户端密钥。如果您使用生成的密钥创建了一个应用程序,请将其删除并使用正确的设置创建一个新的应用程序。


    1. 在您的用户池的“Pool Details (池详细信息)”页面上,选择导航栏中左侧 General Setting (常规设置) 部分中的 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。如果您不确定要使用哪一个代码,可以查看“池详细信息”页面上的“池 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 Console。

    $ 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 (服务)”,然后选择“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