Наскоро създадох „приложение React за поставяне на цели“, което използва удостоверяване на Firebase за запазване на потребителска информация.
Когато говорех на моите съученици за това как съм го постигнал, няколко от тях поискаха публикация в блог за това, така че ето ни.
Този процес беше по-лесен, отколкото очаквах, но имаше и няколко „проблема“, от които трябваше да се отърва.
В тази публикация в блога ще прегледам основните стъпки за настройка на удостоверяване с помощта на акаунти в Google и как да съхранявам уникални потребителски данни в база данни на Firebase.
Първа стъпка - Имате нужда от акаунт във Firebase и да го настроите за вашия проект. Разгледайте тези връзки, за да ви помогнат да стартирате това.
Документи на „Firebase“ и „CSS трикове“
Удостоверяването на Google е доста лесно за настройка, защото Google върши цялата тежка работа вместо вас.
Работи с Google акаунта на потребителя, който е активиран в неговия браузър. Докато потребителите са влезли в Google, те просто трябва да могат да избират акаунта си и няма да е необходимо да въвеждат паролата си.
Когато даден потребител е влязъл само в един акаунт в Google в браузъра си, той ще бъде помолен да избере кой акаунт иска да използва при първото си влизане. От този момент нататък те могат да влизат и излизат, без да въвеждат информация. Входът за вашето приложение вече е свързан с идентификационните данни на браузъра им.
Ако даден потребител е влязъл в няколко акаунта в Google в своя браузър, „влизане“ ще му позволи да избере кой акаунт в Google да използва всеки път, когато натисне влизане.
За да започнете с удостоверяването, има няколко стъпки, които трябва да следвате във вашия акаунт във Firebase.
Първо трябва да добавим удостоверяване към нашето приложение Firebase. В страничната лента Разработване изберете раздела за удостоверяване. След това изберете раздела „метод за влизане“ и активирайте Google.
Също така трябва да актуализираме правилата за нашата база данни, за да ги накараме да четат и записват само за влезли потребители. Отидете до раздела База данни и изберете раздела Правила в него.
//Replace your rules with these ones.
{
“rules”: {
“.read”: “auth != null”,
“.write”: “auth != null”
}
}
Във вашето приложение React първо трябва да проверим дали импортираме Firebase правилно.
Ако импортирате цялата Firebase, трябва да сте настроени. Въпреки това може да е по-добра идея просто да добавите частите на Firebase, които искате да използвате. Ето как изглежда моят файл за настройка на Firebase.
Забележка: вашата конфигурация на Firebase е в настройките на вашия акаунт във Firebase. Всеки от вашите ключове ще има стойности, специфични за вашия проект (не празни като този пример).
import firebase from ‘firebase/app’;
import ‘firebase/database’;
import ‘firebase/auth’;
// Your web app’s Firebase configuration
const firebaseConfig = {
apiKey: “”,
authDomain: “”,
databaseURL: “”,
projectId: “”,
storageBucket: “”,
messagingSenderId: “”,
appId: “”
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default firebase;
Страхотно, значи сте инсталирали правилно Firebase, настроили сте проекта си във Firebase и сте го конфигурирали в компонент firebase.js. Спомнихте ли си да импортирате firebase.js в App.js или друг компонент, върху който работите, който се нуждае от него?
Сега, когато това е отстранено, има още едно нещо, необходимо за настройка на оторизация, преди да започнем да пишем функции и т.н.
Запазете тези стойности като променливи. Те идват от модула на Firebase възел и ще трябва да ги препращаме към куп. Декларирайте ги извън вашия клас, точно под вашите импортирания.
const provider = new firebase.auth.GoogleAuthProvider(); const auth = firebase.auth()
Следващата стъпка е да добавите няколко неща за състояние (вътре в super-constructor и this.state= {}). user е мястото, където ще съхраняваме данни, за да проверим дали потребителят е влязъл. userID ще съдържа уникалното Google ID, което е свързано с всеки акаунт в Google.
user: null, userID: “”
След това трябва да напишем няколко функции за влизане и излизане.
За влизане имаме достъп до функция за удостоверяване на Firebase (което ще накара влизането в Google да изскочи).
След това трябва да зададем състояние на потребителя. result.user връща обекта user. Съхраняването на това в състояние като user ще актуализира това от null и ще направи стойността „истинска“, която ще се използва за определяне дали даден потребител е влязъл.
В същото време ще задайте състоянието на userID. user връща обект, така че ще осъществим достъп до ключа uid (потребителски идентификатор) и ще запазим стойността в вземете само уникалния низ за всеки потребител в състояние.
login = () => {
auth.signInWithPopup(provider)
.then((result) => {
const user = result.user;
this.setState({
user,
userID: user.uid
});
});
}
Функцията за излизане е проста, тя просто задава състоянието на потребителя обратно на нула.
logout = () => {
auth.signOut()
.then(() => {
this.setState({
user: null
});
});
}
Време е да използвате тези функции!
Ще визуализираме условно бутон за влизане или излизане на екрана в зависимост от това дали състоянието на потребителя е нула или не. След това всеки бутон приема съответната функция onClick. Залепете това някъде в връщането на рендера, че искате бутона на страницата. Предлагам заглавката.
{this.state.user ? <button onClick={this.logout}>Log Out</button> : <button onClick={this.login}>Log In</button>}
Сега потребителят може да влезе или да излезе! Лесно като това, нали? За да се възползваме от факта, че нашият потребител има акаунт, трябва да направим още няколко неща.
- Изпратете уникални данни към Firebase, за да бъдат съхранени.
- Върнете тези данни за потребителя, когато той влезе и сесията му продължава (известен още като не ги излизайте от всяко опресняване на страницата).
Няма да навлизам в подробности за това как да изпращате (задавате или актуализирате) данни към Firebase, но за да създадете данни на нов потребител във Firebase, трябва да направите една стъпка по различен начин.
Обикновено, ако пишете функция за изпращане на информация към Firebase, ще запазите функцията/пътя на dbRef в променлива и след това,
const dbRef = firebase.database().ref()
или може би, ако искате няколко обекта във вашата Firebase, бихте задали път,
const dbRef = firebase.database().ref(“object-name”)
след това бихте избутали (или задали или актуализирали) тези данни.
dbRef.push({
data1: this.state.something
})
За да запазите уникални потребителски данни, трябва да ги запазите в уникални пътища. Можете да направите това с шаблонен литерал във вашия ref(). Първо наименувайте обекта, който ще държите вашите потребители („потребители“ в този пример), а след това потребителския идентификатор, който имате в състояние.
const dbRef = firebase.database().ref(`users/${this.state.userID}`)
Ако искате подобекти вътре в този потребител, можете да добавите още една стъпка към този път.
const dbRef = firebase.database().ref(`users/${this.state.userID}/goals`)
Това е мястото, където имах най-голямото си препятствие за автентичност. Направих всичко това в крак. Приложението ми изпрати две независими части от данни към Firebase onChange на тези полета. Но след това, когато потребителят влезе и запази първата част от данните, цялото ми приложение се срина и не зареди нищо. Бяха блокирани дори да излязат, за да обновят проблема, тъй като влизането им продължаваше.
Оказа се, че проблемът идва от начина, по който натисках и изтеглях от Firebase. След малко ще се заема с изтеглянето на данни във вашия componentDidMount, но засега разберете, че когато компонентът се монтира, поисках да изтегля всички различни битове данни (в моя случай обект, наречен цели с две стойности и обект, наречен tracker, който съдържа масив от масиви) надолу от моя Firebase за този потребител.
Нов потребител обаче беше изпратил само своите „цели“ на Firebase и след това страницата се опитваше да се монтира както с „цели“, така и с „тракер“ за този потребител. Но „tracker“ все още не съществуваше и страницата щеше да се срине.
Реших това, като се уверих, че във функцията, която задава „целта“ на потребителя, също избутах празна версия на „тракер“.
const dbRef = firebase.database().ref(this.props.user ? `users/${this.props.userID}/goal` : `goal`);
dbRef.set({
number: this.props.goalState,
activity: this.props.goalString
});
firebase.database().ref(this.props.user ? `users/${this.props.userID}/tracker` : `tracker`);
dbRef.update({
tracker: [[0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0]],
});
Това беше „поправка“, но означаваше, че данните на потребителя се изтриват всеки път, когато си поставят цел. Реших, че това ще работи засега, тъй като потребителят най-вероятно ще актуализира целта си само ако задава нова.
Ето как изглеждаше това във Firebase.
Оттогава се сетих за друго решение, което може да се използва в componentDidMount, но все още не е тествано. Може би условно изявление, което пита дали „tracker“ съществува и само изтеглянето му, ако съществува, също би решило този проблем.
На тази бележка, нека преминем към последното парче от пъзела: изобразяване на данните на потребителя на страницата и гарантиране, че влизането продължава.
Ще напишем някакъв код в нашия componentDidMount. Първо се нуждаем от функция, която проверява дали потребителят е влязъл. Това може да отнеме известно време, за да зададем състояние, така че трябва да изпълним зависимия код във функция за обратно извикване.
auth.onAuthStateChanged((user) => {
if (user) {
this.setState({
user,
userID: user.uid
}
След това трябва да прикачите функция за обратно повикване към това
() => {next function goes here}
Вземете обекта, свързан с вашия потребител от Firebase.
const dbRef = firebase.database().ref(`users/${this.state.userID}`)
След това вземете стойността на тези данни и актуализирайте своите състояния с тях.
dbRef.on(‘value’, (data) => {
const dataBase = data.val();
//then update your state to match the things you saved here
}
Направи го! Вашите потребители вече могат да влизат и излизат и можете да запазвате и връщате техните данни!
