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