GraphQL-todennus React Native- ja Apollon kanssa [osa 1/2]

Express-, MongoDB- ja JSON Web-tokenien käyttö

Olen pelannut Apollon kanssa viime aikoina paljon, ja kuten melkein minkä tahansa sovelluksen kanssa, minun piti lisätä todennus kyseiseen sovellukseen. Katsoin ympärilleni, mutta en löytänyt mitään viestejä, jotka koskisivat todentamista React Native-, GraphQL- ja MongoDB-ohjelmien avulla - niin, mitä me tänään käsittelemme.

Osassa yhtä tämän sarjan opit kuinka määrittää palvelin (käyttämällä GraphQL / Apollo, Mongo, Express ja JSON Web Tokens). Toisessa osassa asennamme React Native -asiakkaan toimimaan sen kanssa kaikessa.

Rakentamamme sovellus on hyvin yksinkertainen, mutta se osoittaa todennusvuoden kriittiset osat. Siinä on 3 näyttöä:

  • Kirjaudu sisään
  • Rekisteröidy
  • Kirjautua ulos

Valmis? Mennään.

Haluatko videota?

Haluatko video-oppaita? Tein tämän opetusohjelman videona, joka löytyy alla.

Perustaa

Käytämme tässä koko ajan kolme työkalua, kaikki ilmaisia, kaikki 100% selainpohjaisia, jotkut vaativat kirjautumisen.

server

Koska tämän opetusohjelman tarkoituksena on vain kytkeä GraphQL / Apollo ja React Native, voimme hyödyntää uskomattoman web-pohjaisen työkalun, Launchpadin.

Tämä menee eteenpäin ja asettaa palvelimemme meille, perustaa GraphQL: n ja antaa meille loppupisteen, jonka kanssa työskennellä. Kun olet valmis tekemään siitä vakavamman, voit viedä helposti koko pikasovelluksen, kaikki nykyinen työsi, ja olet poissa kilpailuihin!

Ehdotan kirjautumista sisään / tilin luomista, jotta voit tallentaa työsi.

Tietokanta

En halua perustaa tietokantaa. Se on henkilökohtainen asia. Se on liian vakavaa minulle. Joten purkan työn aina jollekin toiselle. Tällä kertaa käytämme mlabia Mongo-tietokannan käsittelemiseen - heillä on ilmainen hiekkalaatikkotaso ja se on meille aivan täydellinen.

Sinun on kirjauduttava tähän.

Huomautus tietokannoista: Etkö halua käyttää Mongoa? Voit silti käyttää tätä opetusohjelmaa, käytä vain haluamaasi tietokantaa ja muokkaa kyselyitä toimimaan sen kanssa.

Reagoi omaperäinen

Aion käyttää välipalaa Snack. Se on uskomaton verkkopohjainen tapa rakentaa React Native -sovelluksia. Kun olet valmis, voit viedä sen helposti normaaliin kehitysvirtaan, aivan kuten Launchpad. Yksi ehdotukseni on ladata Expo-sovellus ja käyttää sitä kehityslaitteena, ja mielestäni kokemus on parempi kuin käytettäessä selaimen sisäistä simulaattoria.

Ehdotan kirjautumista sisään / tilin luomista, jotta voit tallentaa työsi, vaikka sitä ei vaadita.

Helpoin asennus historiassa? Sanoisin niin.

Palvelimen määrittäminen

Ensimmäinen asia, jonka teemme, on määrittää palvelimemme Apollo Launchpadilla. Tässä on palvelimen yksinkertaistettu versio, jonka avulla voit aloittaa. Jos olet perehtynyt GraphQL: ään (oletan, että teet sen), otat sen käyttöön nopeasti.

Launchpad-sovelluksessa sinun pitäisi nyt pystyä kysymään "hei" ja saada vastaus.

Ensin tehdään kaikki tarvittavat kyselyt GraphQL-päätepisteellemme. Perusominaisuuksemme vuoksi ainoa tarvitsemme kysely, joka palauttaa käyttäjän. Palauta vain peruskäyttäjäobjekti, jolla on _id ja sähköposti nyt.

Asennetaan nyt tarvittavat mutaatiot, sisäänkirjautuminen ja rekisteröinti. Niiden tulisi hyväksyä sähköposti ja salasana.

Kokeile sitä varmistaaksesi, että sinulla ei ole virheitä.

Yhdistäminen tietokantaan

Kun olet perustanut tilisi mLab: llä ja luonut uuden mongo db-esiintymän, sinun pitäisi nähdä url

MongoDB: //   @ ds121665.mlab.com: 21665 / graphql-auth-demo-1

Sinun on myös luotava käyttäjä tälle tietokannalle (kirjoitusoikeuksilla). Ota tämä URL ja lisää se “salaisuuksiin” nimellä MONGO_URL Launchpadissa. Vaihda ja luomasi käyttäjän arvoihin.

Lisäämällä tähän salaiset arvot, voimme käyttää niitä kontekstifunktiomme kautta, missä me perustamme mongo-yhteytemme. Tätä kontekstitoimintoa kutsutaan joka kerta, kun pyyntö esitetään GraphQL-päätepisteelle, joten haluamme tallentaa viittauksen yhteyteen toiminnon ulkopuolella (sallimme meille tehdä db-yhteyspyynnön vain kerran). Palautamme sitten mongo-muuttujan yhteydessä, jotta pääsemme siihen resolver-toimintoihimme.

Muista tuoda {MongoClient} 'mongodb'stä; tiedoston yläosassa! Launchpad asentaa sen automaattisesti.

