Instagram-klón felépítése a Reactben a GraphQL és a Hasura segítségével - I. rész

Ezt az útmutatót Abhijeet Singh írta, és a Hasura Technical Writer Program részeként tették közzé - ez egy olyan kezdeményezés, amely támogatja azokat a szerzőket, akik útmutatásokat és oktatóanyagokat írnak a nyílt forráskódú Hasura GraphQL Engine számára.

Bevezetés

Ebben az oktatóanyagban megmutatom, hogyan lehet a Hasura GraphQL Engine és a React felhasználásával létrehozni a Instagram webes alkalmazás klónját. A végleges kód itt található. Lásd az alkalmazás élő bemutatóját itt.

Az alkalmazás a következő tulajdonságokkal rendelkezik:

  • A felhasználók fiókot hozhatnak létre (Auth0 hitelesítéssel)
  • A hitelesített felhasználók új üzeneteket tölthetnek fel
  • A hitelesített felhasználók szerethetnek üzeneteket
  • A hitelesített felhasználók követhetik a felhasználói fiókokat
  • A hozzászólások megjelenítése a hírcsatornában
  • Valósidejű frissítések, amikor más felhasználók feladják egy üzenet szavazását, új üzenet létrehozását vagy felhasználói profil követését (reagálási állapotkezelés és az apollo gyorsítótár frissítése)

Kezdeti beállítás

Kezdjük azzal, hogy felépítjük alkalmazásunk előlapját a React segítségével.

A gyors induláshoz létrehozunk egy alapvető reagálási alkalmazást, amelyen nincs létrehozási konfiguráció, a create-react-app használatával. Futtassa a következő parancsokat a terminálon:

$ npx létrehozás-reagálás-alkalmazás instagram-klón $ cd instagram-klón $ npm indítás
Megjegyzés: Az npx egy npm csomag futó. A tipikus felhasználás egy csomag ideiglenes letöltése és futtatása, vagy kipróbáláshoz. A create-react-app egy npm csomag, amely várhatóan csak egyszer fut a projekt életciklusában. Ezért inkább az npx használatával telepítheti és futtathatja egy lépésben. (forrás)

Elindul a szerver, és látnia kell egy üdvözlő képernyőt (lásd lent) a http: // localhost: 3000 oldalon.

A projekt szerkezetének javítása érdekében hozzunk létre két könyvtárat, mind az src mappában. Az elsőt összetevőknek nevezzük, és az összes React összetevőt tartalmazza. A második stílus, azaz az összes használt CSS-fájlra.

Vigye a szükséges jsx és css fájlokat a megfelelő könyvtárakba, és változtassa meg ezekre a fájlokra mutató hivatkozásokat mind az index.js, mind az App.js fájlban. A könyvtárstruktúrának így kell kinéznie:

├── node_modules ├── package.json ├── nyilvános ├── favicon.ico │ ├── index.html └── manifest.json ├── src ├── ├── App.test.js │ ├ Komponensek, App.js, index.js, logo.svg, serviceWorker.js, stílusok, App.css, index.js, index.js. css └── README.md

A stílus kialakításához react-bootstrap csomagot fogok használni. Telepítse a csomagot:

$ npm telepíti a react-bootstrap bootstrap fájlt

Feltétlenül adjon hozzá CDN-linkeket a /public/index.html stíluslapokhoz. Másolja a linkeket innen.

Telepítse a következő paranccsal a react-apollo GraphQL Client alkalmazást:

$ npm telepítése apollo-boost apollo-link-context @ apollo / react-horgok @ apollo / react-hoc graphql

Az Apollo Client segít elõsegíteni egy GraphQL API elõkészítését.

Ezután a háttérprogramot a Hasura GraphQL Engine és a Postgres segítségével állítjuk be.

Tekintse meg ezt az útmutatót, hogy gyorsan megkezdhesse a Hasura GraphQL motor és a Hergokuon futó Postgres használatát egyetlen kattintással.

