使用 Amplify 框架进行用户身份验证的完整指南

入门

创建我们的 App ID

创建和配置身份验证服务

测试一下

后续步骤

AWS Amplify 身份验证模块为想要创建具有实际生产就绪用户身份验证的应用程序的开发人员提供身份验证 API 和构建块。

使用 Amplify，您可以结合基于用户名/密码的身份验证以及与 Facebook、Google 或 Amazon 的 OAuth。

我们还提供预先构建的“托管 UI”，提供完整的 OAuth + 用户名/密码流。

本文介绍 Web 应用程序的身份验证。有关 React Native 的文章，请点击此处。

Amazon Cognito 简介

Amplify 框架使用Amazon Cognito作为主要的身份验证提供程序。Amazon Cognito User 是一项强大的用户目录服务，可处理用户注册、身份验证、账户恢复及其他操作。

Amplify 与 Cognito 接口来存储用户数据，包括与 Facebook 和 Google 等其他 OpenID 提供商联合。

Amplify CLI 自动执行这些 AWS 资源的访问控制策略，并通过 GraphQL 提供细粒度的访问控制以保护 API 中的数据。

大多数现代应用程序都需要多种身份验证选项，例如 Facebook 登录 + 用户名/密码登录。Amazon Cognito 允许您使用单个用户注册表跨多种身份验证类型对用户进行身份验证，从而简化了此过程。

在本文中，您将学习如何使用 OAuth 以及用户名和密码登录向您的 React 应用程序添加身份验证。

入门

安装 Amplify CLI

要使用 Amplify 在您的应用程序中构建身份验证，首先需要安装 AWS Amplify CLI。Amplify CLI 是一个命令行工具，可让您创建和部署各种 AWS 服务。

要安装 CLI，我们将运行以下命令：

npm install -g @aws-amplify/cli

接下来，我们将使用来自 AWS 账户的用户配置 CLI：

amplify configure

要观看 CLI 配置过程的视频演示，请单击此处。

创建 React 项目

接下来，我们将创建要使用的 React 应用程序：

npx create-react-app rn-amplify

cd rn-amplify

现在，我们将安装 Amplify 库：

npm install aws-amplify

创建 Amplify 项目

现在我们可以从 React 应用程序的根目录中初始化一个新的 Amplify 项目：

amplify init

这里我们将指导您完成一系列步骤：

• 输入项目名称：amplifyauth（或您喜欢的项目名称）
• 输入环境名称：local（或您喜欢的环境名称）
• 选择您的默认编辑器：Visual Studio Code（或您的文本编辑器）
• 选择您正在构建的应用程序类型：javascript
• 您正在使用什么 JavaScript 框架：react
• 源目录路径：src
• 分发目录路径：build
• 构建命令：npm run-script build
• 启动命令：npm run-script start
• 您想使用 AWS 配置文件吗？是
• 请选择您要使用的配置文件：YOUR_USER_PROFILE

现在，我们的 Amplify 项目已经创建，我们可以继续下一步。

创建我们的 App ID

在我们的应用中，我们将有三种类型的身份验证：

• Facebook（OAuth）
• 谷歌（OAuth）
• Cognito（用户名+密码）

接下来我们需要创建 Facebook 和 Google Apps，以便为每个 Apps 获取 App ID 和 App Secret。

有关Facebook设置的说明请单击此处。

有关Google设置的说明请点击此处。

创建 Facebook 和 Google OAuth 凭证后，继续下一步。

创建和配置身份验证服务

现在我们的 Amplify 项目已经初始化，并且我们获得了来自 Facebook 和 Google 的 App ID 和密钥，我们可以添加身份验证服务了。为此，我们可以运行以下命令：

amplify add auth

# run amplify update auth if you already have a project configured & want to now add Social login

这将引导我们完成一系列步骤：

• 是否要使用默认身份验证和安全配置？使用社交提供程序（联合身份验证）的默认配置
• 您希望用户在使用 Cognito 用户池时如何登录？用户名
• 注册需要哪些属性？电子邮件
• 您希望我们为您创建什么域名前缀？amplifyauthXXXXXXXXX（使用默认或创建自定义前缀）
• 输入您的重定向登录 URI：http://localhost:3000/（稍后可针对生产环境进行更新）
• 是否要添加另一个重定向登录 URI：N
• 输入您的重定向注销 URI：http://localhost:3000/（稍后可针对生产环境进行更新）
• 是否要添加另一个重定向登出 URI：N
• 选择您想要为用户池配置的社交提供商：选择Facebook和Google

