See k\u00e4ivitab assistendi, kes k\u00fcsib teilt projekti nime.<\/p>\n J\u00e4rgmisel ekraanil k\u00fcsitakse, kas soovite anal\u00fc\u00fctika lubada. L\u00fclitage see v\u00e4lja ja kl\u00f5psake nuppu Loo projekt<\/strong>. Projekti ettevalmistamine v\u00f5tab veidi aega ja p\u00e4rast seda n\u00e4ete nuppu J\u00e4tka<\/strong>, mis viib teid projekti \u00fclevaate juurde.<\/p>\n N\u00fc\u00fcd peate Firebase’i projekti lisama Firebase’i rakenduse. K\u00f5lab loogiliselt? Firebase’i projekt v\u00f5imaldab teil sisaldada mitut Firebase’i rakendust iOS-i, Androidi, veebi ja Unity jaoks. Praegu loome veebirakenduse, kuna kasutame Firebase’i sisselogimise loomiseks Reacti.<\/p>\n Teil palutakse sellele rakendusele nimi anda ja teile antakse v\u00f5tmed, mida peate Firebase’iga \u00fchenduse loomiseks kasutama. Need n\u00e4evad v\u00e4lja umbes sellised:<\/p>\n Kasutame neid v\u00f5tmeid oma rakenduses React<\/a>, et konfigureerida pakkuja, mis v\u00f5imaldab meil Firebase’ile juurde p\u00e4\u00e4seda mis tahes teenusepakkuja all olevas komponendis.<\/p>\n L\u00f5puks avage vasakpoolsel k\u00fclgribal Autentimine<\/strong>, vahekaart Sisselogimismeetod ja lubage<\/strong> meili\/parooli<\/strong> autentimine.<\/p>\n K\u00f5ik on valmis!<\/p>\n Firebase on saadaval erinevate virnade jaoks, sealhulgas JavaScripti<\/a> ja Node.js<\/a> -i jaoks, mida me n\u00fc\u00fcd kasutame. Installime npm-iga ainult kaks s\u00f5ltuvust:<\/p>\n Paigaldame need koos<\/p>\n Rakenduse React<\/a> struktuur on v\u00e4ga lihtne:<\/p>\n ja need on seotud j\u00e4rgmiselt:<\/p>\n Kirjutame esimese faili Firebase’i sisselogimiseks ja registreerumiseks! Me ei pea seda tegelikult kirjutama, sest see tuleks lisada faili, kuhu v\u00e4ljastate See impordib Suurep\u00e4rane! N\u00fc\u00fcd p\u00e4\u00e4sevad Firebase’ile juurde k\u00f5ik allolevad komponendid!<\/p>\n Kirjutame n\u00fc\u00fcd Loome selle jaoks komponendi. Esmalt peame importima m\u00f5ned moodulid:<\/p>\n Uurime J\u00e4rgmisena lisame sisestusv\u00e4ljade haldamiseks kiirkonksu:<\/p>\n Ja l\u00f5puks t\u00e4iskomponent, mille me allpool jaotame, et tuua v\u00e4lja k\u00f5ige huvitavamad osad, mis on seotud Firebase’i sisselogimise ja registreerumisega.<\/p>\n Esiteks \u00fchendame Firebase’i eksemplari:<\/p>\n Nagu eelnevalt m\u00e4rgitud, on see v\u00f5imalik, kuna Kui see \u00f5nnestub, m\u00e4\u00e4rab see tagastatud andmed ja vormiv\u00e4ljad asendatakse v\u00e4ljadega<\/p>\n Tagastatud andmed on suur objekt, millel on v\u00e4ga huvitavad omadused, nii et tasub lisada Kasutaja loomise protsess on sarnane, v\u00e4lja arvatud see, et kasutame funktsiooni Meie Firebase’i sisselogimise testimiseks ja registreerumiseks v\u00f5ite proovida sisse logida kasutajaga, keda pole olemas, et saaksite vigu n\u00e4ha. P\u00e4rast seda looge kasutaja ja logige seej\u00e4rel kasutajana sisse.<\/p>\n Firebase’i sisselogimise ja registreerumise demo. Kui l\u00e4hete n\u00fc\u00fcd tagasi Firebase’i rakendusele > Autentimine > Kasutajad, n\u00e4ete uut kasutajat (peate v\u00f5ib-olla kasutama valiku Lisa kasutaja k\u00f5rval olevat v\u00e4rskendamisnuppu).<\/p>\n Kokkuv\u00f5tteks on olulised sammud Firebase’i integreerimiseks meie Reacti rakendusse:<\/p>\n Kontrollige GitHubi hoidlat aadressil https:\/\/github.com\/eliorivero\/firebase-login-sign-up<\/a>. Ainus erinevus selle puhul on see, et laadin Firebase’i konfigureerimiseks v\u00f5tmed .env-failist, et v\u00e4ltida nende avalikku paljastamist.<\/p>\n Kui teil on k\u00fcsimusi, andke mulle allolevates kommentaarides teada!<\/p>\n![\"Firebase'i](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"Firebase'i](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"Firebase'i](\"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![\"Firebase'i](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nInstallige Firebase’i s\u00f5ltuvused<\/h2>\n
\n
firebase<\/code><\/a>, mis v\u00f5imaldab meil p\u00e4\u00e4seda juurde n\u00e4iteks auth<\/code>teegile, mida kasutame sisselogimiseks ja ka uue kasutaja loomiseks<\/li>\nreactfire<\/code><\/a>, kasulike t\u00f6\u00f6riistade kogum Firebase’iga t\u00f6\u00f6tamiseks rakenduses React. Kasutame useFirebaseApp<\/code>neid kontekstiga \u00fchenduse loomiseks ja Firebase’ile juurdep\u00e4\u00e4suks<\/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>\nSeadistage Firebase’i pakkuja<\/h2>\n
ReactDOM.render()<\/code>, meie puhul on see 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>ja lisab sellele edastatavad konfiguratsiooniv\u00f5tmed. N\u00fc\u00fcd saate m\u00e4hkida juurkomponendi, mis meie puhul on App<\/code>teenusepakkujaga:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nKasutage Firebase’i sisselogimis- ja registreerumiskomponenti<\/h2>\n
App<\/code>komponendi, kuhu impordime ja mida kasutame FirebaseUser<\/code>kasutaja loomiseks ja sisselogimiseks. Siin pole Firebase’iga<\/a> tegelikult midagi seotud. Rakendame sisselogimise ja registreerumise sama komponendi abil, et saaksite n\u00e4ha, kuidas saame koodi uuesti kasutada, nii et selles komponendis rakendame paar nuppu, millel kl\u00f5psamisel renderdatakse FirebaseUser<\/code>sisselogimisre\u017eiimis v\u00f5i registreerumisre\u017eiim:<\/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>\nSeadistage Firebase’i sisselogimine ja registreeruge<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>m\u00f5nda asja, alates teadmisest, kas kasutaja on autentitud, kuni vigade m\u00e4\u00e4ramiseni. Me kasutame useFirebaseApp<\/code>Firebase’i \u00fchendusele juurdep\u00e4\u00e4su saamiseks konksu. See on v\u00f5imalik ainult seet\u00f5ttu, et seadistasime Firebase’i pakkuja eelmises etapis ja see on saadaval ainult selle hierarhia all, kuhu see lisati. L\u00f5puks impordime auth<\/code>teegi, et saaksime kasutajate loomiseks ja sisselogimiseks kutsuda Firebase’i meetodeid. See on t\u00f5hus viis, kuna laadime ainult seda teeki, mitte muid, nagu firestore<\/code>NoSQL-i andmebaasi v\u00f5i messaging<\/code>s\u00f5numite ja teatiste jaoks.<\/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>pakkisime komponendi eelnevalt Firebase’i pakkujaga. N\u00fc\u00fcd, kui oleme Firebase’iga \u00fchendatud, saame kasutada seda auth<\/code>funktsiooni ja helistada 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>meie setReceivedData()<\/code>funktsiooni, et n\u00e4ha, mida see veel sisaldab.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nJ\u00e4reldus<\/h2>\n
![\"Firebase'i](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nL\u00f5bus fakt: Chrome kaebab, et parool 123456, mida ma testimiseks kasutan, on rikutud, mis on t\u00f5si.<\/p>\n![\"Firebase'i](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n\n
useFirebaseApp<\/code><\/li>\n