A háttérkép beállítása

Postgres adatbázis struktúránk:

type Post {id - egész szám, elsődleges kulcs felirata - szöveges URL - szöveg létrehozott_at - időbélyegző az időzónával user_id - text} type Felhasználó {név - text last_seen - időbélyegző időzóna-avatárral - szöveges e-mail - text id - szöveg, elsődleges kulcs} Írja be: {id - egész, elsődleges kulcs user_id - szöveges post_id - integer} típus Kövesse {id - egész, elsődleges kulcs követő_id - szöveget követő_id - szöveget}
Az adatbázis felépítése

Táblázatok létrehozása

Készítse el a következő táblákat: Felhasználói táblázat

felhasználói táblázat

Post tábla (az azonosító típusa egész szám (autoincrement)):

posta asztal

Adja hozzá az idegen kulcs korlátozását a user_id oszlopból a User.id fájlhoz. Állítsa korlátozottként a Frissítés és a Törlés törlését.

Mint a táblázat (az azonosító típusa egész szám (autoincrement)):

mint az asztal

Kövesse a táblázatot (az azonosító típusa egész szám (automatikus növekedés)):

kövesse a táblázatot

Hozzon létre egy objektumkapcsolatot a táblák kapcsolatszakaszához ugrással. Ezek a kapcsolatok segítenek bennünket az adatok egyetlen lekérdezésben történő lekérdezésében, és különféle aggregált funkciók elvégzését is, például az, hogy minden felhasználóhoz hozzászólások számát szerezzük. Lásd ezt a linket a kapcsolatok megteremtéséhez idegen kulcson keresztül a hasurában. Csak a következő kapcsolatokra van szükségünk.

felhasználói táblázatposta asztal

Most beállítjuk a táblák engedélyét, hogy csak bejelentkezett felhasználók tudják megtenni bizonyos dolgokat. Állítsa be az engedélyeket az alábbiak szerint:

felhasználói táblázatposta asztalMint az asztalKövesse a táblázatot

Lásd a hozzáférés-vezérlés alapjait, ha nem ismeri jól a hozzáférés-vezérlést és annak működését a hasurában.

A bonyolultabbá tétele érdekében minden sorszintű engedélyt megadtam, minden ellenőrzés és oszlopszint nélkül, mint minden oszlop és összesítő lekérdezés (a hozzászólások pontszámának számításához használták).

Az Auth0 JWT használata a hitelesítéshez

Az alábbi ábra gyorsan elmagyarázza, hogyan működik a JWT hitelesítés. Itt az alkalmazáskiszolgálót (a háttérprogramot) konfigurálni kell annak ellenőrzésére, hogy a bejövő JWT-t a hitelesítési szerver hozta létre (Auth0). (Forrás)

Auth0-ot használunk hitelesítési szerverként. Ez létrehoz egy JWT-t, és átkerül reagáló alkalmazásunkba. Ezután az apollo kliens használatával elküldjük az auth_token (esetünkben az access_token) fájlt háttérprogramunkra (alkalmazáskiszolgálóra), azaz a Hasura GraphQL Engine-re. A Hasurát be kell állítani annak ellenőrzésére, hogy a bejövő JWT-t az Auth0 hitelesítési szerver hozta létre.

Kezdjük az Auth0 használatával, @ apollo / react-hook és @ auth0 / auth0-spa-js használatával. Követnünk kell ezeket a lépéseket:

Auth0 JWT integráció a Hasurával: Tekintse meg ezt az útmutatót a Hash Auth0 JWT integrációhoz, és szerezze be a JWK-t (kulcs a bejövő JWT érvényesítéséhez). Az Auth0 irányítópulton állítsa be az Engedélyezett visszahívási URL-eket, az Engedélyezett webes eredeteket, az Engedélyezett kijelentkezés URL-jeit URL-re: http: // localhost: 3000, és mentse el a módosításokat.

