Share
I den første delen av denne opplæringsserien så du hvordan du implementerer påloggingsfunksjonen. I denne delen lærer du hvordan du implementerer påloggingsfunksjonaliteten og endrer påloggingsfunksjonaliteten for å sjekke om gyldige brukere fra MongoDB.
La oss begynne med å klone kildekoden fra første del av opplæringen.
git klon https://github.com/royagasthyan/ReactBlogApp-SignIn
Når katalogen er blitt klonet, naviger til prosjektkatalogen og installer de nødvendige avhengighetene.
cd ReactBlogApp-SignIn npm installasjon
Start Node.js-serveren, og du vil få programmet å kjøre på http: // localhost: 7777 / index.html # /.
For denne applikasjonen bruker du MongoDB som backend. Følg instruksjonene i MongoDBs offisielle dokumentasjon for å installere MongoDB på Ubuntu. Når du har installert MongoDB, trenger du en kontakt for å koble MongoDB og Node.js. Installer MongoDB Node.js-driveren med Node Package Manager (eller npm):
npm installere mongodb
Når du har installert driveren, bør du kunne kreve at sjåføren er i søknaden.
Opprett en fil som heter user.js hvor du vil beholde brukerrelaterte ting. Inne i user.js fil, krever MongoDB-klientrelaterte avhengigheter.
Accentsconagua
var MongoClient = krever ('mongodb'). MongoClient;Du bruker et bibliotek som heter hevde for å sjekke det returnerte svaret. Inkludere hevde i user.js fil.
var assert = krever ('assert');La oss navngi vår database bloggen i MongoDB, så er vår database URL vist som vist:
var url = 'mongodb: // localhost: 27017 / Blog';
Inne i user.js fil, opprett og eksporter en funksjon som kalles melde deg på.
module.exports = signup: function () // Koden vil være her
Bruk MongoDB-klienten, prøv å koble til databasen. Når du er koblet til, logger du den tilkoblede meldingen i terminalen.
module.exports = signup: funksjon (navn, e-post, passord) MongoClient.connect (url, funksjon (err, db) console.log ('connected')); Når du har satt opp MongoDB-bakenden, la oss implementere registreringshendelsen. Inne i main.jsx side, inkludere på-endringshendelsen for navnene, e-post og passordinnsatstekstene i melde deg på klasse.
håndtereNavn (e) this.setState (navn: e.target.value) handleEmailChange (e) this.setState (email: e.target.value) handlePasswordChange (e) this.setState ( passord: e.target.value)
Bind de ovennevnte hendelsesendringene i klassekonstruktøren.
konstruktør (rekvisitter) super (rekvisitter); this.handleNameChange = this.handleNameChange.bind (dette); this.handleEmailChange = this.handleEmailChange.bind (dette); this.handlePasswordChange = this.handlePasswordChange.bind (dette);
Definer tilstandsvariablene i melde deg på klassekonstruktør.
this.state = name: ", email:", passord: ";
Definer påmeldingsmetoden inne i melde deg på klasse. Inne i registreringsmetoden, ved å bruke Axios bibliotek, gjør en innleggsmetode ring til melde deg på metode i user.js fil.
signUp () axios.post ('/ signup', navn: this.state.name, email: this.state.email, passord: this.state.password) .then (funksjon (svar) console.log (respons);) .catch (funksjon (feil) console.log (error);); Inne i melde deg på fungere i user.js fil, vil du implementere databasen innsatsen.
Legg til /melde deg på forespørsel handler i app.js fil som vist for å håndtere registrerings klikkhendelse. Inne i /melde deg på forespørsel handler funksjon, ringe til user.signup metode.
app.post ('/ signup', funksjon (req, res) user.signup (",", ") console.log (res);)Krever user.js fil inne i app.js fil.
var bruker = krever ('./ bruker')Lagre endringene ovenfor og start serveren på nytt. Pek nettleseren din til http: // localhost: 7777 / index.html # / signup, og du må ha registreringssiden. Klikk på Melde deg på knappen og du vil ha tilkoblet melding i terminalen.
For å lagre brukerdetaljer i bloggen database, vil du opprette en samling som heter bruker. I brukeroppsamlingen holder du alle brukerdetaljer, for eksempel navn, e-postadresse og passord. De MongoClient.connect returnerer en db parameter som bruker som du kan sette inn en oppføring i bruker samling.
Du vil gjøre bruk av insertOne Metode for å sette inn en enkelt post i brukersamlingen. Endre koden i registreringsmetoden i user.js som vist under:
eb ("Lagret brukeropplysningene."););Her er komplett user.js kode:
var MongoClient = krever ('mongodb'). MongoClient; var assert = krever ('assert'); var url = 'mongodb: // localhost: 27017 / Blog'; modul (portnavn, navn, e-post, passord) MongoClient.connect (url, funksjon (err, db) db.collection ('bruker'). : email, "passord": passord, funksjon (feil, resultat) assert.equal (feil, null); console.log ("Lagret brukeropplysningene.");;; Endre /melde deg på forespørsel handler i app.js fil for å passere i navn, e-post og passord til user.js melde deg på metode.
app.post ('/ signup', funksjon (req, res) var navn = req.body.name; var email = req.body.email; var passord = req.body.password; hvis (navn && email && passord ) user.signup (navn, e-post, passord) annet res.send ('Failure');)Lagre endringene ovenfor og start serveren på nytt. Pek nettleseren din til http: // localhost: 7777 / index.html # / signup. Fyll på brukeropplysningene og klikk på oppmeldingsknappen. Du vil ha Lagret brukeropplysningene. melding i serverterminalen. Logg inn på MongoDB-skallet og sjekk bruker samling i bloggen database. For å finne brukeropplysningene, skriv inn følgende kommando i MongoDB-skallet:
db.user.find ()
Kommandoen ovenfor viser brukerens detaljer i JSON-format.
"navn": "roy", "email": "[email protected]", "passord": "test", "_id": ObjectId ("58f622f50cb9b32905f1cb4b")
I den første delen av opplæringen har du hardkodet brukerinnloggingskontrollen siden brukerregistreringen ikke er implementert. La oss endre den hardkodede påloggingskontrollen og se på MongoDB-databasen for gyldige brukerinnlogging.
Lag en funksjon som heter validateSignIn i user.js fil.
validateSignIn: funksjon (brukernavn, passord, tilbakeringing)
Inne i validateSignIn funksjon, ved hjelp av MongoDB klienten, vil du koble til bloggen database og spør brukerstabellen til en bruker med det angitte brukernavnet og passordet. Du vil gjøre bruk av Finn én Metode for å spørre brukerens samling.
db.collection ('user'). findOne (email: brukernavn, passord: passord, funksjon (feil, resultat) );Sjekk det returnerte resultatet for null hvis oppføringen ikke ble funnet.
hvis (resultat == null) tilbakeringing (falsk) annet tilbakeringing (sant)
Som vist i ovennevnte kode, hvis ingen oppføring er funnet, returneres falsk i tilbakeringingen. Hvis en oppføring er funnet, returneres sant i tilbakeringingen.
Her er komplett validateSignIn metode:
validateSignIn: funksjon (brukernavn, passord, tilbakeringing) MongoClient.connect (url, funksjon (err, db) db.collection ('user'). findOne (email: brukernavn, passord: passord ) if (result == null) callback (false) else callback (true));); I /Logg inn metode i app.js fil, du ringer til validateSignIn metode. I tilbakeringingsfunksjonen, vil du sjekke for svaret. Hvis det er sant, vil det indikere et gyldig påloggingsprogram, ellers et ugyldig påloggingsbilde. Slik ser det ut:
app.post ('/ signin', funksjon (req, res) var user_name = req.body.email; var passord = req.body.password; user.validateSignIn (brukernavn, passord, funksjon (resultat) ) res.send ('Suksess') else res.send ('Feil brukernavn passord'));Lagre endringene ovenfor og start serveren på nytt. Pek nettleseren din til http: // localhost: 7777 / index.html # /. Skriv inn et gyldig brukernavn og passord, og du vil få en suksessmelding logget inn i nettleserkonsollen. Ved å skrive inn et ugyldig brukernavn og passord, vil det vise en feilmelding.
I denne delen av opplæringen så du hvordan du implementerer brukeropplysningsprosessen. Du så hvordan du oppretter registreringsvisningen og sender dataene fra React brukergrensesnittet til Node.js og lagre det i MongoDB. Du har også endret brukerinnloggingsfunksjonen for å sjekke om gyldig brukerinnlogging fra MongoDB-databasen.
I neste del av opplæringen implementerer du funksjonen for legge til og vise innleggssiden.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker eller forslag i kommentarene nedenfor.
