Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:04 [2023/02/24 12:59] ciprian.dobre [Integrare Auth0 cu React] |
pw:laboratoare:04 [2023/04/24 21:02] (current) ciprian.dobre [Crearea unui proiect React] |
||
|---|---|---|---|
| Line 24: | Line 24: | ||
| - Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: [[https://nodejs.org/en/download/]] | - Instalarea Node.js și a managerului de pachete npm (Node Package Manager), dacă nu sunt deja instalate, disponibile aici: [[https://nodejs.org/en/download/]] | ||
| - Instalarea unui editor: VS Code [[https://code.visualstudio.com/download]] sau WebStorm [[https://www.jetbrains.com/webstorm/download]] (Recomandăm VS Code) | - Instalarea unui editor: VS Code [[https://code.visualstudio.com/download]] sau WebStorm [[https://www.jetbrains.com/webstorm/download]] (Recomandăm VS Code) | ||
| - | - Rularea comenzii: <code>npx create-react-app my-app</code> | + | - Rularea comenzii: <code>npx create-react-app my-app |
| + | npx create-react-app my-app --template typescript // pentru initializarea cu TypeScript | ||
| + | </code> | ||
| - Accesarea directorului noului proiect creat cu comanda:<code>cd my-app</code> | - Accesarea directorului noului proiect creat cu comanda:<code>cd my-app</code> | ||
| - Pornirea aplicației cu comanda: <code>npm start</code> | - Pornirea aplicației cu comanda: <code>npm start</code> | ||
| - Accesarea aplicației la [[http://localhost:3000/]] | - Accesarea aplicației la [[http://localhost:3000/]] | ||
| + | |||
| + | <note tip>Ca sa va ajutam pentru proiect aveti [[https://gitlab.com/mobylabwebprogramming/reactfrontend|aici]] un proiect de baza de la care sa plecati ca sa va implementati frontendul pentru proiect.</note> | ||
| Line 261: | Line 265: | ||
| <note>În exemplul de mai sus, ruta /produse/:id include un parametru id care poate fi utilizat pentru a afișa detaliile produsului cu id-ul specificat. Acest parametru poate fi accesat în componenta DetaliiProdus folosind obiectul match.params din React Router.</note> | <note>În exemplul de mai sus, ruta /produse/:id include un parametru id care poate fi utilizat pentru a afișa detaliile produsului cu id-ul specificat. Acest parametru poate fi accesat în componenta DetaliiProdus folosind obiectul match.params din React Router.</note> | ||
| - | ==== Testarea integrarii ===== | ||
| - | |||
| - | Dupa ce ati integrat frontendul cu Auth0, testarea este foarte simpla: | ||
| - | |||
| - | - deschideti **Network Tab** in Browser Dev Tools | ||
| - | - faceti un login | ||
| - | - investigati call-ul prin care se intoarce tokenul, in sectiunea **Preview** | ||
| - | |||
| - | {{:pw:laboratoare:auth0tokens.png?800|}} | ||
| - | |||
| - | O sa vedeti 2 tokeni, **Access Token** si **Id Token**. | ||
| - | * Access token va fi trimis catre backend, pentru **autorizare** | + | ===== Sarcini de laborator ===== |
| - | * ID token este folosit de frontend, pentru extragerea datelor de profil | + | |
| - | === Investigarea tokenilor === | + | Instalați-vă uneltele necesare pentru laborator și cereți ajutorul daca întâmpinați dificultăți. |
| - | Pe [[http://www.jwt.io|JWT.io]] puteti investiga continutul tokenilor. | + | Creați un nou proiect și porniți-l. Daca aveți întrebări, întrebați asistentul/a, mai multe informații o să fie furnizate la următoarele laboaratoare. |
| - | **ID Tokenul** ar trebui sa contina informatii de profil si **rolul injectat** la pasul 7 (daca este token pentru admin): | ||
| - | {{:pw:laboratoare:auth0idtoken.png?800|}} | + | ===== Linkuri Utile ===== |
| - | **Access Tokenul** ar trebui sa contina informatii legate de audienta pentru care poate fi folosit si **permisiuni injectate** la pasul 5, prin optiunea de RBAC: | + | * GitLab Schelet Frontend: [[https://gitlab.com/mobylabwebprogramming/reactfrontend]] |
| + | * Node.js: [[https://nodejs.org/en/download/]] | ||
| + | * VS Code [[https://code.visualstudio.com/download]] | ||
| + | * WebStorm [[https://www.jetbrains.com/webstorm/download/]] | ||
| + | * Tutorial React.js: [[https://reactjs.org/tutorial/tutorial.html]] | ||
| - | {{:pw:laboratoare:auth0accesstoken.png?800|}} | ||
