为 React 自定义 AWS Amplify 身份验证 UI

Posted

技术标签:

【中文标题】为 React 自定义 AWS Amplify 身份验证 UI【英文标题】:Customize AWS Amplify Authentication UI for React 【发布时间】:2019-02-15 11:52:04 【问题描述】:

我正在尝试为与 React 应用程序上的身份验证相关的所有页面创建自定义 UI。我需要在用户注册时插入一个包含各种字段的大表单。

我一直在学习本教程 (https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial),直到意识到 aws-amplifyaws-amplify-react 的版本不同。

我试图阅读有关它的文档,但太肤浅,我无法理解。 https://aws-amplify.github.io/amplify-js/media/authentication_guide#create-your-own-ui

我试图直接在代码中查找并重现我在那里找到的相同模式,但没有成功。

这是我的Auth 组件:

  import  Authenticator  from 'aws-amplify-react'

  import 
    LoginForm,
    RegisterForm,
    ConfirmRegisterForm,
    VerifyContactForm,
    ForgotPasswordForm
   from '../components'

  export default class Login extends Component 
    render () 
      return (
        <Authenticator hideDefault>
          <LoginForm />
          <RegisterForm />
          <ConfirmRegisterForm />
          <VerifyContactForm />
          <ForgotPasswordForm />
        </Authenticator>
      )
    
  

这里是我的LoginForm

    import React from 'react'
    import  Button, Form, Grid, Header, Image, Message, Segment  from 'semantic-ui-react'
    import Auth from '@aws-amplify/auth'
    import  ConsoleLogger as Logger  from '@aws-amplify/core'
    import  AuthPiece  from 'aws-amplify-react'

    const logger = new Logger('LoginForm')

    class LoginForm extends AuthPiece 
      constructor (props) 
        super(props)
        this.signIn = this.signIn.bind(this)
        this._validAuthStates = ['signIn', 'signedOut', 'signedUp']
        this.state = 
        console.log('this.props->', JSON.stringify(this.props))
      

      signIn () 
        const  username, password  = this.inputs
        logger.debug(`username: $username`)

        Auth.signIn(username, password)
        .then(user => this.changeState('signedIn', user))
        .catch(err => this.error(err))
      

      showComponent (theme)         
        const  hide = []  = this.props

       if (hide && hide.includes(LoginForm)) 
        return null
       

       return (
         ...
       )
    
  
  export default LoginForm

当我进入登录表单时,authState 始终为loading。因此,我无法让它们正常工作。

欢迎任何帮助。

【问题讨论】:

Também quero customizar :) (Algum tempo se passou, mas ainda há necessidade e não é fácil de encontrar sobre)。 【参考方案1】:

您需要扩展 SignIn 组件并确保导入 SignIn 组件,而不是扩展 AuthPiece。我没有在 react 中这样做,但我在 react-native 中这样做了,所以应该非常相似。

import  SignIn  from "aws-amplify-react";

class CustomSignIn extends SignIn 
...

在你的 app.js 中

<Authenticator hideDefault=true>
    <LoginForm override=SignIn...this.props />
    ....
</Authenticator>

【讨论】:

是的。这篇文章可能会通过提供更多细节来提供帮助:blog.kylegalbraith.com/2018/11/29/…

以上是关于为 React 自定义 AWS Amplify 身份验证 UI的主要内容,如果未能解决你的问题,请参考以下文章

aws-amplify-react 和 @aws-amplify/ui-react 有啥区别?

AWS Amplify 自定义解析程序 - 不支持的操作“BatchPutItem”

使用 aws amplify cognito 的自定义身份验证流程

在 React 应用程序中为基于 JavaScript AWS Amplify SDK / AWS Cognito 的身份验证分离用户池

AWS Amplify and React - 找不到模块:无法解析“@aws-amplify/analytics”

如何在自定义解析器 AWS Amplify CLI 中查询 API?