Добро пожаловать во вторую часть моей серии статей о Firebase! В предыдущем посте я говорил о том, как создать приложение Firebase и настроить конфигурации, а что нет. Вы можете ознакомиться с предыдущим постом здесь.
Настроить Firebase в ваше приложение довольно просто. Мне удалось довольно легко работать с Firebase благодаря помощи нескольких ресурсов, которые я добавлю в конце этого поста. Существует несколько способов сделать это, как вы уже знаете из его документации, видеоуроков на YouTube и т. д. Способ, который Firebase предлагает в своих документах, заключается в том, чтобы скопировать код, который вы получаете, нажав «Добавить Firebase в свое веб-приложение». ' на панели управления проектом в ваш файл index.html в качестве тега скрипта и инициализируйте ваше приложение в файле App.js. Я решил сделать это по-другому, просто чтобы я мог видеть и иметь все в одном файле. Я создал файл с именем base.js на том же уровне, что и мой App.js. В верхней части файла я начал с импорта firebase и вставки кода конфигурации приложения, который я скопировал из консоли Firebase.
import firebase from 'firebase';
const config = {
apiKey: "API KEY",
authDomain: "APPURL.firebaseapp.com",
databaseURL: "DATABASE URL",
projectId: "PROJECT ID",
storageBucket: "STORAGE BUCKET",
messagingSenderId: "SENDER ID"
};
const app = firebase.initializeApp(config);
const database = app.database().ref().child('articles');
const facebookProvider = new firebase.auth.FacebookAuthProvider();
export { app, database, facebookProvider }
Очевидно, вам нужно будет вставить информацию, относящуюся к вашему собственному приложению. Я также использую службу базы данных Firebase, о которой, возможно, расскажу в следующий раз. Не обращайте внимания на этот код! И, как я сказал в своем предыдущем посте, я использую аутентификацию для входа в Facebook, поэтому у меня есть это в моем коде.
Существует вызов метода, предоставляемый Firebase, который облегчает нашу жизнь при инициализации наших приложений. Вы можете сделать это, установив для переменной, которую в данном случае я назвал app, значение firebase.initializeApp(config). config — это информация о вашем приложении. Это все, что нужно, чтобы действительно начать!
В моем App.js мое состояние выглядит так:
import ...
...
import { app } from './base';
this.state = {
currentUser: null,
authenticated: false
}
Когда пользователь не вошел в систему на первом этапе приложения, я хотел, чтобы мой currentUser в состоянии был равен нулю. Это означало бы, что пользователь не аутентифицирован, и, следовательно, состояние аутентификации равно false. Двигаясь дальше, я использовал один из методов Firebase, который только проверяет, вошел ли пользователь в систему, который называется auth().onAuthStateChanged. Поэтому, если пользователь вошел в систему, я хотел убедиться, что мое состояние меняется. Я поместил следующую логику в componentWillMount().
componentWillMount(){
app.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({
authenticated: true,
currentUser: user
})
} else {
this.setState({
authenticated: false
})
}
})
}
Следующий шаг — установить для текущего пользователя наши реквизиты currentUser, которые я собираюсь передать своим дочерним компонентам. Я создал функцию с именем setCurrentuser (я не использовал привязку, потому что, как многие знают, мы можем использовать стрелочные функции для переноса области действия вызывающей стороны).
setCurrentUser = (user) => {
if (user) {
this.setState({
currentUser: user,
authenticated: true
})
} else {
this.setState({
currentUser: null,
authenticated: false
})
}
}
Эта функция проверяет, существует ли пользователь в данный момент в приложении, и если да, устанавливает состояние текущего пользователя на этого конкретного пользователя и изменяет значение «аутентифицировано» на «истина». Если пользователь не определен, ничего не делайте и оставьте currentUser равным null и аутентифицированным как false, как в исходном состоянии приложения. После того, как это будет сделано, я передал currentUser и аутентифицировался в качестве реквизита на моей панели навигации. Панель навигации нуждалась в этой информации, потому что, если пользователь вошел в систему, я не хотел, чтобы отображалась кнопка регистрации/входа, а если пользователь не вошел в систему, я хотел показать кнопку.
Логика проверки пользователей в приложении теперь работает. Мне все еще нужно поговорить о том, как пользователи будут регистрироваться и входить в систему, используя свою информацию, и в этот раз это будет пост, который будет опубликован на следующей неделе. По сути, идея состоит в том, чтобы иметь компонент «Регистрация и вход», который имеет поля ввода для имени пользователя, электронной почты, пароля, любой информации, которую вы хотите, с кнопкой для сбора этих битов из формы для создания объекта пользователя в Firebase и входа пользователя . Существуют полезные методы, предоставляемые Firebase, чтобы помочь в этом процессе. Я расскажу об этом подробнее в следующем посте, а также немного о службе базы данных.
