Настройка интерфейса AWS Amplify Authentication для React - PullRequest
Новая
       61

Настройка интерфейса AWS Amplify Authentication для React

0 голосов
/ 11 сентября 2018

Я пытаюсь создать пользовательский интерфейс для всех страниц, связанных с аутентификацией в приложении React.Мне нужна большая форма с различными полями для вставки, когда пользователь регистрируется.

Я следовал этому руководству (https://github.com/richardzcode/Journal-AWS-Amplify-Tutorial), пока не понял, что версии для aws-amplify и aws-amplify-react не былиразные.

Я пытался прочитать документацию об этом, но это слишком поверхностно, я не могу получить его. https://aws -amplify.github.io / ampify-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. Я не могу заставить их работатьправильно из-за этого.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 25 января 2019

Вместо того, чтобы расширять AuthPiece, вам нужно будет расширить компонент SignIn и обязательно импортировать компонент SignIn.Я не сделал это в реакции, но у меня есть в реакции-родной, так что это должно быть довольно похоже. 

import { SignIn } from "aws-amplify-react";

class CustomSignIn extends SignIn {
...
}

И в вашем app.js 

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