Kirjaudu

Katsotaan nyt pääsy tietokantaan resolver-toimintojen kautta… ensimmäinen rekisteröinti. Saamme viittauksen käyttäjäkokoelmaan ja tarkistamme sitten, onko käyttäjällä, jolla on annettu sähköpostiosoite, jo olemassa.

Voimme sitten lisätä käyttäjän asiakirjan kokoelmaan. Käytän bcrypt-tiedostoa käyttäjän salasanan hajauttamiseen, koska sinun ei pitäisi koskaan tallentaa selkeää tekstiä salasanaa tietokantaan! Varmista, että tuot lib:

tuo bcrypt 'bcryptistä';

Aion käyttää asynciä / odottaa, koska sen avulla koodin seuraaminen on helppoa.

Mene eteenpäin ja laukaise se Launchpadissa

Kirjaudu sisään

Sisäänkirjautumismutaatio on hyvin samanlainen kuin juuri koottu.

Ensin tarkistetaan, onko kyseisen sähköpostiosoitteen käyttäjää olemassa.

Sitten vertaamme toimitettua salasanaa ja tallentamiamme salasanaa. Jos ne vastaavat, palauta käyttäjä!

Joten nyt meillä on sisäänkirjautumisen ja rekisteröinnin mutaatiot toimivat, mutta se ei ole vielä kaikki! Emme halua pakottaa käyttäjää kirjautumaan sisään jokaisessa pyynnössä. Tulla sisään…

JSON-verkkotunnukset

JSON Web Token (JWT) on avoin standardi (RFC 7519), joka määrittelee pienikokoisen ja itsenäisen tavan tietojen turvalliselle siirtämiselle osapuolten välillä JSON-objektina. Nämä tiedot voidaan tarkistaa ja luottaa, koska ne on allekirjoitettu digitaalisesti. JWT: t voidaan allekirjoittaa salaisella (HMAC-algoritmilla) tai julkisella / yksityisellä avainparilla RSA: lla.

Meille tämä tarkoittaa, että voimme luoda JWT: n ja käyttää sitä keinona käyttäjän varmasti tunnistaa. Virtaus toimii näin

  1. Käyttäjä kirjautuu sisään tai kirjautuu sisään
  2. Palvelin palauttaa JWT: n
  3. Asiakas tallentaa JWT: n paikalliseen tallennustilaan (katettu osassa 2)
  4. JWT välitetään kunkin pyynnön kanssa asiakkaalta palvelimelle (Valtuutus-otsikossa - katettu osassa 2)
  5. Palvelin käyttää JWT: tä käyttäjän tietojen keräämiseen ja lisäämiseen kontekstiin
Huomautus vaiheesta 5: Koska halusin pitää kaikki selainpohjaiset, meidän on tehtävä tämä manuaalisesti. Jos sinulla on palvelimen täydellinen hallinta, voit käyttää express-jwt: tä automaattisesti tämän tekemiseen. Tämä on hyvä tapa oppia mitä moduuli tekee!

Salaisuus

JWT allekirjoitetaan salaisella arvolla. Haluamme keksiä yhden ja lisätä sen Launchpadin salaisuuksiin, kuten teimme MONGO_URL. Tallennan sen nimellä JWT_SECRET arvolla supersalaisuus.

Nyt, käyttämällä tätä salaisuutta, haluamme luoda uuden JWT: n ja palauttaa sen käyttäjäobjektille, kun he kirjautuvat onnistuneesti sisään tai kirjautuvat sisään. Aion ensin lisätä jwt käyttäjätyyppiin tyyppimäärittelyihimme.

Varmista, että lisäät jwt-tiedoston tuonti jsonwebtokenista; tiedoston yläosaan.

Luodaan tunnus

Sitten, onnistuneen kirjautumisen jälkeen luon JWT: n. Käytämme käyttäjän tunnusta osana hyötykuormaa, ja salaisuudet tulevat kontekstista.

Teemme saman ilmoittautumisen yhteydessä.

Nykyisen käyttäjän lisääminen kontekstiin

Lopuksi (ainakin tämän osan osalta) meidän on lisättävä nykyinen käyttäjä kontekstiin.

Muista, että jos et käytä Launchpadia, voit käyttää express-jwt: tä automaattisesti. Minun on myös huomattava, että perustan tämän toiminnon vähän pois tästä käynnistyslevystä, joka tekee saman asian, mutta Auth0-palveluun.

Luo ensin uusi getUser-niminen toiminto ja tarkista, onko otsikossa potentiaalisesti kelvollinen valtuustunnus.

Sitten yritämme vahvistaa hyväksytty tunnus.

Sitten yritämme noutaa käyttäjän tietokannastamme _id-tiedoston avulla, jonka panimme alun perin jwt-hyötykuormaan. ObjectId tulee mongdb-moduulista.

Lopuksi siirrytään eteenpäin ja kutsutaan tämä getUser-toiminto kontekstifunktiosta.

Voimme myös päivittää currentUser-kyselyn käyttäjän palauttamiseksi tilanteesta.

Mennään eteenpäin ja tarkistetaan tämä ...

Ja siinä se on! Suoritettava lähdekoodi on saatavana alla

Tämä oli vasta tämän sarjan ensimmäinen osa, osassa 2 yhdistämme React Native -sovelluksen siihen.

Osa 2 on saatavilla täältä:

Nimeni on Spencer. Opetan ihmisiä rakentamaan -sovelluksia React Native -sovelluksen avulla. Kiinnostaako enemmän korkealaatuisia oppaita? Rekisteröidy sähköpostiluettelooni.