开始使用 AWS

构建无服务器 Web 应用程序

(利用 AWS Lambda、Amazon API Gateway、AWS Amplify、Amazon DynamoDB 和 Amazon Cognito)

构建无服务器 Web 应用程序

模块 2:管理用户

您将创建一个 Amazon Cognito 用户池来管理您的用户账户。

概览

在此模块中,您将创建一个 Amazon Cognito 用户池来管理您的用户账户。您将部署各个页面来让客户注册为新用户、验证其电子邮件地址以及登录站点。

架构概览

架构概览

用户访问您的网站时,首先要注册一个新用户账户。就本研讨会而言,我们只要求用户提供电子邮件地址和密码以进行注册。但是,您可以在自己的应用程序中配置 Amazon Cognito 来要求提供其他属性。

用户提交注册申请后,Amazon Cognito 将向其提供的电子邮件地址发送含验证码的确认电子邮件。要确认他们的账户,用户需要返回您的站点,并输入他们的电子邮件地址和收到的验证码。您也可以使用用于测试的虚假电子邮件地址,在 Amazon Cognito 控制台确认用户账户。

用户确认账户(要么采用电子邮件验证过程,要么通过控制台手动确认)后即可登录。用户登录时,需输入其用户名 (或电子邮件) 和密码。然后,JavaScript 函数会与 Amazon Cognito 通信,使用安全远程密码协议 (SRP) 进行身份验证,并接收返回的一组 JSON Web Token (JWT)。这些 JWT 包含关于用户身份的声明,并将在下一模块中用于对您使用 Amazon API Gateway 构建的 RESTful API 进行身份验证。

 完成时间

30 分钟

 使用的服务

 CloudFormation 模板

如果您想跳到下一模块,可以在同一区域启动您在模块 1 中使用的其中一个 AWS CloudFormation 模板。

区域 CloudFormation 模板
美国东部(弗吉尼亚北部) 启动堆栈 >
美国东部(俄亥俄) 启动堆栈 >
美国西部(俄勒冈) 启动堆栈 >
欧洲(法兰克福) 启动堆栈 >
欧洲(爱尔兰) 启动堆栈 >
欧洲(伦敦) 启动堆栈 >
亚太地区(东京) 启动堆栈 >
亚太地区(首尔) 启动堆栈 >
亚太地区(悉尼) 启动堆栈 >
亚太地区(孟买) 启动堆栈 >

实施

  • Amazon Cognito 提供了两种验证用户身份的机制。您可以使用 Cognito 用户池将注册和登录功能添加到应用程序中,也可以使用 Cognito 身份池通过以下社交身份提供商对用户进行身份验证:Facebook、Twitter 或 Amazon 等,结合 SAML 身份解决方案或采用您自己的身份系统。在此模块中,您将使用用户池作为提供的注册和登录页面的后端。

    1. Amazon Cognito 控制台中,选择创建用户池
    2. 配置登录体验页面的 Cognito 用户池登录选项部分,选择用户名。 保留其他设置(例如提供商类型)的默认值,不要选择任何用户名要求。选择下一步
    3. 配置安全要求页面上,将密码策略模式保留为 Cognito 的默认模式。您可以选择配置多重身份验证(MFA),也可以选择无 MFA 并将其他配置保留为默认配置。选择下一步
    4. 配置注册体验页面上,将所有内容保留为默认值。选择下一步
    5. 配置邮件传送页面上,对于电子邮件提供商,确认已选中使用 Amazon SES 发送电子邮件 — 推荐。在发件人电子邮件地址字段中,按照《Amazon Simple Email Service 开发人员指南》验证电子邮件地址身份中的说明选择已通过 Amazon SES 进行验证的电子邮件地址。
      注意:如果您在下拉列表中没有看到经过验证的电子邮件地址,请确保您在教程开头选择的区域创建了经过验证的电子邮件地址。
    6. 集成您的应用程序页面上,将您的用户池命名为 WildRydes初始应用程序客户端下,将应用程序客户端命名为 WildRydesWebApp,并将其他设置保留为默认设置。
    7. 审核并创建页面上,选择创建用户池
    8. 用户池页面上,选择用户池名称以查看有关您创建的用户池的详细信息。复制用户池概览部分中的用户池 ID,并将其保存在本地计算机上的安全位置。 
    9. 选择应用程序集成选项卡,然后在新创建的用户池的应用程序客户端和分析部分复制并保存客户端 ID
  • js/config.js 文件包含用户池 ID、应用程序客户端 ID 和区域的设置。使用您在前面的步骤中创建的用户池和应用程序的设置更新此文件,并将其上传回您的存储桶中。

    1. 从您的本地机中,在您选择的文本编辑器中打开 wildryde-site/js/config.js 文件。
    2. 使用您在上一节的步骤 8 和步骤 9 中保存的用户池 ID应用程序客户端 ID 的正确值更新文件的 cognito 部分。userPoolID用户池概览部分中的用户池 IDuserPoolClientID 是 Amazon Cognito 的应用程序集成 > 应用程序客户端和分析部分中的应用程序客户端 ID。 
    3. 区域的值应为您创建用户池所在的 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',
        }
    };

        4.保存修改后的文件。

        5.在终端窗口中,添加、提交文件并将其推送到您的 Git 存储库,以将其自动部署至 Amplify 控制台。

    下面是您将在终端窗口中看到的代码块示例:

    $ git add .
    $ git commit -m "new_config"
    $ git push
    
    1. 在 Finder 窗口或 Windows 文件资源管理器中,导航到您在模块 1 中复制到本地计算机的 wildrydes-site 文件夹。 
    2. 打开 /register.html,或者选择网站主页(index.html 页面)上的Giddy Up!按钮。
    3. 填写注册表格,然后选择 Let's Ryde。您可以使用自己的电子邮件地址,也可以使用虚假电子邮件地址。请确保密码中至少包含一个大写字母、一个数字和一个特殊字符。请不要忘记您输入的密码,以便日后使用。您会看到一个提醒,确认您的用户已创建。
    4. 使用以下两种方式之一确认新用户:
      1. 如果您使用的是受您控制的电子邮件地址,则可以通过以下方式完成账户验证流程:访问网站域下的 /verify.html,然后输入您通过电子邮件收到的验证码。请注意,验证电子邮件可能会被放进您的垃圾邮件文件夹中。对于真实的部署,我们建议您配置用户池以使用 Amazon Simple Email Service 从您自己的域发送电子邮件。
      2. 如果您使用的是虚假电子邮件地址,则必须通过 Cognito 控制台手动确认用户。
        1. Amazon Cognito 控制台中,选择 WildRydes 用户池。
        2. 用户选项卡中,您应该会看到与您通过注册页面提交的电子邮件地址对应的用户。选择该用户名可查看用户详细信息页面。
        3. 操作下拉列表中,选择确认账户以完成账户创建过程。
        4. 确认用户账户弹出窗口中,选择确认
    5. 确认新用户使用的是 /verify.html 页面或 Cognito 控制台,然后访问 /signin.html,使用您在注册步骤中输入的电子邮件地址和密码登录。
    6. 如果登录成功,您将被重定向到 /ride.html。您会看到一个通知,指出 API 尚未配置。
      重要提示:复制并保存身份验证令牌,以便在下一个模块中创建 Amazon Cognito 用户池授权方。
    已成功通过身份验证!

此页内容对您是否有帮助?

构建无服务器后端