Verr\u00e0 avviato un assistente che ti chieder\u00e0 il nome del progetto.<\/p>\n La schermata successiva ti chieder\u00e0 se desideri abilitare l’analisi. Disattivalo e fai clic sul pulsante Crea progetto<\/strong>. Ci vorr\u00e0 del tempo per eseguire il provisioning del tuo progetto, dopodich\u00e9 riceverai un pulsante per continuare<\/strong> che ti porter\u00e0 alla panoramica del progetto.<\/p>\n Ora devi aggiungere un’app Firebase al progetto Firebase. Ha senso? Un progetto Firebase ti consente di contenere diverse app Firebase per iOS, Android, Web e Unity. Per ora, creiamo un’app Web poich\u00e9 utilizzeremo React per creare il nostro login Firebase.<\/p>\n Ti verr\u00e0 chiesto di nominare questa app e ti verranno fornite le chiavi che dovrai utilizzare per connetterti con Firebase. Sembreranno qualcosa del tipo:<\/p>\n Utilizzeremo queste chiavi nella nostra app React<\/a> per configurare un provider che ci consentir\u00e0 di accedere a Firebase in qualsiasi componente del provider.<\/p>\n Infine, vai in Autenticazione<\/strong> nella barra laterale sinistra, nella scheda Metodo di<\/strong> accesso, e abilita l’ autenticazione tramite e -mail\/password .<\/strong><\/p>\n Sei a posto!<\/p>\n Firebase \u00e8 disponibile per diversi stack, inclusi JavaScript<\/a> e Node.js<\/a>, che \u00e8 quello che useremo ora. Installeremo solo due dipendenze con npm:<\/p>\n Installiamoli con<\/p>\n La struttura dell’app React<\/a> sar\u00e0 molto semplice, come segue:<\/p>\n e saranno correlati come segue:<\/p>\n Scriviamo il primo file per l’accesso e la registrazione a Firebase! In realt\u00e0 non abbiamo bisogno di scriverlo, perch\u00e9 questo dovrebbe essere aggiunto al file in cui stai emettendo Questo importa Grande! Ora tutti i componenti seguenti potranno accedere a Firebase!<\/p>\n Scriviamo ora il Creeremo un componente per questo. Per prima cosa dobbiamo importare alcuni moduli:<\/p>\n Per Successivamente aggiungeremo un rapido hook per gestire i nostri campi di input:<\/p>\n E infine il componente completo, che analizzeremo di seguito per indicare le parti pi\u00f9 interessanti, quelle relative al login e alla registrazione di Firebase.<\/p>\n Innanzitutto, ci colleghiamo all’istanza Firebase:<\/p>\n Come accennato in precedenza, ci\u00f2 \u00e8 possibile perch\u00e9 in precedenza abbiamo eseguito il wrapping del Quando ha esito positivo, imposter\u00e0 i dati restituiti e i campi del modulo verranno sostituiti con<\/p>\n I dati restituiti sono un oggetto di grandi dimensioni con propriet\u00e0 molto interessanti, quindi vale la pena aggiungere a Il processo per creare un utente \u00e8 simile, tranne per il fatto che utilizziamo la funzione Per testare il nostro accesso a Firebase e registrarti, puoi provare ad accedere per un utente che non esiste in modo da poter vedere gli errori. Successivamente, crea un utente e quindi accedi come utente.<\/p>\n Demo dell’accesso a Firebase e registrati. Se ora torni all’app Firebase > Autenticazione > Utenti, vedrai il nuovo utente (potresti dover utilizzare il pulsante di aggiornamento accanto ad Aggiungi utente).<\/p>\n Per ricapitolare, i passaggi essenziali per integrare Firebase nella nostra app React sono:<\/p>\n Controlla il repository GitHub su https:\/\/github.com\/eliorivero\/firebase-login-sign-up<\/a>. L’unica differenza con questo \u00e8 che sto caricando le chiavi per configurare Firebase da un file .env per evitare di esporle pubblicamente.<\/p>\n Se hai domande, fammi sapere nei commenti qui sotto!<\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"Come](\"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![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nInstalla le dipendenze di Firebase<\/h2>\n
\n
firebase<\/code><\/a>, che ci consentir\u00e0 di accedere a cose come la auth<\/code>libreria, che utilizzeremo per eseguire l’accesso e anche per creare un nuovo utente<\/li>\nreactfire<\/code><\/a>, una raccolta di strumenti utili per lavorare con Firebase in React. Li useremo useFirebaseApp<\/code>per connetterci al contesto e accedere a 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>\nConfigura il provider Firebase<\/h2>\n
ReactDOM.render()<\/code>, nel nostro caso sar\u00e0 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>e aggiunge le chiavi di configurazione che gli passerai. Ora puoi avvolgere il componente root, che nel nostro caso \u00e8 App<\/code>con il provider:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nUtilizza il componente di accesso e registrazione di Firebase<\/h2>\n
App<\/code>componente in cui importeremo e utilizzeremo il FirebaseUser<\/code>componente per creare e accedere a un utente. Non c’\u00e8 nulla di veramente correlato a Firebase<\/a> qui. Implementeremo un accesso e una registrazione usando lo stesso componente in modo da poter vedere come possiamo riutilizzare il codice, quindi in questo componente implementeremo una coppia di pulsanti che, una volta cliccati, renderanno il FirebaseUser<\/code>in una modalit\u00e0 di accesso o un modalit\u00e0 di iscrizione:<\/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>\nConfigura l’accesso a Firebase e registrati<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>alcune cose, dal sapere se l’utente \u00e8 autenticato per impostare gli errori. Useremo l’ useFirebaseApp<\/code>hook per accedere alla connessione Firebase. Questo \u00e8 possibile solo perch\u00e9 abbiamo configurato il provider Firebase nel passaggio precedente ed \u00e8 disponibile solo nella gerarchia in cui \u00e8 stato aggiunto. Infine, importeremo la auth<\/code>libreria in modo da poter chiamare i metodi Firebase per creare utenti e accedere. Questo \u00e8 un modo efficiente perch\u00e9 stiamo caricando solo questa libreria e non altre come firestore<\/code>per il database NoSQL o messaging<\/code>per messaggi e notifiche.<\/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>componente con il provider Firebase. Ora che siamo collegati a Firebase, possiamo utilizzare la auth<\/code>funzionalit\u00e0 e chiamare 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>alla nostra setReceivedData()<\/code>funzione per vedere cos’altro include.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nConclusione<\/h2>\n
![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nCuriosit\u00e0: Chrome si lamenta che la password 123456 che sto usando per il test \u00e8 compromessa, il che \u00e8 vero.<\/p>\n![\"Come](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n\n
useFirebaseApp<\/code><\/li>\n