de Oladipupo Bello

Cum să cuiezi autentificarea socială în GraphQL

Cum sa cuiezi autentificarea sociala in GraphQL
Ilustrație de kemzy73

În acest articol veți învăța cum să efectuați autentificare socială în GraphQL server cu Pașaport.JS.

Poate că aveți un sistem de autentificare instalat, care utilizează directive sau ambalaje de rezolvare pentru a vă proteja schema de accesul neautorizat și vă întrebați cum să adăugați autentificare prin Google, Facebook sau orice alt furnizor de autorizare API-ului dvs.

Ei bine, fixați-vă, pentru că câteva linii de cod și veți avea exact asta.

Nu voi aprofunda modul în care funcționează JWT-urile sau cum să obțin un jeton de acces de la un furnizor. Acest tutorial se va concentra pe utilizarea unui jeton de acces obținute de la client pentru a obține date de utilizator de la un furnizor pentru înregistrare și autentificare.

De asemenea, nu voi intra în modul de configurare a autorizației pentru schema dvs. ca fiind uimitor tutoriale au fost făcute pe această temă.

O scurtă călătorie pe banda de memorie – Înainte de GraphQL ⏰

Autentificarea în REST este simplă: lipiți-vă middleware-ul pe un punct final și ați terminat. Cu toate acestea, în graphQL există un singur punct final, deci avem nevoie de o abordare diferită.

Esențialul

Odată ce înțelegeți cum să implementați datele de conectare sociale, cerul va fi limita cu privire la cadrul, limba sau baza de date pe care alegeți să le utilizați în cele din urmă. Deci, iată:

Pasul 1: În front-end, obțineți fereastra de autentificare a furnizorului de autentificare terță parte.

Pasul 2: (Încă pe front-end) Prindeți jetonul de acces pe care furnizorul îl returnează după ce a fost de acord să vă autentifice.

Pasul 3: (Da, încă front-end) Trimiteți acest simbol către back-end ca parte a argumentului de intrare al mutației dvs.

Pasul 4: În back-end, verificați jetonul.

Pasul 5: Dacă indicativul este autentic, veți primi utilizatorul ca parte a răspunsului de verificare (cel puțin acesta este cazul Passport.js, pe care îl vom folosi).

Pasul 6: Salvați datele utilizatorului în baza de date.

Pasul 7: Reveniți un JWT la front-end. Ceea ce faceți cu acest token nu intră în domeniul de aplicare al acestui tutorial, dar probabil ar trebui folosit pentru a autentifica fiecare dintre acțiunile utilizatorului conectat.

Iată-l, scheletul pentru crearea de login social cu graphQL.

Voi lăsa pașii 1, 2 și 3 întrucât au fost deja acoperiți aici. În practică, nu contează ce cadre / biblioteci utilizați pe front-end. Tot ceea ce contează este apucarea unui cod de acces și executarea unei mutații cu acesta.

Suficient chit-chat. Să începem.

Mai întâi va trebui să preluați ID-uri de autentificare și secrete de la diferiți furnizori.

Facebook

Pasul 1: Mergi la https://developers.facebook.com/apps/ și selectați „Adăugați o aplicație nouă”.

Pasul 2: Dă-i aplicației un nume și completează întrebarea de securitate.

Pasul 3: Selectați „Integrare Facebook Login” și faceți clic pe confirmare.

Pasul 4: Copiați fișierul Codul aplicației și Secretul aplicației valori care se ascund undeva pe aceeași pagină.

Google

Pasul 1: Accesați consola pentru dezvoltatori: https://console.developers.google.com/ și să creeze un proiect

Pasul 2: Căutați „acreditări oauth” în bara de căutare și faceți clic pe singura opțiune care apare.

Pasul 3: Încercați să găsiți butonul „Creați acreditări”. Dacă îl găsiți, continuați și faceți clic pe el. Alegeți „Oauth Client Id”.

Pentru tipul de aplicație, selectați „aplicatie web’ .

Pentru originile autorizate adăugați http: // localhost: 3000. În producție, probabil că veți dori să fiți un pic mai specific.

1611511208 576 Cum sa cuiezi autentificarea sociala in GraphQL

Pasul 4: Faceți clic pe creați și copiați fișierul Cod client și Secretul clientului care se ascund undeva pe aceeași pagină.

Serverul API

Creați un folder pentru serverul dvs.:

mkdir graphql-social-auth && cd graphql-social-auth

Inițializați aplicația cu

npm init

sau dacă utilizați fire

yarn init

Să punem în funcțiune un server API. Voi folosi apollo-server aici.

npm install --save apollo-server graphql

sau dacă utilizați fire

yarn add apollo-server graphql

Apollo Server va seta un server Express pentru dvs. atâta timp cât îl furnizați typeDefs și resolvers.

typeDefs înseamnă definiții de tip care definesc „forma” datelor dvs. Rezolvatoarele, pe de altă parte, sunt responsabile pentru preluarea datelor pentru aceste tipuri.

Creați un fișier src / app.js și adăugați următorul cod:

În acest moment putem porni serverul rulând

node src/app.js

După ce porniți serverul, acesta ar trebui să imprime un mesaj pe consolă care să indice că este gata.

? Server ready at http://localhost:4000/ 

