Как интегрировать Firebase Authentication в ваше приложение с поддержкой React

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

Итак, без лишних слов, приступим.

Во-первых, нам нужно создать учетную запись Firebase. Так что перейдите на http://firebase.google.com и нажмите Начать, а затем войдите в свою учетную запись Google.

После того, как вы войдете в свою учетную запись Google, вы увидите такую ​​страницу

Нажмите Добавить проект.

После этого нам нужно дать нашему проекту имя. Я даю название ChatApp, но вы можете дать любое имя по вашему выбору.

Нажмите кнопку Продолжить, а затем просто следуйте основным шагам, показанным на рисунках ниже.

Не забудьте перейти на Учетную запись Firebase по умолчанию (если нет) в Выберите или создайте учетную запись Google Analytics в на странице Настроить Google Analytics.

Наконец, нажмите кнопку Создать проект, и, наконец, вы попадете в окно консоли!

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

Поэтому для использования аутентификации по электронной почте нам нужно будет создать приложение firebase. Поэтому щелкните значок веб-приложения в разделе Начать работу, добавив Firebase в свое приложение в окне консоли .

После щелчка по значку веб-приложения нам нужно дать нашему приложению Firebase псевдоним. Я дал ChatApp как имя нашего приложения Firebase.

Нажмите Зарегистрировать приложение.

Информация о нашем приложении Firebase, которое мы только что создали, присутствует в объекте firebaseConfig. Мы передадим этот объект firebaseConfig в наше приложение, поддерживающее реакцию.

Скопируйте объект firebaseConfig и нажмите Перейти в консоль. Как было сказано ранее, нам нужно передать этот объект FirebaseConfig нашему собственному приложению для реагирования. Но перед этим нам сначала нужно установить зависимость firebase в нашем приложении, поддерживающем реакцию. Так что запустите свой терминал и установите Firebase:

npm i --save firebase

Теперь на экране входа в систему нашего приложения добавьте объект Firebaseconfig, который мы скопировали ранее. Нам также нужно немного изменить код на экране входа в систему. Итак, наконец, наш код в Login.js будет выглядеть так:

import React, { Component } from 'react';
import { Container, Content, Form, Item, Input, Label, Button } from 'native-base';
import { Text, Alert } from 'react-native';
import * as firebase from 'firebase';
var firebaseConfig = {
apiKey: "<YOUR API KEY>",
authDomain: "<YOUR AUTH DOMAIN>",
databaseURL: "<YOUR DATABASE URL>",
projectId: "<YOUR PROJECT ID",
storageBucket: "<YOUR STORAGE BUCKET>",
messagingSenderId: "<YOUR MESSAGING SENDERID>",
appId: "<YOUR APP ID>",
measurementId: "<YOUR MEASUREMENT ID>"
};
if(!firebase.apps.length){
firebase.initializeApp(firebaseConfig);
}
export default class Login extends Component {
constructor(props){
super(props);
this.state = {
email : '',
password : '',
}}
static navigationOptions = {
title : 'Login',
}
loginUser = () => {
try{
firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((user) => {this.props.navigation.navigate('Home');})
}
catch(err){
console.log(err.toString());
}}
signUpUser = () => {
try{
if(this.state.password < 6){
Alert.alert('The password length is less than 6');
}
else{
firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password);
this.props.navigation.navigate('Home');
}}
catch(err){
console.log(err.toString());
}}
render() {
return (
<Container>
<Content>
<Form>
<Item floatingLabel><Label>Username</Label>
<Input
onChangeText = {email => this.setState({email : email})}
placeholder = 'Username'
value = {this.state.email}/>
</Item>
<Item floatingLabel last><Label>Password</Label>
<Input
secureTextEntry
onChangeText = {password => this.setState({password : password})}
placeholder = 'Password'
value = {this.state.password}
/>
</Item>
<Button
onPress = {() => this.loginUser()}
style={{marginTop : 40}}
full dark block><Text style={{color:'#fff'}}>Login</Text>
</Button>
<Button
onPress = {() => this.signUpUser()}
style={{marginTop : 15}}full dark block><Text style={{color:'#fff'}}>Register</Text></Button>
</Form></Content>
</Container>
);}}

В код мы добавили функции loginUser и signUpUser, а также создали состояние для хранения электронной почты и пароля, введенного пользователем. Внутри функций входа в систему и регистрации мы ничего особенного не делаем. Мы просто используем функции аутентификации по умолчанию, предоставляемые Firebase, например, в функции loginUser мы используем функцию firebase.auth (). SignInWithEmailAndPassword для входа пользователя в систему.

Теперь нам нужно сообщить приложению Firebase, что мы собираемся использовать аутентификацию по электронной почте. Итак, в окне консоли нажмите Аутентификация на левой боковой панели в разделе «Разработка»:

В разделе "Аутентификация" нажмите Настроить метод входа.

В разделе провайдеры входа нажмите Электронная почта / пароль.

Включите аутентификацию по электронной почте / паролю и нажмите кнопку Сохранить.

И, наконец, аутентификация в нашем приложении полностью функциональна :). Теперь пользователь может войти в систему и зарегистрироваться в нашем приложении!

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

Я просто хотел поделиться примечанием о том, что использование Firebase и просмотр его условий может сначала показаться ошеломляющим для новичка, и вы можете почувствовать следующее:

Но поверьте мне, после первого знакомства вы поймете, что Firebase действительно очень проста в использовании.

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