Det kommer att starta en assistent som fr\u00e5gar dig namnet p\u00e5 projektet.<\/p>\n N\u00e4sta sk\u00e4rm kommer att fr\u00e5ga dig om du vill aktivera analys. St\u00e4ng av den och klicka p\u00e5 knappen Skapa projekt .<\/strong> Det kommer att ta ett tag att tillhandah\u00e5lla ditt projekt och efter det f\u00e5r du en knapp f\u00f6r att forts\u00e4tta<\/strong> som tar dig till projekt\u00f6versikten.<\/p>\n Du m\u00e5ste nu l\u00e4gga till en Firebase-app i Firebase-projektet. \u00c4r vettigt? Ett Firebase-projekt l\u00e5ter dig inneh\u00e5lla flera Firebase-appar f\u00f6r iOS, Android, Web och Unity. L\u00e5t oss nu skapa en webbapp eftersom vi kommer att anv\u00e4nda React f\u00f6r att skapa v\u00e5r Firebase-inloggning.<\/p>\n Du kommer att bli ombedd att namnge den h\u00e4r appen och du kommer att f\u00e5 nycklarna som du beh\u00f6ver anv\u00e4nda f\u00f6r att ansluta till Firebase. De kommer att se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n Vi kommer att anv\u00e4nda dessa nycklar i v\u00e5r React-<\/a> app f\u00f6r att konfigurera en leverant\u00f6r som till\u00e5ter oss att komma \u00e5t Firebase i vilken komponent som helst under leverant\u00f6ren.<\/p>\n Slutligen, g\u00e5 till Autentisering<\/strong> i det v\u00e4nstra sidof\u00e4ltet, fliken Inloggningsmetod<\/strong> och aktivera e- post-\/l\u00f6senordsautentisering<\/strong>.<\/p>\n Du \u00e4r redo!<\/p>\n Firebase \u00e4r tillg\u00e4ngligt f\u00f6r olika stackar, inklusive JavaScript<\/a> och Node.js<\/a> vilket \u00e4r vad vi ska anv\u00e4nda nu. Vi kommer bara att installera tv\u00e5 beroenden med npm:<\/p>\n L\u00e5t oss installera dem med<\/p>\n Strukturen f\u00f6r React-<\/a> appen kommer att vara mycket enkel, enligt f\u00f6ljande:<\/p>\n och de kommer att vara relaterade enligt f\u00f6ljande:<\/p>\n L\u00e5t oss skriva den f\u00f6rsta filen f\u00f6r Firebase-inloggning och registrering! Vi beh\u00f6ver faktiskt inte skriva det, eftersom detta b\u00f6r l\u00e4ggas till i filen d\u00e4r du utf\u00e4rdar Detta importerar Bra! Nu kommer alla komponenterna nedan att kunna komma \u00e5t Firebase!<\/p>\n L\u00e5t oss nu skriva Vi skapar en komponent f\u00f6r detta. Vi m\u00e5ste f\u00f6rst importera n\u00e5gra moduler:<\/p>\n Vi tar D\u00e4refter l\u00e4gger vi till en snabbkrok f\u00f6r att hantera v\u00e5ra inmatningsf\u00e4lt:<\/p>\n Och slutligen hela komponenten, som vi kommer att dela upp nedan f\u00f6r att peka p\u00e5 de mest intressanta delarna, de som \u00e4r relaterade till Firebase-inloggningen och registreringen.<\/p>\n F\u00f6rst kopplar vi till Firebase-instansen:<\/p>\n Som n\u00e4mnts tidigare \u00e4r detta m\u00f6jligt eftersom vi tidigare slog in N\u00e4r det lyckas kommer det att st\u00e4lla in de returnerade data och formul\u00e4rf\u00e4lten kommer att ers\u00e4ttas med<\/p>\n Den data som returneras \u00e4r ett stort objekt med mycket intressanta egenskaper s\u00e5 det \u00e4r v\u00e4rt att l\u00e4gga till en Processen f\u00f6r att skapa en anv\u00e4ndare \u00e4r liknande, f\u00f6rutom att vi anv\u00e4nder funktionen F\u00f6r att testa v\u00e5r Firebase-inloggning och registrera dig kan du testa att logga in f\u00f6r en anv\u00e4ndare som inte finns s\u00e5 att du kan se felen. D\u00e4refter skapar du en anv\u00e4ndare och loggar sedan in som anv\u00e4ndare.<\/p>\n Demo av Firebase-inloggningen och registrera dig. Om du nu g\u00e5r tillbaka till Firebase-appen > Autentisering > Anv\u00e4ndare ser du den nya anv\u00e4ndaren (du kan beh\u00f6va anv\u00e4nda uppdateringsknappen bredvid L\u00e4gg till anv\u00e4ndare).<\/p>\n F\u00f6r att sammanfatta \u00e4r de v\u00e4sentliga stegen f\u00f6r att integrera Firebase i v\u00e5r React-app:<\/p>\n Kontrollera GitHub-f\u00f6rr\u00e5det p\u00e5 https:\/\/github.com\/eliorivero\/firebase-login-sign-up<\/a>. Den enda skillnaden med den h\u00e4r \u00e4r att jag laddar nycklarna f\u00f6r att konfigurera Firebase fr\u00e5n en .env-fil f\u00f6r att undvika att exponera dem offentligt.<\/p>\n Om du har n\u00e5gra fr\u00e5gor, l\u00e5t mig veta i kommentarerna nedan!<\/p>\n![\"S\u00e5](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"S\u00e5](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"S\u00e5](\"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![\"S\u00e5](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nInstallera Firebase-beroenden<\/h2>\n
\n
firebase<\/code><\/a>, som ger oss tillg\u00e5ng till saker som auth<\/code>biblioteket, som vi kommer att anv\u00e4nda f\u00f6r att utf\u00f6ra inloggningen och \u00e4ven skapa en ny anv\u00e4ndare<\/li>\nreactfire<\/code><\/a>, en samling anv\u00e4ndbara verktyg f\u00f6r att arbeta med Firebase i React. Vi anv\u00e4nder dem useFirebaseApp<\/code>f\u00f6r att ansluta till sammanhanget och komma \u00e5t 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>\nKonfigurera Firebase-leverant\u00f6ren<\/h2>\n
ReactDOM.render()<\/code>, i v\u00e5rt fall blir det 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>och l\u00e4gger till konfigurationsnycklarna du skickar till den. Du kan nu sl\u00e5 in rotkomponenten, som i v\u00e5rt fall \u00e4r App<\/code>hos leverant\u00f6ren:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nAnv\u00e4nd Firebase-inloggnings- och registreringskomponenten<\/h2>\n
App<\/code>komponenten d\u00e4r vi ska importera och anv\u00e4nda FirebaseUser<\/code>komponenten f\u00f6r att skapa och logga in en anv\u00e4ndare. Det finns inget riktigt Firebase<\/a> – relaterat h\u00e4r. Vi kommer att implementera en inloggning och registrering med samma komponent s\u00e5 att du kan se hur vi kan \u00e5teranv\u00e4nda koden, s\u00e5 i den h\u00e4r komponenten kommer vi att implementera ett par knappar som n\u00e4r de klickas, \u00e5terger FirebaseUser<\/code>i ett inloggningsl\u00e4ge eller en registreringsl\u00e4ge:<\/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>\nKonfigurera Firebase-inloggningen och registrera dig<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>n\u00e5gra saker, fr\u00e5n att veta om anv\u00e4ndaren \u00e4r autentiserad till att st\u00e4lla in fel. Vi kommer att anv\u00e4nda useFirebaseApp<\/code>kroken f\u00f6r att komma \u00e5t Firebase-anslutningen. Detta \u00e4r bara m\u00f6jligt eftersom vi konfigurerade Firebase-leverant\u00f6ren i f\u00f6reg\u00e5ende steg, och den \u00e4r endast tillg\u00e4nglig under hierarkin d\u00e4r den lades till. Slutligen kommer vi att importera auth<\/code>biblioteket s\u00e5 att vi kan anropa Firebase-metoderna f\u00f6r att skapa anv\u00e4ndare och logga in. Detta \u00e4r ett effektivt s\u00e4tt eftersom vi bara laddar det h\u00e4r biblioteket, och inte andra som firestore<\/code>f\u00f6r NoSQL-databasen eller messaging<\/code>f\u00f6r meddelanden och aviseringar.<\/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>komponenten med Firebase-leverant\u00f6ren. Nu n\u00e4r vi \u00e4r anslutna till Firebase kan vi anv\u00e4nda auth<\/code>funktionen och anropa 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>i v\u00e5r setReceivedData()<\/code>funktion f\u00f6r att se vad mer den inneh\u00e5ller.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nSlutsats<\/h2>\n
![\"S\u00e5](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nKul fakta: Chrome klagar \u00f6ver att l\u00f6senordet 123456 som jag anv\u00e4nder f\u00f6r testning \u00e4r \u00e4ventyrat, vilket \u00e4r sant.<\/p>\n![\"S\u00e5](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n\n
useFirebaseApp<\/code><\/li>\n