在此模块中,您将创建一个 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. 在“Review”页面上,单击 Create pool
    6. 记下刚创建的用户池的“Pool Details”页面上的 Pool ID
  • 第 2 步:将应用程序添加到用户池中

    在 Amazon Cognito 控制台中,选择您的用户池,然后选择“App clients”部分。添加新的应用程序客户端,并确保取消选中“Generate client secret”选项。JavaScript 软件开发工具包目前不支持客户端密钥。如果您使用生成的密钥创建了一个应用程序,请将其删除并使用正确的设置创建一个新的应用程序。


    1. 在您的用户池的“Pool Details”页面上,选择左侧导航栏中的 App clients
    2. 单击 Add an app client
    3. 为应用程序指定一个名称,例如 WildRydesWebApp
    4. 取消选中“Generate client secret”选项。客户端密钥目前无法与基于浏览器的应用程序结合使用。
    5. 单击 Create app client
    6. 记下刚创建的应用程序的应用程序客户端 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,您可以找到 userPoolClientld的值。使用您在上一部分中创建的应用程序的 App client ID 字段中的值。
        地区 值应该是您创建用户池所在的 AWS 地区的代码。例如, us-east-1 代表弗吉尼亚北部地区, us-west-2 代表俄勒冈地区。如果您不确定要使用哪一个代码,可以查看“Pool Details”页面上的 Pool 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. 选择 上传,然后选择 添加文档
    6. 浏览到您保存已修改的 config.js 文件的本地目录,选中该目录,然后选择 打开
    7. 在对话框左侧选择 上传

    注意:我们在您第一个模块中部署的资产中为您提供有效的实施,而不是让您自己编写浏览器端代码来管理注册、验证和登录流程。cognito-auth.js 文件包含用于处理 UI 事件和调用适当的 Amazon Cognito Identity 软件开发工具包方法的代码。有关该软件开发工具包的更多信息,请参阅 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