Привет, я Энвер. В этой статье я расскажу об общих шагах по аутентификации пользователя с помощью firebase при разработке мобильного приложения на React-Native.

Firebase - одна из бесплатных платформ, которые Google предлагает пользователям. В качестве примера универсальности вы разработали приложения на любой платформе. Вы можете создать базу данных для своего приложения с помощью Firebase или выполнить операции аутентификации пользователей. В дополнение к этому, он предоставляет множество услуг, таких как Cloud Firestore, Hosting и Cloud Storage. Мы выполним шаги аутентификации с использованием электронной почты и пароля.

Создайте проект и подключитесь к своему приложению

Во-первых, нам нужно создать проект после входа в консоль Google Firebase. После создания проекта мы выбираем платформу (iOS / Android / Web) для приложения, которое будем разрабатывать на экране добавления приложения. После выбора платформы вы увидите страницу для подключения вашего приложения к Firebase. На этой странице нас попросят сначала ввести имя нашего пакета Android (поскольку я создал проект как Android, этот шаг может выполняться по-другому для iOS). Вы можете найти название своего пакета Android в файле AndroidManifest.xml в app / src / main каталоге. Затем вы можете дать своему приложению псевдоним. Наконец, некоторым сервисам Google необходимо сгенерировать ключ для вашего приложения. Поэтому вам необходимо ввести свой специальный сертификат подписи SHA-1. Вы можете изучить информацию о том, как получить свой сертификат здесь.

Здесь вы можете изучить все эти шаги.

После всех этих шагов мы сохраняем приложение и помещаем файл google-services.json в каталог android / app, чтобы подключить firebase к нашему приложению.

Вот несколько фрагментов кода, которые нам нужно добавить в наше приложение.

В каталоге проекта мы добавили «classpath 'com.google.gms: google-services: 4.2.0« в зависимости в android / build.gradle файл.

Наконец, мы добавили плагин apply: 'com.google.gms.google-services' в последнюю строку в сборке. gradle в каталоге android / app. С помощью этих шагов мы активировали службы Google в нашем приложении.

Примечание. После всех этих шагов, как только вы запустите приложение при подключении к Интернету, оно должно быть подключено к Firebase. Если у вас возникли проблемы, выполните указанные выше действия еще раз правильно.

Пакеты React-Native

Чтобы использовать функции Firebase, нам нужно загрузить несколько пакетов и импортировать их в наш код.

Во-первых, мы должны установить модуль« приложение React Native Firebase в корень вашего проекта React Native с помощью NPM или Yarn»:

# Using npm
npm install --save @react-native-firebase/app

# Using Yarn
yarn add @react-native-firebase/app

Затем мы должны установить пакеты ниже, чтобы мы могли использовать модуль аутентификации.

# Install the authentication module
yarn add @react-native-firebase/auth

# If you're developing your app using iOS, run this command
cd ios/ && pod install

Наконец, прежде чем мы начнем писать код, давайте зайдем в консоль Google Firebase и включим метод входа в разделе аутентификации в качестве адреса электронной почты / пароля.

Страницы входа и регистрации

Теперь мы можем использовать Firebase Authentication в нашем приложении. Для этого я использую созданные ранее страницы входа и регистрации.

Страница входа

Здесь мы импортировали модуль аутентификации firebase и позволили существующему пользователю войти в приложение с помощью метода signInWithEmailAndPassword. Мы сделали это в структуре onLoginClick, чтобы этот процесс происходил, когда пользователь нажимает кнопку входа в систему.

Страница регистрации

Здесь мы импортировали модуль аутентификации firebase и позволили новому пользователю зарегистрироваться в приложении с помощью метода createUserWithEmailAndPassword. Мы сделали это в структуре saveUser, чтобы этот процесс происходил, когда пользователь нажимает кнопку сохранения.

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

В примерах кода я использую разные пакеты. Пусть это вас не смущает!

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