Vă întrebați cum să schimbați portul sau să conectați serverul la o aplicație existentă node.js? Verificați serverul apollo documentație pentru mai multe informatii.

Pentru a explora noua API GraphQL creată, deschideți un browser către linkul afișat în consolă, http://localhost:4000/. Apollo Server configurează GraphQL Playground pentru dvs., astfel încât să puteți începe să rulați interogări și să explorați rapid schema.

Pentru a rula o interogare, copiați următoarea interogare și apoi apăsați butonul „▶ ️”:

query {  hello}

Și serverul ar trebui să returneze un răspuns simplu:

{  "data": {    "hello": "world"  }}

Ura! Serverul funcționează. Acum vine partea distractivă.

  1. Trebuie să ne configurăm schema și rezoluțiile graphQL.
  2. Trebuie să configurăm Passport și să îl conectăm la dispozitivele de rezolvare pentru a valida jetoanele noastre din partea frontală.
  3. De asemenea, va trebui să configurăm Mongo pentru a se ocupa de stocarea utilizatorilor noștri.

Voi folosi MongoDB pentru că este mai ușor de configurat, dar înlocuirea acestuia cu MySQL ar trebui să fie o problemă.

Mai întâi să instalăm dependențele necesare:

npm install --save passport passport-facebook-token passport-google-token mongoose jsonwebtoken

sau dacă utilizați fire

yarn add passport passport-facebook-token passport-google-token mongoose jsonwebtoken

Apoi deschideți folderul src și creați următoarele fișiere:

mongoose.jspassport.jstypeDefs.jsresolvers.js

Adăugați următoarele la src / mongoose.js:

Aceasta va conecta aplicația la baza de date și va configura schema utilizatorului.

De asemenea, va crea metode pentru generarea JWT-urilor și găsirea utilizatorilor de pe Facebook și Google în baza noastră de date.

Adăugați următoarele la src / passport.js:

Nu uitați să înlocuiți ID-urile și secretul clientului fals cu cele de pe Facebook și Google.

Acestea fiind spuse și făcute, nu mai rămâne decât actualizarea tipurilor de grafQL și a rezoluților.

Să mutăm typeDef-urile și rezoluțiile în fișiere separate pentru a menține app.js-ul nostru curat și ordonat. Adăugați următoarele la src / typeDefs.js:

În continuare src / resolver.js:

Apoi ne refactorizăm src / app.js pentru a importa schema din fișierele separate.

În cele din urmă, adăugăm obiectele de cerere și răspuns de la expres la graphQL context. Acest lucru le va face disponibile în soluțiile noastre de rezolvare a mutațiilor pentru utilizare cu Pașaport.JS.

Și am terminat.

Încercând-o

Rulați următoarea comandă într-o fereastră separată pentru a porni demonul Mongo:

mongod

Acum reporniți serverul API:

node src/app.js

Pentru a ne asigura că totul funcționează corect, să luăm câteva jetoane de acces și faceți câteva teste.

Facebook

Pasul 1: Deschideți setările aplicației https://developers.facebook.com/apps/ și selectați Roluri -> Testare utilizatori în bara laterală din stânga.

Pasul 2: Faceți clic pe editați și selectați „Modificați permisiunile pe care acest utilizator de test le-a acordat aplicației”

1611511208 939 Cum sa cuiezi autentificarea sociala in GraphQL

Pasul 3: Adăugați un e-mail la permisiuni și faceți clic pe actualizare.

1611511208 165 Cum sa cuiezi autentificarea sociala in GraphQL

Pasul 4: Faceți clic pe editare și selectați „Obțineți un jeton de acces pentru acest utilizator de testare”

Pasul 5: Copiați jeton de acces și rulați mutația authFacebook cu aceasta în graphQL Playground.

1611511208 546 Cum sa cuiezi autentificarea sociala in GraphQL
mutație și răspuns de la graphql loc de joacă

Google

Din câte știu, Google nu are un test de utilizator echivalent pentru API-urile lor. dar putem folosi Terenul de joacă Oauth pentru a ne înscrie un valabil jeton de acces.

Pasul 1: Mergi la https://developers.google.com/oauthplayground, selectați domeniile „Google OAuth2 API v2” și faceți clic pe „Autorizați API-urile”:

1611511209 860 Cum sa cuiezi autentificarea sociala in GraphQL
Domenii de autentificare pentru Google OAuth2 API v2

Veți fi redirecționat către ecranul de consimțământ Google.

Pasul 2: După ce v-ați dat consimțământul, găsiți „butonul cod de autorizare pentru jetoane” pe pagină și faceți clic pe el. Acest lucru va genera un valabil reîmprospăta și jeton de acces pentru utilizatorul conectat.

Pasul 3: Copiați generat jeton de acces și rulați mutația authGoogle cu aceasta în graphQL Playground.

1611511209 441 Cum sa cuiezi autentificarea sociala in GraphQL
mutație și răspuns de la graphql loc de joacă

Asta e!

Ai reușit până la capăt! Dacă rămâneți blocat pe parcurs, nu ezitați să verificați codul din acesta repertoriu. Dacă aveți întrebări sau feedback, anunțați-mă în comentariile de mai jos.

Noroc!

Ladi Bello