Il lancera un assistant qui vous demandera le nom du projet.<\/p>\n L’\u00e9cran suivant vous demandera si vous souhaitez activer l’analyse. D\u00e9sactivez-le et cliquez sur le bouton Cr\u00e9er un projet<\/strong>. Il faudra un certain temps pour provisionner votre projet et apr\u00e8s cela, vous obtiendrez un bouton pour continuer<\/strong> qui vous am\u00e8nera \u00e0 la vue d’ensemble du projet.<\/p>\n Vous devez maintenant ajouter une application Firebase au projet Firebase. Logique? Un projet Firebase vous permet de contenir plusieurs applications Firebase pour iOS, Android, Web et Unity. Pour l’instant, cr\u00e9ons une application Web puisque nous utiliserons React pour cr\u00e9er notre connexion Firebase.<\/p>\n Il vous sera demand\u00e9 de nommer cette application et vous recevrez les cl\u00e9s dont vous aurez besoin pour vous connecter \u00e0 Firebase. Ils ressembleront \u00e0 quelque chose comme\u00a0:<\/p>\n Nous utiliserons ces cl\u00e9s dans notre application React<\/a> pour configurer un fournisseur qui nous permettra d’acc\u00e9der \u00e0 Firebase dans n’importe quel composant sous le fournisseur.<\/p>\n Enfin, allez dans Authentification<\/strong> dans la barre lat\u00e9rale gauche, l’ onglet M\u00e9thode de<\/strong> connexion et activez l’ authentification par e-mail\/mot de passe.<\/strong><\/p>\n Vous \u00eates pr\u00eat\u00a0!<\/p>\n Firebase est disponible pour diff\u00e9rentes piles, y compris JavaScript<\/a> et Node.js<\/a>, que nous allons utiliser maintenant. Nous allons installer seulement deux d\u00e9pendances avec npm :<\/p>\n Installons-les avec<\/p>\n La structure de l’ application React<\/a> sera tr\u00e8s simple, comme suit\u00a0:<\/p>\n et ils seront li\u00e9s comme suit\u00a0:<\/p>\n \u00c9crivons le premier fichier pour la connexion et l’inscription \u00e0 Firebase\u00a0! Nous n’avons pas vraiment besoin de l’\u00e9crire, car cela devrait \u00eatre ajout\u00e9 au fichier o\u00f9 vous \u00e9mettez Cela importe le Super! D\u00e9sormais, tous les composants ci-dessous pourront acc\u00e9der \u00e0 Firebase\u00a0!<\/p>\n \u00c9crivons maintenant le Nous allons cr\u00e9er un composant pour cela. Nous devons d’abord importer certains modules\u00a0:<\/p>\n Nous allons Ensuite, nous allons ajouter un crochet rapide pour g\u00e9rer nos champs de saisie\u00a0:<\/p>\n Et enfin le composant complet, que nous d\u00e9taillerons ci-dessous pour indiquer les parties les plus int\u00e9ressantes, celles li\u00e9es \u00e0 la connexion et \u00e0 l’inscription \u00e0 Firebase.<\/p>\n Tout d’abord, nous nous connectons \u00e0 l’instance Firebase\u00a0:<\/p>\n Comme indiqu\u00e9 pr\u00e9c\u00e9demment, cela est possible car nous avons pr\u00e9c\u00e9demment envelopp\u00e9 le Quand il r\u00e9ussit, il d\u00e9finira les donn\u00e9es renvoy\u00e9es et les champs du formulaire seront remplac\u00e9s par<\/p>\n Les donn\u00e9es renvoy\u00e9es sont un objet volumineux avec des propri\u00e9t\u00e9s tr\u00e8s int\u00e9ressantes, il vaut donc la peine d’ajouter a Le processus de cr\u00e9ation d’un utilisateur est similaire, sauf que nous utilisons la fonction Pour tester notre connexion Firebase et vous inscrire, vous pouvez essayer de vous connecter pour un utilisateur qui n’existe pas afin de voir les erreurs. Apr\u00e8s cela, cr\u00e9ez un utilisateur, puis connectez-vous en tant qu’utilisateur.<\/p>\n D\u00e9mo de connexion \u00e0 Firebase et inscription. Si vous revenez maintenant \u00e0 l’application Firebase > Authentification > Utilisateurs, vous verrez le nouvel utilisateur (vous devrez peut-\u00eatre utiliser le bouton d’actualisation \u00e0 c\u00f4t\u00e9 de Ajouter un utilisateur).<\/p>\n Pour r\u00e9capituler, les \u00e9tapes essentielles pour int\u00e9grer Firebase dans notre application React sont\u00a0:<\/p>\n Consultez le r\u00e9f\u00e9rentiel GitHub \u00e0 l’ adresse https:\/\/github.com\/eliorivero\/firebase-login-sign-up<\/a>. La seule diff\u00e9rence avec celui-ci est que je charge les cl\u00e9s pour configurer Firebase \u00e0 partir d’un fichier .env pour \u00e9viter de les exposer publiquement.<\/p>\n Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous!<\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bffde950b.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6bfffb1eed.png\")
<\/a><\/p>\n![\"Comment](\"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![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00385c64.png\")
<\/a><\/p>\nInstaller les d\u00e9pendances Firebase<\/h2>\n
\n
firebase<\/code><\/a>, cela nous permettra d’acc\u00e9der \u00e0 des choses comme la auth<\/code>biblioth\u00e8que, que nous utiliserons pour effectuer la connexion et aussi cr\u00e9er un nouvel utilisateur<\/li>\nreactfire<\/code><\/a>, une collection d’outils utiles pour travailler avec Firebase dans React. Nous les utiliserons useFirebaseApp<\/code>pour nous connecter au contexte et acc\u00e9der \u00e0 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>\nConfigurer le fournisseur Firebase<\/h2>\n
ReactDOM.render()<\/code>, dans notre cas ce sera 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>et ajoute les cl\u00e9s de configuration que vous lui passerez. Vous pouvez maintenant encapsuler le composant racine, qui dans notre cas est App<\/code>avec le fournisseur\u00a0:<\/p>\nReactDOM.render(, document.getElementById('root')\n);<\/code><\/pre>\nUtiliser le composant de connexion et d’inscription Firebase<\/h2>\n
App<\/code>composant o\u00f9 nous allons importer et utiliser le FirebaseUser<\/code>composant pour cr\u00e9er et connecter un utilisateur. Il n’y a rien de vraiment li\u00e9 \u00e0 Firebase<\/a> ici. Nous allons impl\u00e9menter une connexion et une inscription en utilisant le m\u00eame composant afin que vous puissiez voir comment nous pouvons r\u00e9utiliser le code, donc dans ce composant, nous allons impl\u00e9menter une paire de boutons qui, une fois cliqu\u00e9s, rendront le FirebaseUser<\/code>en mode connexion ou un mode d’inscription\u00a0:<\/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>\nConfigurez la connexion Firebase et inscrivez-vous<\/h2>\n
import React, { useState } from 'react';\nimport { useFirebaseApp } from 'reactfire';\nimport 'firebase\/auth';<\/code><\/pre>\nuseState<\/code>pour quelques choses, de savoir si l’utilisateur est authentifi\u00e9 pour d\u00e9finir des erreurs. Nous allons utiliser le useFirebaseApp<\/code>crochet pour acc\u00e9der \u00e0 la connexion Firebase. Cela n’est possible que parce que nous avons configur\u00e9 le fournisseur Firebase \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente, et il n’est disponible que sous la hi\u00e9rarchie o\u00f9 il a \u00e9t\u00e9 ajout\u00e9. Enfin, nous importerons la auth<\/code>biblioth\u00e8que afin de pouvoir appeler les m\u00e9thodes Firebase pour cr\u00e9er des utilisateurs et se connecter. C’est un moyen efficace car nous ne chargeons que cette biblioth\u00e8que, et pas d’autres comme firestore<\/code>pour la base de donn\u00e9es NoSQL, ou messaging<\/code>pour les messages et les notifications.<\/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>composant avec le fournisseur Firebase. Maintenant que nous sommes accroch\u00e9s \u00e0 Firebase, nous pouvons utiliser la auth<\/code>fonctionnalit\u00e9 et appeler 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>\u00e0 notre setReceivedData()<\/code>fonction pour voir ce qu’elle inclut d’autre.<\/p>\ncreateUserWithEmailAndPassword()<\/code>.<\/p>\nConclusion<\/h2>\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c00594d08.gif\")
<\/a><\/p>\n
\nFait amusant: Chrome se plaint que le mot de passe 123456 que j’utilise pour les tests est compromis, ce qui est vrai.<\/p>\n![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157701-61e6c007b1816.png\")
<\/a><\/p>\n\n
useFirebaseApp<\/code><\/li>\n