Se k\u00e4ynnist\u00e4\u00e4 avustajan, joka kysyy projektin nime\u00e4.<\/p>\n Seuraava n\u00e4ytt\u00f6 kysyy, haluatko ottaa analytiikan k\u00e4ytt\u00f6\u00f6n. Kytke se pois p\u00e4\u00e4lt\u00e4 ja napsauta Luo projekti<\/strong> -painiketta. Projektin valmistelu kest\u00e4\u00e4 hetken, ja sen j\u00e4lkeen saat Jatka<\/strong> -painikkeen, joka vie sinut projektin yleiskatsaukseen.<\/p>\n Sinun on nyt lis\u00e4tt\u00e4v\u00e4 Firebase-sovellus Firebase-projektiin. K\u00e4yd\u00e4 j\u00e4rkeen? Firebase-projektin avulla voit sis\u00e4lt\u00e4\u00e4 useita Firebase-sovelluksia iOS:lle, Androidille, Webille ja Unitylle. Luodaan toistaiseksi verkkosovellus, koska k\u00e4yt\u00e4mme Firebase-kirjautumistunnuksemme luomiseen Reactia.<\/p>\n Sinua pyydet\u00e4\u00e4n nime\u00e4m\u00e4\u00e4n t\u00e4m\u00e4 sovellus, ja sinulle annetaan avaimet, joita sinun tulee k\u00e4ytt\u00e4\u00e4 muodostaaksesi yhteyden Firebaseen. Ne n\u00e4ytt\u00e4v\u00e4t t\u00e4lt\u00e4:<\/p>\n K\u00e4yt\u00e4mme n\u00e4it\u00e4 avaimia React<\/a> -sovelluksessamme palveluntarjoajan m\u00e4\u00e4ritt\u00e4miseen, jotta voimme k\u00e4ytt\u00e4\u00e4 Firebasea miss\u00e4 tahansa palveluntarjoajan alaisuudessa olevassa komponentissa.<\/p>\n Siirry lopuksi vasemman sivupalkin Todennus -kohtaan,<\/strong> Kirjautumistapa-<\/strong> v\u00e4lilehteen ja ota s\u00e4hk\u00f6posti-\/salasanatodennus<\/strong> k\u00e4ytt\u00f6\u00f6n .<\/p>\n Olet valmis!<\/p>\n Firebase on saatavilla erilaisille pinoille, mukaan lukien JavaScript<\/a> ja Node.js<\/a>, joita aiomme k\u00e4ytt\u00e4\u00e4 nyt. Asennamme vain kaksi riippuvuutta npm:ll\u00e4:<\/p>\n Asennamme ne kanssa<\/p>\n React<\/a> -sovelluksen rakenne on hyvin yksinkertainen, seuraavasti:<\/p>\n ja ne liittyv\u00e4t seuraavasti:<\/p>\n Kirjoitetaan ensimm\u00e4inen tiedosto Firebase-kirjautumista ja rekister\u00f6itymist\u00e4 varten! Meid\u00e4n ei itse asiassa tarvitse kirjoittaa sit\u00e4, koska t\u00e4m\u00e4 pit\u00e4isi lis\u00e4t\u00e4 tiedostoon, johon annat T\u00e4m\u00e4 tuo Loistava! Nyt kaikki alla olevat komponentit p\u00e4\u00e4sev\u00e4t Firebaseen!<\/p>\n Kirjoita nyt Luomme t\u00e4t\u00e4 varten komponentin. Meid\u00e4n on ensin tuotava joitain moduuleja:<\/p>\n Aiomme Seuraavaksi lis\u00e4\u00e4mme pikakoukun sy\u00f6tt\u00f6kenttien hallintaan:<\/p>\n Ja lopuksi koko komponentti, jonka erittelemme alla osoittaaksemme kiinnostavimmat osat, jotka liittyv\u00e4t Firebase-kirjautumiseen ja rekister\u00f6itymiseen.<\/p>\n Ensin kytket\u00e4\u00e4n Firebase-instanssiin:<\/p>\n Kuten aiemmin mainittiin, t\u00e4m\u00e4 on mahdollista, koska olemme aiemmin paketoineet Kun se onnistuu, se asettaa palautetut tiedot ja lomakekent\u00e4t korvataan<\/p>\n Palautettu data on suuri objekti, jolla on eritt\u00e4in mielenkiintoisia ominaisuuksia, joten kannattaa lis\u00e4t\u00e4 K\u00e4ytt\u00e4j\u00e4n luontiprosessi on samanlainen, paitsi ett\u00e4 k\u00e4yt\u00e4mme funktiota Testaaksesi Firebase-kirjautumista ja rekister\u00f6itymist\u00e4, voit yritt\u00e4\u00e4 kirjautua sis\u00e4\u00e4n sellaisen k\u00e4ytt\u00e4j\u00e4n kohdalla, jota ei ole olemassa, jotta n\u00e4et virheet. Luo sen j\u00e4lkeen k\u00e4ytt\u00e4j\u00e4 ja kirjaudu sis\u00e4\u00e4n k\u00e4ytt\u00e4j\u00e4n\u00e4.<\/p>\n Firebase-esittely kirjautumisesta ja rekister\u00f6itymisest\u00e4. Jos palaat nyt Firebase-sovellukseen > Todennus > K\u00e4ytt\u00e4j\u00e4t, n\u00e4et uuden k\u00e4ytt\u00e4j\u00e4n (sinun on ehk\u00e4 k\u00e4ytett\u00e4v\u00e4 P\u00e4ivit\u00e4-painiketta Lis\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4 -kohdan vieress\u00e4).<\/p>\n![\"Firebase-kirjautumistunnuksen](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"Firebase-kirjautumistunnuksen](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"Firebase-kirjautumistunnuksen](\"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-kirjautumistunnuksen](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nAsenna Firebase-riippuvuudet<\/h2>\n
\n
firebase<\/code><\/a>, jonka avulla voimme k\u00e4ytt\u00e4\u00e4 asioita, kuten auth<\/code>kirjastoa, jota k\u00e4yt\u00e4mme kirjautumiseen ja my\u00f6s uuden k\u00e4ytt\u00e4j\u00e4n luomiseen<\/li>\nreactfire<\/code><\/a>, kokoelma hy\u00f6dyllisi\u00e4 ty\u00f6kaluja Firebasen kanssa ty\u00f6skentelemiseen Reactissa. K\u00e4yt\u00e4mme niit\u00e4 useFirebaseApp<\/code>yhteyden muodostamiseen kontekstiin ja Firebaseen<\/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>\nM\u00e4\u00e4rit\u00e4 Firebase-palveluntarjoaja<\/h2>\n
ReactDOM.render()<\/code>, meid\u00e4n tapauksessamme se on 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 lis\u00e4\u00e4 sille v\u00e4litett\u00e4v\u00e4t m\u00e4\u00e4ritysavaimet. Voit nyt k\u00e4\u00e4ri\u00e4 juurikomponentin, joka meid\u00e4n tapauksessamme on App<\/code>palveluntarjoajan kanssa:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nK\u00e4yt\u00e4 Firebasen kirjautumis- ja rekister\u00f6itymiskomponenttia<\/h2>\n
App<\/code>komponentti, johon tuomme ja k\u00e4yt\u00e4mme FirebaseUser<\/code>komponenttia k\u00e4ytt\u00e4j\u00e4n luomiseen ja kirjautumiseen. T\u00e4ss\u00e4 ei ole varsinaisesti mit\u00e4\u00e4n Firebaseen<\/a> liittyv\u00e4\u00e4. Aiomme toteuttaa kirjautumisen ja kirjautumisen k\u00e4ytt\u00e4m\u00e4ll\u00e4 samaa komponenttia, jotta voit n\u00e4hd\u00e4, kuinka voimme k\u00e4ytt\u00e4\u00e4 koodia uudelleen, joten t\u00e4ss\u00e4 komponentissa toteutamme painikkeet, joita napsautettuna hahmonnetaan FirebaseUser<\/code>sis\u00e4\u00e4nkirjautumistilassa tai kirjautumistila:<\/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>\nM\u00e4\u00e4rit\u00e4 Firebase-kirjautuminen ja rekister\u00f6idy<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>tehd\u00e4 muutamia asioita, kuten tiet\u00e4\u00e4, onko k\u00e4ytt\u00e4j\u00e4 todennettu, virheiden asettamiseen. K\u00e4yt\u00e4mme useFirebaseApp<\/code>koukkua Firebase-yhteyden muodostamiseen. T\u00e4m\u00e4 on mahdollista vain, koska m\u00e4\u00e4ritimme Firebase-palveluntarjoajan edellisess\u00e4 vaiheessa, ja se on saatavilla vain siin\u00e4 hierarkiassa, johon se lis\u00e4ttiin. Lopuksi tuomme auth<\/code>kirjaston, jotta voimme kutsua Firebase-menetelmi\u00e4 k\u00e4ytt\u00e4jien luomista ja kirjautumista varten. T\u00e4m\u00e4 on tehokas tapa, koska lataamme vain t\u00e4m\u00e4n kirjaston, emme muita, kuten firestore<\/code>NoSQL-tietokantaa tai messaging<\/code>viestej\u00e4 ja ilmoituksia varten.<\/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>komponentin Firebase-palveluntarjoajan kanssa. Nyt kun olemme koukussa Firebaseen, voimme k\u00e4ytt\u00e4\u00e4 auth<\/code>toimintoa ja soittaa 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>funktioomme setReceivedData()<\/code>n\u00e4hd\u00e4ksesi mit\u00e4 muuta se sis\u00e4lt\u00e4\u00e4.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nJohtop\u00e4\u00e4t\u00f6s<\/h2>\n
![\"Firebase-kirjautumistunnuksen](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nHauska tosiasia: Chrome valittaa, ett\u00e4 testaukseen k\u00e4ytt\u00e4m\u00e4ni salasana 123456 on vaarantunut, mik\u00e4 on totta.<\/p>\n
![\"Firebase-kirjautumistunnuksen](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n