在上一步中，我们选择了默认配置和社交提供商（联合身份验证）。这将允许使用用户名/密码组合登录和 OAuth。如果您只需要用户名/密码，则可以选择默认配置或手动配置。

最后，系统将提示您输入 Facebook 和 Google 的应用程序 ID 和机密，输入它们并按 Enter 继续。

现在身份验证服务已成功配置，我们可以通过运行以下命令来创建服务：

amplify push

运行后，amplify push您应该会看到一条成功消息，并且OAuth 端点也应该被注销到控制台：

OAuth 端点看起来应该像这样：

https://amplifyauth8e79c995-8e79c995-local.auth.eu-central-1.amazoncognito.com/

如果您在->键下的任何时候需要此 OAuth 端点，也可以在src/aws-exports.js中引用它。oauthdomain

我们需要使用这个端点来完成配置我们的 Facebook 和 Google Oauth 提供商。

配置 Facebook

接下来，打开我们之前创建的 Facebook 应用程序并单击左侧菜单中的“基本” 。

滚动到书籍并单击“添加平台”，然后选择网站：

对于 _Site URL)，输入/oauth2/idpresponse附加到 Site URL 的 OAuth Endpoint URL：

保存更改。

接下来，在 App Domains 中输入您的 OAuth Endpoint：

保存更改。

接下来，从导航栏中选择“产品”，然后从“Facebook 登录”中进行设置并选择“Web”。

对于有效的 OAuth 重定向 URI，请使用 OAuth 端点 + /oauth2/idpresponse。如果系统提示您输入站点 URL，也请使用此端点（例如https://amplifyauth8e79c995-8e79c995-local.auth.eu-central-1.amazoncognito.com/oauth2/idpresponse）：

保存更改。

单击页面顶部的“开启”开关，确保您的应用处于上线状态。

配置Google

现在 Facebook 已经配置完毕，我们可以配置 Google 了。首先，我们需要进入Google 开发者控制台并更新 OAuth 客户端。

单击客户端 ID 来更新设置。

在授权的 JavaScript 来源下，添加 OAuth 端点。

对于授权重定向 URI，将 OAuth 端点添加/oauth2/idpresponse到 URL 中：

保存更改。

测试一下

现在，我们的身份验证服务应该已经设置完毕，可以开始使用了。我们来测试一下吧。

最简单的方法是使用AWS Amplify 类Auth.federatedSignIn()中的方法Auth。此函数将呈现托管 UI，让用户可以选择使用 Facebook、Google 或用户名/密码进行注册和登录，而无需我们编写任何代码。

为了尝试一下，我们首先配置一下 React 应用，让它识别我们的 Amplify 项目。我们在src/index.js中最后一次导入的代码下方添加了以下代码：

// src/index.js

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

接下来，打开 App.js 并将代码更新为以下内容：

// src/App.js

import React from 'react'
import logo from './logo.svg'
import './App.css'

import { Auth } from 'aws-amplify'

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={() => Auth.federatedSignIn()}>Sign In</button>
      </header>
    </div>
  )
}

export default App

现在，运行该应用程序：

npm start

现在，当应用程序启动时，我们应该能够使用登录按钮登录！

添加更多功能

现在我们已经添加了简单的登录方式，接下来的步骤是什么？我们将逐步讲解以下内容：

1. 了解如何注销用户并检查当前登录的用户
2. 为 OAuth 提供商添加自定义按钮
3. 如何添加用户名/密码登录的自定义表单（示例）
4. 监听身份验证变化（身份验证事件发生时触发）

如何注销用户并检查当前登录用户

现在用户已经登录，我们如何知道他们确实登录了呢？我们可以随时使用AuthAmplify 中的类来检查当前登录用户的状态。

我们将代码更新如下，以便我们可以添加“退出”按钮以及一个按钮来检查当前登录用户的状态：

// src/App.js

import React from 'react'
import logo from './logo.svg'
import './App.css'

import { Auth } from 'aws-amplify'

function checkUser() {
  Auth.currentAuthenticatedUser()
    .then(user => console.log({ user }))
    .catch(err => console.log(err))
}

function signOut() {
  Auth.signOut()
    .then(data => console.log(data))
    .catch(err => console.log(err))
}

