在本模块中,您将创建一个 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 模板
美国东部(弗吉尼亚北部) 启动堆栈 >
美国东部(俄亥俄) 启动堆栈 >
美国西部(俄勒冈) 启动堆栈 >
欧洲(法兰克福) 启动堆栈 >
欧洲(爱尔兰) 启动堆栈 >
欧洲(伦敦) 启动堆栈 >
亚太地区(东京) 启动堆栈 >
亚太地区(首尔) 启动堆栈 >
亚太地区(悉尼) 启动堆栈 >
亚太地区(孟买) 启动堆栈 >
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 用户池向您的应用程序添加注册和登录功能,也可以通过社交身份提供商(如 Facebook、Twitter 或 Amazon)、SAML 身份解决方案或使用您自己的身份系统,以使用 Cognito 身份池进行用户身份验证。对于本模块,您将使用一个用户池,以作为所提供注册和登录页面的后端。


    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 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(用户池 ID)的值。
    您可以从左侧导航栏中选择 App clients(应用程序客户端),从而找到 userPoolClientId(用户池客户端 ID)的值。使用您在上一部分创建的应用程序的 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',
        }
    };

    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(服务),然后在 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