Show page

Differences

This shows you the differences between two versions of the page.

--- pw:laboratoare:04 [2023/02/24 12:57]
ciprian.dobre [Cum se configureaza Auth0?]
+++ 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 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>
   - Pornirea aplicației cu comanda: <code>npm start</code>
   - 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 189: / Line 193: @@
 <code>npm install react-router-dom</code>
-===== Integrare Auth0 cu React =====
+==== Utilizarea React Router ====
-Asa cum am prezentat anterior, auth0 are un tutorial foarte bun si usor de parcurs pentru integrarea cu frontendul nostru. In continuare, aveti cateva puncte care, mai mult sau mai putin, sunt prezentate si in tutorial:
-=== Pasul 1: Instalarea pachetului Auth0 ===
+După ce a fost instalat React Router, se pot defini rutele în aplicație.
-Instalarea pachetului respectiv pentru React in proiectul nostru de React <code>npm install @auth0/auth0-react</code>
-=== Pasul 2: Configurare ===
-Completarea unui fisier de configurare in care vom tine datele statice
 <code>
-const authSettings = {
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-  rolesKey: "******************",
+import PaginaPrincipala from './PaginaPrincipala';
-  domain: '********************',
+import PaginaDespre from './PaginaDespre';
-  clientId: "**********************",
+import PaginaContact from './PaginaContact';
-  audience: "********************"
-};
-export { authSettings };
+function App() {
-</code>{{:pw:laboratoare:auth0_audience.png?700|}}
+  return (
-<note important>Valorile cu stelute trebuie completate cu valorile voastre proprii!!!</note>
+    <Router>
-<note tip>RolesKey reprezinta numele proprietatatii custom pe care voi ati setat-o in **Actions** la pasul 7</note>
+      <div>
+        <nav>
+          <ul>
+            <li>
+              <Link to="/">Pagina principală</Link>
+            </li>
+            <li>
+              <Link to="/despre">Despre noi</Link>
+            </li>
+            <li>
+              <Link to="/contact">Contact</Link>
+            </li>
+          </ul>
+        </nav>
-<note tip>Domain si ClientId sunt informatii care tin de contul vostru de Auth0 si aplicatia inregistrata la pasul 1. </note>
+        <Route path="/" exact component={PaginaPrincipala} />
+        <Route path="/despre" component={PaginaDespre} />
-<note tip>Audienta reprezinta API-ul catre care frontendul va putea face call-uri autorizate de catre Auth0. Nu uitati ca la inceput am configurat si un API in Auth0.</note>
+        <Route path="/contact" component={PaginaContact} />
+      </div>
-=== Pasul 3: Configurarea providerului ===
+    </Router>
-Configurarea componentei de tip provider, practic un wrapper peste aplicatia noastra
+  );
-<code>
+}
-import React from "react";
-import React from "react";
-import ReactDOM from "react-dom";
-import "./index.css";
-import App from "./App";
-import reportWebVitals from "./reportWebVitals";
-import { Auth0Provider } from "@auth0/auth0-react";
-import { authSettings } from "./AuthSettings";
-ReactDOM.render(
-  <React.StrictMode>
-    <Auth0Provider
-      domain={authSettings.domain}
-      clientId={authSettings.clientId}
-      redirectUri={window.location.origin}
-    >
-      <App />
-    </Auth0Provider>
-  </React.StrictMode>,
-  document.getElementById("root")
-);
 </code>
-=== Pasul 4: Login ===
+<note>În acest exemplu, am definit trei rute diferite, fiecare asociată cu o componentă. Prima rută, definită cu exact path="/", este asociată cu componenta PaginaPrincipala și va fi afișată atunci când utilizatorul navighează la URL-ul rădăcină al aplicației. A doua rută, definită cu path="/despre", este asociată cu componenta PaginaDespre și va fi afișată atunci când utilizatorul navighează la URL-ul "/despre". A treia rută, definită cu path="/contact", este asociată cu componenta PaginaContact și va fi afișată atunci când utilizatorul navighează la URL-ul "/contact".</note>
-Redirectarea catre login daca utilizatorul nu este autentificat in componenta noastra de Routing <code>import React, { useEffect } from "react";
+O altă caracteristică puternică a React Router este capacitatea de a utiliza parametri în rute. Aceasta poate fi utilă, de exemplu, pentru a afișa detaliile unui anumit element dintr-o listă.
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import Analytics from "../pages/Admin/Analytics";
-import Book from "../pages/Admin/Book";
-import UserBooks from "../pages/User/Books";
-import Books from "../pages/Admin/Books";
-import Account from "../pages/User/Account";
-import { useAuth0 } from "@auth0/auth0-react";
-const Router = () => {
+<code>
-  const { isAuthenticated, loginWithRedirect } = useAuth0();
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import ListaProduse from './ListaProduse';
+import DetaliiProdus from './DetaliiProdus';
-  useEffect(() => {
+function App() {
-    if (!isAuthenticated) {
-      loginWithRedirect();
-    }
-  }, [isAuthenticated, loginWithRedirect]);
   return (
-    isAuthenticated && (
+    <Router>
-      <BrowserRouter>
+      <div>
-        <Routes>
+        <nav>
-          <Route exact path="/" element={<UserBooks />} />
+          <ul>
-          <Route exact path="/profile" element={<Account />} />
+            <li>
-          <Route exact path="books" element={<Books />} />
+              <Link to="/">Pagina principală</Link>
-          <Route exact path="books/:id" element={<Book />} />
+            </li>
-          <Route exact path="analytics" element={<Analytics />} />
+            <li>
-        </Routes>
+              <Link to="/produse">Produse</Link>
-      </BrowserRouter>
+            </li>
-    )
+          </ul>
+        </nav>
+        <Route exact path="/" component={PaginaPrincipala} />
+        <Route exact path="/produse" component={ListaProduse} />
+        <Route path="/produse/:id" component={DetaliiProdus} />
+      </div>
+    </Router>
   );
-};
+}
-export default Router;
 </code>
-=== Pasul 5: Logout ===
-Adaugarea actiunii de Logout pe butoane
-<code> onClick={() => {
-              logout({ returnTo: window.location.origin });
-            }}</code>
-=== Pasul 6: Protejarea rutelor in functie de rol ===
-Protejarea rutelor in functie de tipul de utilizator (admin/utilizator normal). De exemplu, ca si utilizator autentificat nu am niciun rol asignat (admin) inseamna ca nu voi avea dreptul sa vad paginile dedicate admin-ului, deci il voi redirectiona catre pagina lui principala in care vede cartile pe care le poate imprumuta. <code>useEffect(() => {
-    if (user && user[authSettings.rolesKey].length === 0) {
-      navigate("/");
-    }
-  }, [user]);
-</code>
-==== 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**.
+<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>
-  * 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|}}

Cursuri

Link UPB Cursuri

Laboratoare

Proiect

Guidline Proiect

pw/laboratoare/04.1677236262.txt.gz · Last modified: 2023/02/24 12:57 by ciprian.dobre

Show page Old revisions

Media Manager Back to top