React autentizace » Historie » Revize 9
Revize 8 (Jiří Trefil, 2023-04-23 10:01) → Revize 9/17 (Jiří Trefil, 2023-04-23 10:02)
h1. Autentizace na straně klienta (React aplikace) h2. Popis logiky autentizace * Uživatel se přihlásí pod svým účtem. * Klientská aplikace pošle tento požadavek na SPADe aplikaci. Pokud je tento požadavek validní, tj. uživatel opravdu existuje a heslo je správné, pak je zpět odeslán JWT token (https://jwt.io/introduction). * Klientská aplikace si tento token přečte a uloží jej do cookie. Tento token je od tohoto bodu posílán s *každým* klientským požadavkem na server v hlavičce, viz obrázek hlavičky níže. !clipboard-202304231139-vx5qh.png! * Pouze takto je uživatel považován za autentikováno a může se svobodně pohybovat po aplikaci bez omezení. h1. Knihovna *react-auth-kit* * K implementaci této feature byla použita knihovna třetí strany. Knihovna spravuje celý stav autentizace na straně klienta. * Po přihlášení uživatele tedy knihovna uloží jwt token do cookie a následně poskytne 3 hooky (konkrétně useState), které s tímto tokenem manipulují. * Následuje ukázka kódu, která používá knihovnu pro přihlášení uživatele. <pre><code class="react"> //importujeme useEffect knihovny pro prihlaseni uzivatele import {useSignIn} from "react-auth-kit"; //komponenta pro prihlaseni uzivatele const LoginComponent = () => { //initneme funkci knihovny //ktera udela vsechnu praci s ukladanim tokenu const signIn = useSignIn(); //dummy funkce, ktera pouze demonstruje, jak se knihovna pouziva //samotna implementace v kodu je v jadru stejna, pouze je kolem vice omacky //pro tuto ukazku nedulezite const sampleLogin = async (username:string, password: string) =>{ //V tomto bode zavolame server s nasim login pozadavkem //odpoved serveru je ve formatu jako nasledujici rozepsany objekt //tedy vratime nam status (HTTP code) - tim zjistime, jestli se neco nepokazilo //zpravu (message) - pro blizsi informace o vysledku informace //samotny jwt token (token) - timto tokenem se uzivatel autentikuje s kazdym nasledujicim pozadavkem na server const responseWrapper: {message:string; status:number; token:string} = await login(username,password); //token muze byt empty string, pokud doslo k chybe prihlaseni const accessToken:string = responseWrapper.token; if(responseWrapper.status != 200){ //Zde by byla cast, ktera by vypsala uzivateli chybovou hlasku, protoze se prihlaseni nepovedlo } //volame samotny useEffect pro ulozeni tokenu do cookie signIn({ //token, ktery ukladame, v nasem pripade promenna accessToken // cookie bude mit nazev "token" token:accessToken, //jak dlouho token zije (v minutach) expiresIn: 3600, //typ tokenu, v pripade JWT se jedna o Bearer token tokenType: "Bearer", // co dalsiho si chceme ulozit, napriklad jmeno uzivatele, nutne to tu byt nemusi authState: {userName:username} }); } } export default LoginComponent; </code></pre>