Zavedení autentizace s využitím JWT v GraphQL aplikacích pro mobilní zařízení

Úvod: Proč je autentizace klíčová?

V dnešní digitální době, kdy se většina našich aktivit odehrává online, je zabezpečení dat nezbytné. Aplikace na mobilních zařízeních nejsou výjimkou. Každý den používáme aplikace, které vyžadují naše osobní údaje – od bankovních aplikací po sociální sítě. Jak tedy zajistit, že naše data zůstanou v bezpečí? Odpovědí může být zavedení autentizace pomocí JSON Web Tokens (JWT) v GraphQL aplikacích. Tento článek se zaměřuje na to, jak implementovat JWT pro zabezpečení GraphQL API, a to tak, aby byly použitelné i v mobilních aplikacích.

Co je JWT a proč ho používat?

JSON Web Token (JWT) je standardní formát pro bezpečné přenosy informací mezi dvěma stranami jako JSON objekt. Tyto informace mohou být ověřeny a důvěryhodné díky digitálnímu podpisu. JWT se skládá ze tří částí: hlavičky (header), těla (payload) a podpisu (signature). Tato struktura umožňuje efektivní a bezpečný způsob autentizace uživatelů.

Hlavním důvodem, proč využívat JWT, je jeho snadnost použití, flexibilita a schopnost škálování. V rámci GraphQL aplikací mohou být JWT použity k ověření uživatelů a autorizaci jejich přístupu k citlivým datům. Mnoho vývojářů dnes přechází na tento model díky jeho jednoduchosti a efektivitě.

Příprava na implementaci

Než se pustíme do samotného procesu implementace JWT v GraphQL aplikacích pro mobilní zařízení, je dobré mít po ruce několik věcí:

• Node.js: Budeme potřebovat prostředí pro běh JavaScriptu na serverové straně.
• GraphQL: Samozřejmě, budeme potřebovat knihovny pro práci s GraphQL.
• Knihovna pro práci s JWT: Například jsonwebtoken, která nám umožní snadno generovat a ověřovat naše tokeny.

Krok 1: Instalace potřebných balíčků

Nejprve si vytvořme nový projekt a nainstalujme všechny potřebné knihovny:

mkdir graphql-jwt-example
cd graphql-jwt-example
npm init -y
npm install express express-graphql graphql jsonwebtoken bcryptjs cors

Tímto příkazem vytvoříme základní strukturu projektu a nainstalujeme všechny nezbytné závislosti.

Krok 2: Nastavení serveru

Nyní si vytvoříme základní server pomocí Express.js:

const express = require('express');
const \{ graphqlHTTP \} = require('express-graphql');
const schema = require('./schema'); // Vytvoříme oddělený soubor schema.js později.
const cors = require('cors');
const app = express();
app.use(cors());
app.use('/graphql', graphqlHTTP(\{
    schema: schema,
    graphiql: true,
\}));
app.listen(4000, () =\> \{
    console.log('Server běží na http://localhost:4000/graphql');
\});

Toto nastavení spustí server na portu 4000 a umožní nám používat GraphiQL – interaktivní UI pro práci s naším GraphQL API.

Krok 3: Definice schématu

Teď přichází čas definovat naše GraphQL schéma v souboru schema.js:

const \{ GraphQLObjectType, GraphQLString, GraphQLSchema \} = require('graphql');
const jwt = require('jsonwebtoken');
bcrypt = require('bcryptjs'); // Použijeme pro hashing hesel. 

// Uživatel Type
const UserType = new GraphQLObjectType(\{
    name: 'User',
    fields: () =\> (\{
        id: \{ type: GraphQLString \},
        username: \{ type: GraphQLString \},
        email: \{ type: GraphQLString \},
    \})
\});

// Root Query
const RootQuery = new GraphQLObjectType(\{
    name: 'RootQueryType',
    fields: \{
        user: \{
            type: UserType,
            args: \{ id: \{ type: GraphQLString \} \},
            resolve(parent, args) \{
                // Zde bychom mohli načíst uživatele z databáze podle ID.
            \}
        \}
    \}
\}); 

