Как добавить аутентификацию, чтобы реагировать на родных в трех шагах с помощью FireBase

Автор оригинала: Said Hayani.

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

Это только один пример того, как аутентификация может быть в вашем приложении. Сегодня мы добавим аутентификацию в нативное приложение ADCT, используя FireBase.

1 Установка React-Native-Firebase

Первое, что мы делаем, это установить и инициализировать FireBase внутри нашего приложения. В реактивном родном нам нужно использовать контейнер FireBase для реагирования на родных. Мы собираемся использовать React-Nature-Firebase Отказ

Если вы собираетесь начать новое нативное приложение raction action с царапин, и вы хотите использовать FireBase, вам повезет – вы можете установить React-Firebase Firebase, предварительно интегрированную с помощью реакции на родной CLI.

//
npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase
//** source: https://invertase.io/oss/react-native-firebase/quick-start/new-project

Затем просто установите POD для iOS, запустив следующую команду в корневом каталоге вашего приложения.

cd ios && pod install

Если у вас есть проблемы с установкой нового проекта с FireBase, пожалуйста, обратитесь к Реагистрационные документы Firebase

Добавление React-Nature-Firebase в существующий проект

Установите React-Nature-Firebase Пакет с использованием пряжи или NPM

 yarn add @react-native-firebase/app

или же:

 npm install @react-native-firebase/app

Затем установите Pods для iOS.

Shell CD iOS && POD Установить

Запуск приложения

Для iOS есть два способа сделать это: я лично использую XCode, так как это дает мне четкую идею, если что-то пошло не так, и сборка не удалось.

Всегда убедитесь, что пакет работает – нажмите Пряжа начать Чтобы начать приложение.

Второй способ запуска приложения на iOS запущен командой rac run-iOS-iOS – и это.

Добавление учетных данных FireBase

Этот шаг требует, чтобы мы создали новый проект в Консоль Firebase Отказ

После создания нового проекта на странице приборной панели выберите Добавить Firebase в приложение iOS Отказ Это покажет вам шаги для добавления учетных данных в iOS, как ниже.

Он состоит из нескольких шагов:

Скачать . Googleservice-info.plist Файл и поместите его в папку iOS в рамках вашего проекта.
Инициализировать FireBase

Для андроида

Android имеет разную настройку для Firebase. В настройках проекта в консоли Firebase Выберите Добавить Firebase на Android Отказ

Вы можете поставить любое имя, которое вам нравится в входе имени приложения – просто убедитесь, что он соответствует требованиям FireBase. Затем нажмите Регистрация Отказ

После этого вам нужно скачать Google-Services.json Файл и поместите его в папку Android/App.

Затем следующим шагом является инициализация Android SDK.

Последний шаг – применить плагин FireBase внутри: Android/App/build.gradle Отказ

apply plugin: 'com.google.gms.google-services'

Если у вас есть какие-либо проблемы, выполняющие выше шаги, вы всегда можете ссылаться на Firebase Docs или React-Nature-Firebase Сайты.

Теперь, когда мы выполняемся с интеграцией, следующим шагом является реализация функций FireBase для создания пользователей и входа в React Native.

Добавление входа, логин

Эта фаза проста: просто какой-то код реагирования и JavaScript для вызова функций FireBase. Я собираюсь создать простое интерфейс для входа в систему и регистрацию (это не нужно для этого учебника, чтобы вы могли пропустить этот шаг).

Я поставлю полный исходный код в конце статьи *

Мы будем использовать CreateUserWithemailandPassword Функция для регистрации для нового пользователя. Я уже реализовал всю проверку в форме – нам просто нужно позвонить эту функцию для создания пользователя.

Когда пользователь нажимает кнопку «Продолжить», __dosignup будет называться, и код выглядит так:

const __doSignUp = () => {
  if (!email) {
    setError("Email required *")
    setValid(false)
    return
  } else if (!password && password.trim() && password.length > 6) {
    setError("Weak password, minimum 5 chars")
    setValid(false)
    return
  } else if (!__isValidEmail(email)) {
    setError("Invalid Email")
    setValid(false)
    return
  }

  __doCreateUser(email, password)
}

