为 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-amplify
和 aws-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 的身份验证分离用户池