// Mutace pro registraci uživatele a generování JWT 
dconst Mutation = new GraphQLObjectType(\{
    name: 'Mutation',
    fields: \{
        registerUser: \{
            type: UserType,
            args: \{
                username:\{ type: GraphQLString\},
                email:\{ type: GraphQLString\},
                password:\{ type: GraphQLString\}
            \},
            resolve(parent,args)\{ 
                const hashedPassword = bcrypt.hashSync(args.password, 8);
                const user = new User(\{  // Uložení do databáze (např. MongoDB)
                    username : args.username,
                    email : args.email,
                    password : hashedPassword
                \}); 
                user.save(); // Uložení do DB
                const token = jwt.sign(\{ id : user._id \}, 'tajny_klic', \{ expiresIn: 86400 \}); // Vytvoření tokenu
                return token; // Vrátíme token jako odpověď
            \}
        \},
        loginUser:\{ // Mutace pro login
            type:String,
            args:\{
                email:\{type:String\},
                password:\{type:String\}
            \},
            resolve(parent,args)\{ 
               const user = User.findOne(\{ email : args.email \}); // Načtení uživatele podle emailu
               if(user && bcrypt.compareSync(args.password, user.password))\{ // Ověření hesla
                   return jwt.sign(\{id:user._id\},'tajny_klic',\{expiresIn:'24h'\}); // Vytvoření tokenu
               \}
               throw new Error('Neplatný email nebo heslo'); // Chybová zpráva
           \}
        \}
    \}
\}); 
 
gconst schema = new GraphQLSchema(\{ rootQuery : RootQuery , mutation : Mutation \}); 
gmodule.exports= schema; 
an```  
dNyní máme základní schéma zahrnuté s mutacemi pro registraci a přihlášení uživatelů. Token je generován při úspěšné registraci nebo přihlášení.
v### Krok 4: Ověřování JWT ve vašich dotazech k API 
nJak zajistit, aby byla data dostupná pouze autorizovaným uživatelům? Odpovědí je middleware pro ověření tokenů před zpracováním dotazu:
v```javascript 
n// Middleware pro ověření tokenu 
nfunction authenticateToken(req,res,next)\{ 
n    const token = req.headers['authorization']; 
n    if(token == null) return res.sendStatus(401); // Pokud není token vrátíme chybu 401 
n    jwt.verify(token.split(' ')[1], 'tajny_klic', (err,user)=\>\{  
n        if(err) return res.sendStatus(403); // Pokud je token neplatný vrátíme chybu 403 
n        req.user=user; 
n        next(); // Pokračujeme do dalšího middleware nebo resolveru 
n    \});   
n\}v```  Tuto funkci pak můžeme použít v našem serverovém souboru:
v```javascript app.use('/graphql', authenticateToken, graphqlHTTP(\{...\})); ```  Nyní jsou všechny dotazy směrem k `/graphql` chráněny tímto middlewarem.
v### Krok 5: Testování vaší aplikace s Postmanem nebo Insomnií  nTestování vaší API aplikace je klíčové. Můžete použít nástroje jako Postman nebo Insomnia k testování registrace a přihlášení uživatelů. Po úspěšném přihlášení byste měli obdržet JWT token, který budete používat jako součást hlavičky Authorization ve formátu `Bearer \<token\>` při každém dalším požadavku na chráněné zdroje.
v### Závěr - Co nás čeká dál?  nImplementace autentizace pomocí JWT v našem GraphQL API představuje silný krok směrem k zajištění dat našich uživatelů. Jakmile máte tento základ nastavený, můžete začít rozšiřovat funkce vaší aplikace o další zabezpečené operace či integraci s různými front-end technologiemi. Možná vás zajímá i pokročilejší téma jako například refresh tokeny nebo správa rolí uživatelů. To všechno vám poskytne ještě větší kontrolu nad tím, kdo má přístup k vašim datům a funkcím.
vDoufám, že vás tento článek inspiroval k experimentování s autentizací pomocí JWT ve vašich vlastních projektech! Pokud máte nějaké dotazy nebo potřebujete další informace o implementaci JWT v mobilních aplikacích postavených na technologii GraphQL, neváhejte nás kontaktovat nebo si přečíst další články na našem blogu.