Amplify React认证组件的完整指南

xcvxvxc
149 阅读4分钟

几周前，我所在的团队AWS Amplify为React、Vue和Angular推出了全新的认证组件。我想让你快速了解一下你能用这些组件做什么，从启用后端认证到简单的前端流程，再到更复杂的自定义设置。

启用认证

你可以通过Amplify的两种方式启用认证：首先是通过Amplify Studio，其次是通过Amplify CLI。我将向你展示如何通过Studio进行认证；然而，如果更适合你的工作流程，这里有通过命令行进行认证的说明。

首先，进入Amplify控制台。然后点击 "新的应用程序 "并选择 "建立一个应用程序"。然后为你的项目选择一个名字--例如 "amplify-authenticator-demo"。一旦你的应用程序部署完毕，点击 "启动工作室"。在那里，点击工作室登陆页面上的 "启用认证"。

在这里，选择你想要的认证设置。我将使用默认设置，但你可以添加多因素认证、你想从用户那里获得的不同属性，以及包括社交提供者在内的不同登录机制。

一旦你有了你的设置，点击 "部署"。现在你已经为你的应用程序启用了后端认证

应用程序设置

我将创建一个React应用程序来演示认证组件；然而，它也与Vue和Angular兼容，还有更多的框架正在进行中

我将创建一个新的React应用程序。

npx create-react-app amplify-authenticator
cd amplify-authenticator

然后，如果你回到Studio，点击页面右上方的 "部署成功--点击进入下一步"，你会看到一个带有你的应用ID的amplify pull 命令。运行该命令，将你的后端与你的前端同步。如果你收到一个确认浏览器窗口，请接受，然后回答你的CLI中的问题。默认情况下，几乎所有的问题都应该是足够的!

然后，安装Amplify库和React组件。

npm i aws-amplify @aws-amplify/ui-react

在文本编辑器中打开你的应用程序，然后在你的src/index.js 文件中添加以下内容。

import Amplify from 'aws-amplify'
import config from './aws-exports'

Amplify.configure(config)

这将在你的应用程序中配置Amplify!现在添加Amplify的CSS文件和AmplifyProvider 组件。

import '@aws-amplify/ui-react/styles.css'
import { AmplifyProvider } from '@aws-amplify/ui-react'

然后，添加一个AmplifyProvider的实例作为你的React应用程序的顶层。

ReactDOM.render(
  <AmplifyProvider>
    <App />
  </AmplifyProvider>,
  document.getElementById('root')
)

这将为你的应用程序添加Amplify的默认样式。

withAuthenticator组件

让我们用withAuthenticator 高阶组件给我们的应用程序添加一个完整的认证流程。首先，导入它。

import { withAuthenticator } from '@aws-amplify/ui-react'

然后，包住你的App 出口。

export default withAuthenticator(App)

如果你运行你的应用服务器，你会发现你有一个完整的认证流程，包括登录、注册和忘记密码。试试吧!

一旦你创建了一个用户并成功登录，那么你将看到你的组件的内容。在我的例子中是 "你好，世界！"。你也可以在你的应用程序的不同页面上使用这个流程，例如一个表单，这样任何人都可以访问登陆页面，但只有通过认证的用户可以访问该表单。

这个组件会自动检测你的认证设置，所以如果你启用了社交提供者，他们也会在表单上显示为选项。然而，你也可以向withAuthenticator ，以便覆盖这些默认值。例如，即使你没有为你的应用程序配置苹果登录，下面也会显示苹果登录。

export default withAuthenticator(App, {
  socialProviders: ['apple']
})

添加签出和显示用户信息

让我们在我们的应用程序中添加签出功能，并在主页上显示用户。signOut 函数和user 对象是由Authenticator组件传递给我们的组件的，所以我们可以对它们进行解构，然后在我们的应用程序中使用它们!比如说。

function App({ signOut, user }) {
  return (
    <div>
      <h1>Hey, {user.attributes.email}</h1>
      <button onClick={signOut}>Sign out</button>
    </div>
  )
}

用认证器定制你的流程

你可以通过使用Authenticator 组件进一步定制你的流程、字段、文本等。你甚至可以添加国际化，使你的文本在全球范围内按照你的要求显示。

这里有完整的文档来了解更多。

为你的用户界面添加一个主题

你也可以为你的Authenticator组件添加主题。你可以通过CSS变量、JavaScript对象或设计令牌来这样做。我将创建一个JavaScript对象。

const theme = {
  name: 'pretty-princess',
  tokens: {
    colors: {
      background: {
        primary: { value: 'hotpink' }
      }
    }
  }
}

然后，我将它作为一个道具传递给AmplifyProvider

<AmplifyProvider theme={theme}>

现在，我的组件是粉红色的

在文档中了解更多关于主题化的信息。

总结

为了创建你自己的应用程序，请到Amplify控制台，我很想看看你的作品。如果你有任何反馈，请随时给我留言，加入我们的 Discord，或留下GitHub 问题。

avatar
文章
阅读
粉丝