const __doCreateUser = async (email, password) => {
  try {
    let response = await auth().createUserWithEmailAndPassword(email, password)
    if (response) {
      console.log(tag, "?", response)
    }
  } catch (e) {
    console.error(e.message)
  }
}

Убедитесь, что вы установили @ React - Nature-Firebase/Auth Чтобы иметь возможность звонить auth (). createuserwithemailandpassword (электронная почта, пароль)

// import auth
import auth from "@react-native-firebase/auth"

Функция, которая создает новый пользователь в Firebase, выглядит так:

const __doCreateUser = async (email, password) =>{
    try {
     let response =  await auth().createUserWithEmailAndPassword(email, password);
      if(response){
        console.log(tag,"?",response)
      }
    } catch (e) {
      console.error(e.message);
    }

Если функция бросает ошибку, убедитесь, что метод электронной почты/пароля в разделе аутентификации в консоли Firebase.

Если все прошло хорошо, и введенные данные (электронная почта, пароль) действительны, появится предупреждение. Если вы проверяете раздел аутентификации в консоли FireBase, вы заметите, что создан новый пользователь.

Вот исходный код Подписанкомпонент Отказ

const SigInComponent = () => {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [fetching, setFetching] = useState(false)
  const [error, setError] = useState("")
  const [isValid, setValid] = useState(true)
  const __doSignUp = () => {
    if (!email) {
      setError("Email required *")
      setValid(false)
      return
    } else if (!password && password.trim() && password.length > 6) {
      setError("Weak password, minimum 5 chars")
      setValid(false)
      return
    } else if (!__isValidEmail(email)) {
      setError("Invalid Email")
      setValid(false)
      return
    }

    __doCreateUser(email, password)
  }

  const __doCreateUser = async (email, password) => {
    try {
      let response = await auth().createUserWithEmailAndPassword(
        email,
        password
      )
      if (response && response.user) {
        Alert.alert("Success ✅", "Account created successfully")
      }
    } catch (e) {
      console.error(e.message)
    }
  }

  return (
    
      
        {!!fetching && }
      
      
         Sign Up 
      
      
         {
            setError
            setEmail(text)
          }}
          error={isValid}
        />

         setPassword(text)}
        />
      
      {error ? (
        
          {error}
        
      ) : null}
      
        
          
            Continue
          
        
      
    
  )
}

Для LoginComponent в основном это то же самое, что нам нужно изменить, мы используем SigninWithemailandPassword Метод вместо этого.

const __doSingIn = async (email, password) => {
  try {
    let response = await auth().signInWithEmailAndPassword(email, password)
    if (response && response.user) {
      Alert.alert("Success ✅", "Authenticated successfully")
    }
  } catch (e) {
    console.error(e.message)
  }
}

! [loginsuccess] (loginsuccess.gif

И аутентификация была успешно реализована в нашем приложении ??

Просто одна последняя вещь: если мы должны проверить, будет ли пользователь уже войти в систему, нам нужно отобразить что-то еще вместо экранов входа или входа в систему. Например, мы можем отобразить домашний экран.

Мы можем использовать модуль FireBase для проверки сеанса. Он может быть импортирован из модуля AUTH.

import auth, { firebase } from "@react-native-firebase/auth"

 componentDidMount() {
    //  this.register("said1292@gmail.com", "123456");
    this.__isTheUserAuthenticated();
  }

  __isTheUserAuthenticated = () => {
    let user = firebase.auth().currentUser.uid;
    if (user) {
      console.log(tag,  user);
      this.setState({ authenticated: true });
    } else {
      this.setState({ authenticated: false });
    }
  };

И мы можем изменить UI на основе, если пользователь аутентифицирован или нет. Мы можем отобразить информацию о пользователе, просто используя тот же метод.

firebase.auth().currentUser.email // said543@gmail.com

И выйти из системы, вы можете просто позвонить await firebase.auth (). Подписание () ;

Я уверен, что интеграция навигации, как Реагистрационная навигация Было бы потрясающе, но это не было нашим сосредоточенным в этой статье. Так что не стесняйтесь добавлять навигацию, чтобы вы могли просто навигаться на основе пользователя пользователя.

Не стесняйтесь проверить полный исходный код? На Гадость

Спасибо за прочтение .

Первоначально опубликовано на Shadhayani.com.