Lehet, hogy le kell tiltania az OIDC Conformant alkalmazást az Auth0> Alkalmazások> Saját_alkalmazás> Beállítások> Speciális beállítások menüben is. Miután megkapta a gombot, a következő lépés a JWT mód aktiválása Hasurában. Lépjen a heroku irányítópultjára, válassza ki az alkalmazást és menjen a beállításokba. Itt láthat néhány Config Vars-ot, amelyeket most beállítunk. Adja hozzá a konfigurációs varázsokat a következőképpen:

Itt a HASURA_GRAPHQL_ADMIN_SECRET kulcs a JWT mód működéséhez. Helyezze a kulcsot a HASURA_GRAPHQL_JWT_SECRET környezeti változóba. Miután ezt hozzáadta, a GraphQL végpontjait csak az Engedélyezési fejléc vagy az X-Hasura-Admin-Secret fejléc segítségével lehet lekérdezni.

Végül állítsa a HASURA_GRAPHQL_UNAUTHORIZED_ROLE névtelenné, mert engedélyezzük a hitelesítetlen felhasználók számára az adatok olvasását.

Jogosulatlan szerep: akkor használják, ha a hozzáférési kulcsot nem csak hozzáférési kulcs módban küldik el, vagy JWT módban hiányzik az „Engedélyezés” fejléc. Példa: névtelen. Most, amikor a "Hitelesítés" fejléc hiányzik, a kérés szerepe alapértelmezés szerint "névtelen" lesz.

A következő lépés a szabályok felvétele az Auth0 alkalmazásba. 2 további szabályt adunk az Auth0 alkalmazáshoz az alábbiak szerint:

Itt az idToken-et kicseréljük az accessToken-re. Alapvetően az auth0 különféle típusú tokeneket biztosít, az auth0-spa-js pedig már nem teszi ki az idToken-t, tehát az accessToken-et fogjuk használni.

Frissítés: Az auth0-spa-js 1.2.0 verziójától kezdve az idToken nyers értéke a getIdTokenClaims módszerrel kerül feltárásra.

További információ a tokenekről itt.
Az új SPA SDK csak a Grant + PKCE engedélyezési kódot használja (már nem implicit támogatást). Ezért az idTokens helyett az accessTokens-t kell használni (lásd ezt a szálat).

Adjon hozzá még egy szabályt a postgres adatbázis és az Auth0 felhasználók szinkronizálásához:

Változtassa meg az admin_secret és az URL-t. Most, amikor egy új felhasználó feliratkozik vagy egy felhasználó bejelentkezik, a hasura postgres adatbázisunkat automatikusan frissítjük, hogy a felhasználói információkat a felhasználói táblázatban tároljuk. További részletek.

Megjegyzés: Itt csak egy postq request-et hajtunk végre grafql mutációkkal, és fejlécünkben x-hasura-admin-secret van, így a bejövő kérésnek teljes hozzáférése van az adatbázis mutációjához.

Az Auth0 Dashboard> API-kban létre kell hoznunk egy egyedi API-t is, amely a Hasura GraphQl API-ra mutat. Hozzon létre egy új API-t az alább látható módon, és adjon neki bármilyen nevet. Azonosítót változtassa meg a graphql végponttal.

Most, hogy megvan a háttér és az Auth0 beállítás, megkezdhetjük a React alkalmazás kiépítését. Menjen tovább a sorozat 2. részéhez, hogy megtanulja.

A szerzőről

Abhijeet Singh a IIIT Kalyani számítástechnika és mérnöki végzettségű hallgató. Dolgozott a Full Stack Fejlesztés, az Android, a Deep Learning, a Machine Learning és az NLP területén. Aktívan részt vesz a versenyképes programozási versenyeken, és érdekli az algoritmikus problémák megoldása. Startup rajongó, szabadidőben asztalitenisz és gitár játszik.

Eredetileg a https://blog.hasura.io oldalon, 2019. szeptember 6-án tették közzé.