Можно ли настроить экраны регистрации и входа по умолчанию для пакета aws-ampify-react-native?

Чтобы иметь экран аутентификации по умолчанию, я могу просто сделать это (https://github.com/aws-samples/aws-mobile-react-native-starter):

import { withAuthenticator } from 'aws-amplify-react-native';
export default withAuthenticator(App);

И я получаю довольно уродливый стандартный экран входа в систему по умолчанию:

Тогда документы говорят, что я не могу изменить значение по умолчанию, мне нужно создать свой собственный (https://github.com/aws-samples/aws-mobile-react-native-starter):

Вы можете либо использовать этот компонент более высокого порядка, либо создать свой собственный пользовательский интерфейс и также использовать API от Amplify.

Но также они говорят, что я могу настроить экраны входа по умолчанию (https://github.com/aws/aws-amplify/blob/master/README.md):

AWS Amplify предоставит вам настраиваемый пользовательский интерфейс для распространенных случаев использования, таких как регистрация пользователей и вход в систему.

Вопрос в том, можем ли мы настроить экран по умолчанию или мы должны создать свои собственные экраны, если мы хотим чего-то необычного?


authentication react-native aws-amplify amazon-cognito
person Green    schedule 14.06.2018    source источник
comment
У меня такая же проблема. Я хочу, чтобы у пользователя был уникальный адрес электронной почты для signUp () и он мог изменять пользовательский интерфейс и удалять MFA для signIn (). Есть ли прогресс?   -  person Dr. Younes Henni    schedule 24.07.2018

Ответы (4)


arrow_upward
7
arrow_downward

Все компоненты Amplify Authenticator можно импортировать отдельно из aws-ampify-react-native. Вы можете скопировать исходный код репозитория (https://github.com/aws-amplify/amplify-js/tree/master/packages/aws-amplify-react-native/src) в свой собственный проект, измените его и импортируйте оттуда. * Если вы хотите получить пакет для другого фреймворка - React, Vue, Angular и т. Д., Посетите здесь https://github.com/aws-amplify/amplify-js/tree/master/packages/aws.-amplify-react-native.

В настоящее время в моем проекте я настраиваю SignUp, SignIn and ConfigrmSignUp компонент, как показано ниже. Это предлагаемый способ создания собственного пользовательского интерфейса, который без проблем работает с аутентификатором Amplify.

Узнайте больше здесь: https://aws-amplify.github.io/docs/js/authentication#create-your-own-ui

import {
  withAuthenticator,
  SignUp,
  ConfirmSignIn,
  ConfirmSignUp,
  ForgotPassword,
  VerifyContact,
  Greetings,
  Loading,
  RequireNewPassword
} from 'aws-amplify-react-native';

import { 
  Authenticator, 
  ConfirmSignUpScreen, <----- customized authenticator component
  SignUpScreen, <----- customized authenticator component
  SignInScreen <----- customized authenticator component
} from './screens/auth';

export default withAuthenticator(App, false, [
  <Loading />
  <SignInScreen />  <----- customized authenticator component
  <ConfirmSignIn />  
  <VerifyContact />
  <SignUpScreen />  <----- customized authenticator component
  <ConfirmSignUpScreen />  <----- customized authenticator component
  <ForgotPassword />
  <RequireNewPassword />
  <Greetings />
]);
person C.Lee    schedule 02.11.2018
comment
Ваш ответ очень полезен, спасибо за это! Я немного озадачен некоторыми деталями: почему вы import SignUp, ConfirmSignUp и другие, когда они не используются? Это просто потому, что вы любезно предоставили живой код из своего собственного проекта в своем ответе, или этот импорт действительно необходим? В том же духе второй customized authenticator component будет не ConfirmSignIn из aws-amplify-react-native, а скорее ConfirmSignUpScreen импортировал собственный проект, правильно? Не пытаюсь придирчиво здесь, я просто хотел бы полностью понять концепцию ... - person ssc; 14.04.2019
comment
@ssc спасибо за добрые слова. : D Вы правы, это просто мой проект, и я не думаю, что вам нужно будет добавлять все компоненты в соответствии с комментарием в этом выпуске github.com/aws-amplify/amplify-js/issues/. Также спасибо, что обнаружили там ошибку! - person C.Lee; 15.04.2019
comment
@lee У меня есть пояснение. Если я использую withAuthenticator и мои собственные экраны, нормально ли он работает, вход, подписка и подтверждение ?. Мне нужно настроить только экраны - person sejn; 02.04.2020

arrow_upward
4
arrow_downward

Согласно документам, вы должна иметь возможность заключать ваше приложение в HOC (Authenticator) вместо использования withAuthenticator.

import { Authenticator } from 'aws-amplify-react';

export default class AppWithAuth extends Component {
 render(){
    return (
      <Authenticator>
        <App />
      </Authenticator>
    );
  }
}
person AndrewSteinheiser    schedule 08.10.2018

arrow_upward
0
arrow_downward

У меня была такая же проблема с настройкой компонентов signUp и SignIn для aws-ampify, поэтому я создал эту библиотеку (aws-ampify-react-custom-ui). это пример настройки входа:

    import SignIn from "./SignIn";
    import AmplifyCustomUi from "aws-amplify-react-custom-ui";
    AmplifyCustomUi.setSignIn(SignIn);

для получения дополнительной информации: https://github.com/ysfmag/aws-amplify-react-custom-ui

person ymaghzaz    schedule 21.10.2018

arrow_upward
0
arrow_downward

Да, мы могли настраивать экраны с помощью пакета aws-ampify-react-native. API Amplify CLI вызываются с помощью наших настраиваемых экранов. Логика может отличаться в зависимости от сценария использования. Вот небольшой фрагмент кода, который может вам помочь. Пожалуйста, ref этот документ

   import React, { Component } from 'react';
    import { View } from 'react-native';
    import {
      Authenticator,
      AmplifyTheme
    } from 'aws-amplify-react-native';
    // Custom  screens
    import Home from './screens/Home';
    import SignIn from './screens/SignIn';
    import SignUp from './screens/SignUp';
    import ConfirmSignUp from './screens/ConfirmSignUp';
    import ForgotPassword from './screens/ForgotPassword';
    //Custom theme
    const theme = {
      ...AmplifyTheme,
      container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-around',
        paddingTop: 10,
        width: '100%',
        marginTop: 30
      },
    }
    class App extends Component {

      render() {
        return (
          <View style={{ flex: 1 }}>
            <Authenticator theme={theme} hideDefault={true} hide="Home" 
            includeGreetings={true}
            >
              <SignIn />
              <SignUp/>
              <ConfirmSignUp />
              <ForgotPassword />
              <Home />
            </Authenticator>
          </View>
        );
      }
    }

    export default App;

;)

person Tijo Thomas    schedule 03.05.2019