function App(props) {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={() => Auth.federatedSignIn()}>Sign In</button>
        <button onClick={checkUser}>Check User</button>
        <button onClick={signOut}>Sign Out</button>
      </header>
    </div>
  )
}

export default App

现在，当我们运行我们的应用程序时，我们可以注销有关当前登录用户的信息以及将用户注销。

为 OAuth 提供商添加自定义按钮

如果我们不想使用托管 UI，而是想从头开始创建自己的 UI，该怎么办？这很容易做到。该类Auth还提供了几个方法，我们可以使用这些方法直接调用 OAuth 提供程序：

Auth.federatedSignIn({provider: 'Google'})
Auth.federatedSignIn({provider: 'Facebook'})

让我们更新我们的应用程序以拥有几个自定义 OAuth 按钮：

<button
  onClick={() => Auth.federatedSignIn({provider: 'Facebook'})}
>Sign In with Facebook</button>

<button
  onClick={() => Auth.federatedSignIn({provider: 'Google'})}
>Sign In with Google</button>

现在，我们已经创建了一个自定义按钮，用于通过我们的 OAuth 提供商登录。

如果您对此的现场演示和代码感兴趣，请查看amplifyauth.dev并在此处查看 GitHub 中的代码。

添加用于用户名/密码登录的自定义表单

如果我们还想创建一个自定义表单来登录用户怎么办？我们可以使用现有的 Auth 类配置来实现。

Auth 类有 30 多种方法可用于管理用户的所有身份验证任务，例如注册用户、登录用户、处理 MFA 以及与用户管理相关的所有功能。（在此处查看 AuthClass API ）。

要使用我们现有的设置开始自定义表单，您可以使用以下方法来注册用户、确认注册（MFA）和登录用户：

// sign user up
Auth.signUp({
  username: someUsername, password: somePassword, attributes: { email: someEmail }
})

// confirm sign up
Auth.confirmSignUp(someUsername, authenticationCode)

// sign user in
Auth.signIn(someUsername, somePassword)

这些方法是异步的并返回承诺，因此您可以检查它们是否成功。

要查看使用此流程的自定义表单，请查看此文件。

如果您对此的现场演示和代码感兴趣，请查看amplifyauth.dev并在此处查看 GitHub 中的代码。

您还可以查看此 repo，了解不同框架中的端到端示例，并使用自定义身份验证流程完成受保护的路由。

监听身份验证事件

现在我们已经有了用户登录和退出的功能，如果我们想根据登录状态执行某些操作怎么办？我们可以使用 Amplify 库轻松监听所有身份验证更改。

我们将使用的类是Hub。

让我们创建一个监听器来监听所有身份验证事件并将其记录下来：

// src/App.js

// import useEffect hook
import React, { useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

// import Hub
import { Auth, Hub } from 'aws-amplify'

function checkUser() {
  Auth.currentAuthenticatedUser()
    .then(user => console.log({ user }))
    .catch(err => console.log(err));
}

function signOut() {
  Auth.signOut()
    .then(data => console.log(data))
    .catch(err => console.log(err));
}

function App(props) {
  // in useEffect, we create the listener
  useEffect(() => {
    Hub.listen('auth', (data) => {
      const { payload } = data
      console.log('A new auth event has happened: ', data)
       if (payload.event === 'signIn') {
         console.log('a user has signed in!')
       }
       if (payload.event === 'signOut') {
         console.log('a user has signed out!')
       }
    })
  }, [])
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={() => Auth.federatedSignIn()}>Sign In</button>
        <button onClick={checkUser}>Check User</button>
        <button onClick={signOut}>Sign Out</button>
        <button onClick={() => Auth.federatedSignIn({provider: 'Facebook'})}>Sign In with Facebook</button>
        <button onClick={() => Auth.federatedSignIn({provider: 'Google'})}>Sign In with Google</button>

      </header>
    </div>
  );
}

export default App

现在，每当用户执行任何身份验证事件时，身份验证数据都将被记录到控制台。

后续步骤

现在您已为应用添加了身份验证功能，可以开始使用 GraphQL 或 AWS Lamba 为应用添加安全后端和 API。要了解更多信息，请点击此处。

如果您想使用 Amplify 控制台托管您的应用程序，请单击此处或观看此视频以了解如何操作。

我叫Nader Dabit。我是 Amazon Web Services 的开发倡导者，负责AWS AppSync和AWS Amplify等项目。我专注于跨平台和云端应用程序开发。