Uruchomi asystenta, kt\u00f3ry zapyta Ci\u0119 o nazw\u0119 projektu.<\/p>\n Nast\u0119pny ekran zapyta, czy chcesz w\u0142\u0105czy\u0107 analityk\u0119. Wy\u0142\u0105cz go i kliknij przycisk Utw\u00f3rz projekt<\/strong>. Przygotowanie projektu zajmie troch\u0119 czasu, po czym otrzymasz przycisk Kontynuuj<\/strong>, kt\u00f3ry przeniesie Ci\u0119 do przegl\u0105du projektu.<\/p>\n Teraz musisz doda\u0107 aplikacj\u0119 Firebase do projektu Firebase. Ma sens? Projekt Firebase pozwala zawiera\u0107 kilka aplikacji Firebase na iOS, Androida, przegl\u0105dark\u0119 internetow\u0105 i Unity. Na razie stw\u00f3rzmy aplikacj\u0119 internetow\u0105, poniewa\u017c b\u0119dziemy u\u017cywa\u0107 Reacta do tworzenia naszego loginu Firebase.<\/p>\n Zostaniesz poproszony o nazwanie tej aplikacji i otrzymasz klucze, kt\u00f3rych b\u0119dziesz potrzebowa\u0107 do \u0142\u0105czenia si\u0119 z Firebase. B\u0119d\u0105 wygl\u0105da\u0107 mniej wi\u0119cej tak:<\/p>\n U\u017cyjemy tych kluczy w naszej aplikacji React<\/a>, aby skonfigurowa\u0107 dostawc\u0119, kt\u00f3ry umo\u017cliwi nam dost\u0119p do Firebase w dowolnym komponencie w ramach dostawcy.<\/p>\n Na koniec przejd\u017a do Uwierzytelniania<\/strong> na lewym pasku bocznym, na karcie Metoda<\/strong> logowania i w\u0142\u0105cz uwierzytelnianie e-mail \/ has\u0142o .<\/strong><\/p>\n Wszystko gotowe!<\/p>\n Firebase jest dost\u0119pny dla r\u00f3\u017cnych stos\u00f3w, w tym JavaScript<\/a> i Node.js<\/a>, z kt\u00f3rych b\u0119dziemy teraz korzysta\u0107. Zamierzamy zainstalowa\u0107 tylko dwie zale\u017cno\u015bci z npm:<\/p>\n Zainstalujmy je za pomoc\u0105<\/p>\n Struktura aplikacji React<\/a> b\u0119dzie bardzo prosta i wygl\u0105da nast\u0119puj\u0105co:<\/p>\n i b\u0119d\u0105 one powi\u0105zane w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n Napiszmy pierwszy plik do logowania i rejestracji w Firebase! W\u0142a\u015bciwie nie musimy tego pisa\u0107, poniewa\u017c nale\u017cy to doda\u0107 do pliku, w kt\u00f3rym wystawiasz Spowoduje to zaimportowanie \u015awietny! Teraz wszystkie poni\u017csze komponenty b\u0119d\u0105 mog\u0142y uzyska\u0107 dost\u0119p do Firebase!<\/p>\n Napiszmy teraz Stworzymy do tego komponent. Najpierw musimy zaimportowa\u0107 kilka modu\u0142\u00f3w:<\/p>\n Zajmiemy Nast\u0119pnie dodamy szybki zaczep do zarz\u0105dzania naszymi polami wej\u015bciowymi:<\/p>\n I wreszcie pe\u0142ny komponent, kt\u00f3ry podzielimy poni\u017cej, aby wskaza\u0107 najciekawsze fragmenty, te zwi\u0105zane z logowaniem i rejestracj\u0105 w Firebase.<\/p>\n Najpierw \u0142\u0105czymy si\u0119 z instancj\u0105 Firebase:<\/p>\n Jak wspomniano wcze\u015bniej, jest to mo\u017cliwe, poniewa\u017c wcze\u015bniej opakowali\u015bmy Gdy si\u0119 powiedzie, ustawi zwr\u00f3cone dane, a pola formularza zostan\u0105 zast\u0105pione<\/p>\n Zwracane dane to du\u017cy obiekt o bardzo ciekawych w\u0142a\u015bciwo\u015bciach, wi\u0119c warto doda\u0107 Proces tworzenia u\u017cytkownika jest podobny, z wyj\u0105tkiem tego, \u017ce u\u017cywamy funkcji Aby przetestowa\u0107 nasz login i rejestracj\u0119 Firebase, mo\u017cesz spr\u00f3bowa\u0107 zalogowa\u0107 si\u0119 dla nieistniej\u0105cego u\u017cytkownika, aby zobaczy\u0107 b\u0142\u0119dy. Nast\u0119pnie utw\u00f3rz u\u017cytkownika, a nast\u0119pnie zaloguj si\u0119 jako u\u017cytkownik.<\/p>\n Demo logowania i rejestracji Firebase. Je\u015bli teraz wr\u00f3cisz do aplikacji Firebase > Uwierzytelnianie > U\u017cytkownicy, zobaczysz nowego u\u017cytkownika (mo\u017ce by\u0107 konieczne u\u017cycie przycisku od\u015bwie\u017cania obok Dodaj u\u017cytkownika).<\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c001c1120.png\")
<\/a><\/p>\nvar firebaseConfig = {\n apiKey: \"1A2B3C4D5E6F7G\",\n authDomain: \"appname-a123b.firebaseapp.com\",\n databaseURL: \"https:\/\/appname-a123b.firebaseio.com\",\n projectId: \"appname-a123b\",\n storageBucket: \"appname-a123b.appspot.com\",\n messagingSenderId: \"1234567890\",\n};<\/code><\/pre>\n![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nZainstaluj zale\u017cno\u015bci Firebase<\/h2>\n
\n
firebase<\/code><\/a>, co pozwoli nam uzyska\u0107 dost\u0119p do takich rzeczy jak auth<\/code>biblioteka, kt\u00f3rej u\u017cyjemy do wykonania logowania, a tak\u017ce tworzenia nowego u\u017cytkownika<\/li>\nreactfire<\/code><\/a>, zbi\u00f3r przydatnych narz\u0119dzi do pracy z Firebase w React. U\u017cyjemy ich useFirebaseApp<\/code>, aby po\u0142\u0105czy\u0107 si\u0119 z kontekstem i uzyska\u0107 dost\u0119p do Firebase<\/li>\n<\/ul>\nnpm i firebase reactfire<\/code><\/pre>\n|-- index.js\n|-- App.js\n|-- FirebaseUser\n |-- index.js<\/code><\/pre>\nindex.js --import--> .\/App.js --import--> .\/FirebaseUser<\/code><\/pre>\nSkonfiguruj dostawc\u0119 Firebase<\/h2>\n
ReactDOM.render()<\/code>, w naszym przypadku b\u0119dzie to index.js<\/code>:<\/p>\nimport { FirebaseAppProvider } from 'reactfire';\n\nconst firebaseConfig = {\n apiKey: \"1A2B3C4D5E6F7G\",\n authDomain: \"appname-a123b.firebaseapp.com\",\n databaseURL: \"https:\/\/appname-a123b.firebaseio.com\",\n projectId: \"appname-a123b\",\n storageBucket: \"appname-a123b.appspot.com\",\n messagingSenderId: \"925199572988\",\n appId: \"1:123456789:web:12a34b56c78d90e\"\n};<\/code><\/pre>\nFirebaseAppProvider<\/code>i dodanie kluczy konfiguracyjnych, kt\u00f3re do niego przeka\u017cesz. Mo\u017cesz teraz owin\u0105\u0107 komponent g\u0142\u00f3wny, kt\u00f3ry w naszym przypadku jest App<\/code>u dostawcy:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nU\u017cyj komponentu logowania i rejestracji Firebase<\/h2>\n
App<\/code>komponent, w kt\u00f3rym zaimportujemy i u\u017cyjemy FirebaseUser<\/code>komponentu do utworzenia i zalogowania u\u017cytkownika. Nie ma tu nic zwi\u0105zanego z Firebase<\/a>. Zaimplementujemy logowanie i rejestracj\u0119 przy u\u017cyciu tego samego komponentu, aby\u015b m\u00f3g\u0142 zobaczy\u0107, jak mo\u017cemy ponownie u\u017cy\u0107 kodu, wi\u0119c w tym komponencie zaimplementujemy par\u0119 przycisk\u00f3w, kt\u00f3re po klikni\u0119ciu b\u0119d\u0105 renderowa\u0107 FirebaseUser<\/code>w trybie logowania lub tryb rejestracji:<\/p>\nimport React, { useState } from 'react';\nimport FirebaseUser from '.\/FirebaseUser';\n\nfunction App() {\n const [ signInOrUp, setSignInOrUp ] = useState( '' );\n return (Firebase login\n {\n signInOrUp?(): (<>\n setSignInOrUp( 'signin') } >Log in with existing user\n setSignInOrUp( 'signup') } >Create a new user) }\n\n );\n}\n\nexport default App;\n<\/code><\/pre>\nSkonfiguruj login Firebase i zarejestruj si\u0119<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>si\u0119 kilkoma rzeczami, od sprawdzenia, czy u\u017cytkownik jest uwierzytelniony, po ustawienie b\u0142\u0119d\u00f3w. U\u017cyjemy useFirebaseApp<\/code>haka, aby uzyska\u0107 dost\u0119p do po\u0142\u0105czenia Firebase. Jest to mo\u017cliwe tylko dlatego, \u017ce skonfigurowali\u015bmy dostawc\u0119 Firebase w poprzednim kroku i jest on dost\u0119pny tylko w hierarchii, w kt\u00f3rej zosta\u0142 dodany. Na koniec zaimportujemy auth<\/code>bibliotek\u0119, aby m\u00f3c wywo\u0142ywa\u0107 metody Firebase do tworzenia u\u017cytkownik\u00f3w i logowania. Jest to wydajny spos\u00f3b, poniewa\u017c \u0142adujemy tylko t\u0119 bibliotek\u0119, a nie inne, takie jak firestore<\/code>baza danych NoSQL czy messaging<\/code>wiadomo\u015bci i powiadomienia.<\/p>\nconst useField =() => {\n const [ value, setValue ] = useState( '' );\n return { value, onChange: x => setValue( 'string' === typeof x? x: x.target.value) };\n};<\/code><\/pre>\nfunction FirebaseUser ({ action = 'signin' }) {\n const email = useField();\n const password = useField();\n const [ auth, setAuth ] = useState( null );\n const [ error, setError ] = useState( '' );\n const firebase = useFirebaseApp();\n const setReceivedData = data => setAuth( data );\n const setReceivedError = error => setError( error.message );\n\n const signIn = e => {\n e.preventDefault();\n setError( '' );\n firebase.auth()\n .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );\n };\n\n const signUp = e => {\n e.preventDefault();\n setError( '' );\n firebase.auth()\n .createUserWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );\n };\n\n const manage = 'signin' === action? {\n success: `Logged in as ${ auth?.user.email ?? '' }`,\n method: signIn,\n label: 'Sign In'\n }: {\n success: `Signed up as ${ auth?.user.email ?? '' }`,\n method: signUp,\n label: 'Sign Up'\n };\n\n return ({\n auth? ({ manage.success }\n ): (<>\n\n { manage.label }\n {\n error && { error }\n }) }\n\n );\n}\n\nexport default FirebaseUser;\n<\/code><\/pre>\nconst firebase = useFirebaseApp();<\/code><\/pre>\nApp<\/code>komponent z dostawc\u0105 Firebase. Teraz, gdy jeste\u015bmy ju\u017c pod\u0142\u0105czeni do Firebase, mo\u017cemy skorzysta\u0107 z auth<\/code>funkcji i wywo\u0142a\u0107 signInWithEmailAndPassword<\/code>:<\/p>\nconst signIn = e => {\n e.preventDefault();\n setError( '' );\n firebase.auth()\n .signInWithEmailAndPassword( email.value, password.value) .then( setReceivedData) .catch( setReceivedError );\n};<\/code><\/pre>\nLogged in as ${ auth?.user.email ?? '' }<\/code><\/pre>\nconsole.log()<\/code>do naszej setReceivedData()<\/code>funkcji, aby zobaczy\u0107, co jeszcze zawiera.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nWniosek<\/h2>\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nCiekawostka: Chrome skar\u017cy si\u0119, \u017ce has\u0142o 123456, kt\u00f3rego u\u017cywam do testowania, zosta\u0142o z\u0142amane, co jest prawd\u0105.<\/p>\n
![\"Jak](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n