Vartotojo autentifikavimo įdiegimas „React Apps“ naudojant „Appwrite“ – „SitePoint“.

Autentifikavimas – tai vartotojo tapatybės patikrinimo procesas prieš suteikiant prieigą prie programos. Tai svarbus kūrimo aspektas, nes jis ne tik apsaugo mūsų vartotojų duomenis, bet ir pagerina bendrą vartotojo patirtį. Taip pat galime naudoti patvirtintą informaciją, kad suasmenintume naudotojo patirtį, pateiktume pritaikytą turinį ir pasiūlytume tokias funkcijas, kaip konkretūs naudotojo nustatymai arba išsaugotos nuostatos.

Šiame straipsnyje pateiksime nuoseklų vadovą, kaip autentifikuoti vartotojus „React“ programose naudojant „Appwrite“. Taip pat apžvelgsime, kaip pasinaudoti „Appwrite“ funkcijomis prisijungimo ir prisiregistravimo funkcijoms įgyvendinti, vartotojų seansams tvarkyti ir apsaugotiems maršrutams.

Kas yra Appwrite?

Appwrite yra nemokama atvirojo kodo programa, padedanti kūrėjams integruoti pagrindines technologijas į žiniatinklio programas. Kaip užpakalinė paslauga, „Appwrite“ siūlo įvairias autentifikavimo funkcijas, pradedant kelių veiksnių autentifikavimu ir baigiant paskyros patvirtinimu ir atkūrimu. Tai leidžia kūrėjams lengviau sklandžiai įdiegti saugų vartotojo autentifikavimą.

Būtinos sąlygos „Appwrite“ nustatymui „React“ projektuose

Prieš atlikdami veiksmus, norėdami integruoti „Appwrite“ į mūsų „React“ projektą, turime atlikti šiuos veiksmus:

• Node.js įdiegta mūsų įrenginyje
• Pagrindinis „React“ ir „JavaScript“ supratimas
• an Appwrite paskyra (galime ją sukurti nemokamai)

1. Sukurkite programą „React“.

Atidarykite terminalą ir paleiskite šią komandą:

npx create-react-app userauth

Eikite į projekto katalogą:

2. Pasirinkite „Appwrite“ diegimo metodą

„Appwrite“ siūlo įvairias diegimo parinktis, leidžiančias pasirinkti diegimo būdą, kuris geriausiai atitinka mūsų pageidavimus. Štai keletas galimų „Appwrite“ diegimo parinkčių:

• Dokeris. Ši parinktis naudoja „Docker“, kad supaprastintų sąranką ir valdymą konteinerinėje aplinkoje.
• Savarankiškai priglobta. Ši parinktis suteikia tiesioginį diegimą mūsų serveryje, todėl suteikiama daugiau valdymo galimybių, tačiau ją reikia konfigūruoti rankiniu būdu.
• Debesis pagrįstas diegimas. Tai naudoja debesijos paslaugų teikėją valdomoms paslaugoms, mastelio keitimui ir minimalioms sąrankos sąnaudoms.
• Appwrite komandinės eilutės sąsaja. Tai veikia įdiegus „Appwrite“ vietoje kūrimo ir testavimo tikslais.

Šiame straipsnyje naudosime debesyje pagrįstą diegimo parinktį, nes ją palyginti lengviau nustatyti ir naudotojams suteikiama geresnė prieiga.

3. Sukurkite Appwrite projektą

Norėdami integruoti Appwrite į savo programą, turime būti prisijungę prie savo paskyros. Prisijungę galime atlikti šiuos veiksmus:

• Sukurkite naują projektą.

  

• Pasirinkite Žiniatinklio programa kaip platforma.

  

• Pasirinkite vietinis šeimininkas kaip pagrindinį kompiuterį ir pavadinkite programą.

  

• Atidarykite žiniatinklio naršyklę ir eikite į prietaisų skydelį.

„Appwrite“ SDK diegimas „React“ programoje

Norėdami integruoti „Appwrite“ į „React“ programą, turime įdiegti „Appwrite JavaScript“ SDK. Tai galime padaryti atlikdami toliau nurodytus veiksmus.

Pirmiausia projekto šakniniame kataloge paleiskite šią komandą:

Tada sukurkite konfigūracijos failą (Appwrite.js) viduje src aplanką, kad išsaugotumėte Appwrite galutinį tašką ir projekto ID.

import { Client, Account } from 'appwrite';

export const API_ENDPOINT = 'https://cloud.appwrite.io/v1'
export const PROJECT_ID = 'YOUR PROJECT ID HERE'

const client = new Client()
    .setEndpoint(API_ENDPOINT) 
    .setProject(PROJECT_ID);    

export const account = new Account(client);

export default client;

Pakeiskite vietos žymeklius 'YOUR_APPWRITE_ENDPOINT' ir 'YOUR_APPWRITE_PROJECT_ID' su Appwrite galutiniu tašku ir projekto ID, kuriuos galima gauti iš Appwrite prietaisų skydelio.

Inicijuokite „Appwrite“ mūsų „React“ programoje. Mūsų pagrindinėje index.js arba App.js failą, importuokite ir inicijuokite Appwrite naudodami anksčiau sukurtą konfigūracijos failą:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Appwrite } from 'appwrite';
import appwriteConfig from './appwrite';


const appwrite = new Appwrite();
appwrite.setEndpoint(appwriteConfig.endpoint).setProject(appwriteConfig.project);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);`   

Pagrindinės programos kūrimas

Kai konfigūracija bus baigta, dabar galime sukurti savo programą. Šioje programoje turėsime prisijungimo, registravimo ir atsijungimo logiką, kuri naudosis mūsų Appwrite SDK funkcijomis.

Registracijos funkcijos įdiegimas

Kad naudotojai galėtų susikurti paskyras ir užsiregistruoti React programoje, turime atlikti šiuos veiksmus.

Pirmiausia sukuriame registracijos formą. Forma surinks reikiamą informaciją, pvz., el. paštą ir slaptažodį, ir nusiųs ją į „Appwrite“ serverį, kad būtų galima sukurti vartotoją:

return (
  <div className="container">
    <form ref={registerForm} onSubmit={handleRegistration}>
      <div className="form-field-wrapper">
        <label>Name:</label>
        <input required type="text" name="name" placeholder="Enter name..." />
      </div>

      <div className="form-field-wrapper">
        <label>Email:</label>
        <input
          required
          type="email"
          name="email"
          placeholder="Enter email..."
        />
      </div>

      <div className="form-field-wrapper">
        <label>Password:</label>
        <input
          type="password"
          name="password1"
          placeholder="Enter password..."
          autoComplete="password1"
        />
      </div>

      <div className="form-field-wrapper">
        <input type="submit" value="Register" className="btn" />
      </div>
    </form>

    <p>{}</p>
  </div>
);

Tada turime sukurti funkciją, kuri iškviečia API iškvietimą, kad būtų sukurtas naujas vartotojas „Appwrite“ serveryje kiekvieną kartą paspaudus mygtuką:

import React, { useRef } from "react";

import { ID } from "appwrite";
import { account } from "../appwrite";

const Register = () => {
  const registerForm = useRef(null);

  const handleRegistration = async (e) => {
    e.preventDefault();

    const name = registerForm.current.name.value;
    const email = registerForm.current.email.value;
    const password1 = registerForm.current.password1.value;

    try {
      const response = await account.create(
        ID.unique(),
        email,
        password1,
        name
      );
      console.log("Registration successful:", response);
      
    } catch (error) {
      console.error("Registration failed:", error);
      
    }
  };
  
  return(
    

  )
  
};

export default Register;

Šiame kodo fragmente kuriame registracijos formą, kuri priima vartotojo įvestį ir siunčia ją į Appwrite SDK. Štai funkcijos, kuri tvarko vartotojo registraciją, suskirstymas.

• Funkcijos apibrėžimas. const handleRegistration = async (e) => { ... } apibrėžia asinchroninę funkciją, pavadintą handleRegistration kuris priima įvykio objektą (e) kaip argumentą.
• Neleisti pateikti numatytosios formos. e.preventDefault(); apsaugo nuo numatytosios formos pateikimo elgsenos, kuri paprastai įkelia puslapį iš naujo. Tai leidžia mums tvarkyti registracijos procesą naudojant JavaScript.
• Bandyti registruotis. Mes naudojame try...catch blokas, skirtas tvarkyti galimas klaidas registracijos proceso metu, įdiegiant pagrindinę logiką trynimo bloke ir gaudant galimas klaidas gaudymo bloke.
• „Appwrite“ paskyros kūrimo naudojimas. Į const response = await client.account.create(email, password); mes vadiname account.create „Appwrite“ kliento metodą, kurį panaudojome kurdami naują vartotojo paskyrą su vartotojo pateiktu el. pašto adresu ir slaptažodžiu. await pristabdo funkcijos vykdymą, kol bus baigtas asinchroninis API iškvietimas. client nurodo inicijuotą „Appwrite“ kliento egzempliorių.

Užregistravus Vartotoją, sukuriama nauja eilutė, kurioje saugomi vartotojo duomenys.

Prisijungimo funkcijos įdiegimas

Norėdami prisijungti naudodami „Appwrite“ SDK, naudojame funkciją, kuri kaip parametrus priima vartotojo el. paštą ir slaptažodį, ir tvarko autentifikavimo procesą. Jei kredencialai galioja, serveris grąžina autentifikavimo prieigos raktą, kurį galime išsaugoti kliento saugykloje (pvz., vietinėje saugykloje arba slapukuose) būsimiems API iškvietimams:

import React, { useRef } from "react";

import { ID } from "appwrite";
import { account } from "../appwrite";

const Login = () => {
  const loginForm = useRef(null);

  const handleLogin = async (e) => {
    e.preventDefault();

    const name = loginForm.current.name.value;
    const email = loginForm.current.email.value;
    const password1 = loginForm.current.password1.value;

    try {
      const response = await account.createEmailSession(email, password1);
      console.log("User has been Logged In:", response);
      
    } catch (error) {
      console.error("Login failed:", error);
      
    }
  };

  return (
    <div className="container">
      <form ref={loginForm} onSubmit={handleLogin}>
        <div className="form-field-wrapper">
          <label>Name:</label>
          <input required type="text" name="name" placeholder="Enter name..." />
        </div>

        <div className="form-field-wrapper">
          <label>Email:</label>
          <input
            required
            type="email"
            name="email"
            placeholder="Enter email..."
          />
        </div>

        <div className="form-field-wrapper">
          <label>Password:</label>
          <input
            type="password"
            name="password1"
            placeholder="Enter password..."
            autoComplete="password1"
          />
        </div>

        <div className="form-field-wrapper">
          <input type="submit" value="Login" className="btn" />
        </div>
      </form>

      <p>{}</p>
    </div>
  );
};

export default Login;

Kaip ir registracijos logikoje, kuriame komponentą, kuris grąžina formą. Ši forma priima vartotojo įvestį ir siunčia ją funkcijai, kuri patikrina išsamią informaciją ir prisijungia prie vartotojo, jei jis turi teisę.

Štai kodo, kuris įgyvendina prisijungimo logiką, suskirstymas:

• Funkcijos apibrėžimas. Pirmoji eilutė handleLogin funkcija const handleLogin = async (e) => { ... } apibrėžia asinchroninę funkciją, pavadintą handleLogin kuris užima įvykio objektą (e) kaip įvestis. The async raktinis žodis rodo, kad jis naudoja pažadus asinchroninėms operacijoms tvarkyti. Mes taip pat naudojome preventDefault būdas užkirsti kelią numatytosios naršyklės formos pateikimo elgsenai.
• Paskambinkite „Appwrite“ seanso kūrimui. const response = await client.account.createSession(email, password); naudojamas skambinti account.createSessionkuris sukuria seansą ir prisijungia prie vartotojo, jei pateikti duomenys atitinka saugykloje išsaugotus duomenis.

  

Apsaugotų puslapių kūrimas

Apsaugoti puslapiai yra tie, kurie nepasiekiami naudotojams, kurie nėra autentifikuoti. Pavyzdžiui, turime profilio puslapį, kuriame rodoma informacija apie vartotoją, bet norime, kad tą puslapį galėtų pasiekti vien tik prisijungę vartotojai. Norėdami tai pasiekti naudodami Appwrite, pirmiausia turime sukurti funkciją, kuri sektų autentifikuotą vartotoją. Ši funkcija sukurta atskirame puslapyje, kurį susiejame su kitais puslapiais, kuriuos reikia patvirtinti.

Autentifikavimo kabliuko kūrimas

Norėdami valdyti vartotojo autentifikavimą ir seanso stebėjimą „React“ programoje, galime sukurti pasirinktinį „hook“, vadinamą useAuth. Šis kabliukas stebės autentifikuoto vartotojo seansą ir suteiks reikiamų funkcijų autentifikavimo būsenai patikrinti:

import { createContext, useState, useEffect, useContext } from "react";
import { account } from "../appwrite";
import { useNavigate } from "react-router-dom";
import { ID } from "appwrite";

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const navigate = useNavigate();

  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState(null);

  useEffect(() => {
    checkUserStatus();
  }, []);

  const checkUserStatus = async () => {
    try {
      const accountDetails = await account.get();
      setUser(accountDetails);
    } catch (error) {
      console.error("Error checking user status:", error); 
    } finally {
      setLoading(false);
    }
  };

  const contextData = {
    user,
    loading, 
  };

  return (
    <AuthContext.Provider value={contextData}>
      {loading ? <div>Loading...</div> : children}
    </AuthContext.Provider>
  );
};


export const useAuth = () => {
  return useContext(AuthContext);
};

export default AuthContext;

Viduje AuthProvider komponentas, mes naudojame useState ir useEffect kabliukai, skirti sekti vartotojo autentifikavimo būseną. Taip pat inicijuojame autentifikavimo būseną, gaudami išsamią paskyros informaciją iš „Appwrite“ SDK. The useAuth Custom Hook leidžia kitiems komponentams naudoti autentifikavimo kontekstą, suteikiant prieigą prie dabartinio vartotojo ir įkėlimo būsenos.

Atskiro saugomo maršruto sukūrimas

Norėdami apriboti prieigą prie tam tikrų puslapių pagal vartotojo autentifikavimo būseną, mums reikia komponento, turinčio prieigą prie anksčiau sukurto kablio. Tai ProtectedRoute komponentas patikrins, ar vartotojas autentifikuotas, ir pateiks numatytą puslapį arba nukreips vartotoją į prisijungimo puslapį, jei jis nėra autentifikuotas:

import { Outlet, Navigate } from "react-router-dom";
import { useAuth } from "./useAuth"; 

const ProtectedRoute = () => {
  const { user } = useAuth();

  return user ? <Outlet /> : <Navigate to="/login" />;
};

export default ProtectedRoute;

Viduje ProtectedRoute komponentas, mes naudojame useAuth kabliukas, kad patikrintų, ar vartotojas autentifikuotas. Jei vartotojas autentifikuotas, children (skirtas puslapis) yra pateikiami. Kitu atveju vartotojas nukreipiamas į prisijungimo puslapį naudojant Navigate komponentas iš react-router-dom.

Numatytų puslapių apsauga

Norėdami pritaikyti apsaugą mūsų numatytiems puslapiams, galime naudoti ProtectedRoute komponentas mūsų maršruto parinkimo sąrankoje pagrindiniame JSX faile:

import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import { AuthProvider } from "./utils/useAuth";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import Login from "./pages/login";
import Register from "../src/pages/registeration";
import NavBar from "./Components/NavBar";
import Logout from "./pages/Logout";
import ProtectedRoute from "./utils/ProtectedRoute";

function App() {
  return (
    <Router>
      <AuthProvider>
        <NavBar />
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/logout" element={<Logout />} />
          <Route path="/register" element={<Register />} />
          <Route path="https://www.sitepoint.com/" element={<Home />} />
          <Route
            path="/profile"
            element={
              <ProtectedRoute>
                <Profile />
              </ProtectedRoute>
            }
          />
        </Routes>
      </AuthProvider>
    </Router>
  );
}

export default App;

Ankstesniame kodo fragmente naudojame ProtectedRoute komponentas, skirtas apvynioti Home komponentas. Tai daro jį vaiku ProtectedRoute komponentus ir užtikrina, kad Home komponentas yra prieinamas tik autentifikuotiems vartotojams.

Informacija apie naudotoją rodoma profilio puslapyje

Kai naudotojo tapatybė patvirtinta, galime norėti parodyti naudotojo informaciją, pvz., vartotojo vardą, el. pašto adresą, profilio nuotrauką ir kt. Tai taip pat gali apimti jo krepšelio informacijos ir pageidavimų sąrašo rodymą. Tai galima pasiekti nuskaitant vartotojo informaciją iš „Appwrite“ SDK ir pateikiant ją „React“ komponentuose:

import React, { useState, useEffect } from 'react';
import appwrite from './appwrite';

function UserDetails() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUserDetails = async () => {
      try {
        const response = await appwrite.account.get();
        setUser(response);
      } catch (error) {
        console.error(error);
      }
    };

    fetchUserDetails();
  }, []);

  return (
    <div>
      {user && (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
          <img src={user.avatar} alt="User Avatar" />
        </div>
      )}
    </div>
  );
}

export default UserDetails;

Ankstesniame kode mes naudojame useEffect kabliukas, kad gautumėte vartotojo informaciją, kai komponentas įkeliamas. Mes taip pat skambiname į appwrite.account.get() būdas gauti vartotojo informaciją ir išsaugoti ją user valstybė. Kai bus prieinama vartotojo informacija, komponente galime pateikti vartotojo vardą ir el. pašto adresą:

Atsijungimo funkcijos kūrimas

Norėdami įdiegti atsijungimo funkciją, turime sukurti funkciją, kuri ištrina vartotojo sesiją ir išvalo esamo vartotojo duomenis:

import React from "react";
import { Link } from "react-router-dom";
import { account } from "../appwrite";
import "./Logout.css"; 

function Logout() {
  const logoutUser = async () => {
    try {
      const response = await account.deleteSession("current");

      console.log("Logout successful:", response);
      
    } catch (error) {
      console.error("Logout failed:", error);
      
    }
  };

  return (
    <div className="logout-container">
      <h2 className="logout-message">Are you sure you want to log out?</h2>
      <div className="logout-options">
        <p>
          <Link to="https://www.sitepoint.com/" className="header-link">
            No, I don't
          </Link>
        </p>

        <p>
          <button className="logout-button" onClick={logoutUser}>
            Yes, I'm sure
          </button>
        </p>
      </div>
    </div>
  );
}

export default Logout;

Viduje logoutUser funkciją, mes naudojame account.deleteSession būdas ištrinti esamą vartotojo seansą, efektyviai atjungiant vartotoją. Taip pat galime atlikti papildomą valymą, pvz., išvalyti vartotojo duomenis arba iš naujo nustatyti programos būseną.

„React“ ir „Appwrite“ klaidų tvarkymas

Kuriant patikimas ir patogias „React“ programas, reikalingas veiksmingas klaidų tvarkymas, ypač naudojant pagrindines paslaugas, tokias kaip „Appwrite“. Taip yra todėl, kad naudotojo patirtį gali lengvai sutrikdyti nepavykęs API iškvietimas, tinklo klaidos, netinkama vartotojo įvestis arba netikėta serverio elgsena. Štai keletas geriausių praktikų, kurias galime panaudoti, norėdami gražiai tvarkyti savo projektų klaidas.

• Naudojant try/catch blokus. Kaip ir ankstesniuose pavyzdžiuose, naudokite try/catch blokuoja kodą, kuriame gali atsirasti klaidų. Tai galime padaryti parašydami numatytą logiką try blokuoti ir naudoti catch blokuoti, kad klaida būtų tinkamai tvarkoma rodant informacinius pranešimus, registruojant informaciją arba nukreipiant vartotojus į atitinkamus puslapius.
• Klaidų ribos. Taip pat galime naudoti „React“ klaidų ribas, kad gautume klaidų antriniuose komponentuose, nebūtinai paveikti visos programos.
• Pasirinktinių klaidų komponentų kūrimas. Sukūrus specialius klaidų komponentus, rodančius patogius pranešimus pagal įvykusios klaidos tipą, galima pasiūlyti labiau suasmenintą ir informatyvesnę patirtį, palyginti su bendraisiais klaidų pranešimais.

Išvada

Tinkamos autentifikavimo sistemos pasirinkimas yra neatsiejama saugios programos kūrimo dalis. Todėl labai svarbu atsižvelgti į mūsų programos reikalavimus, reikalingą saugos lygį ir naudotojo patirtį, kurią norime suteikti renkantis savo programos autentifikavimo metodus.

Vykdydami šiame straipsnyje nurodytus veiksmus ir geriausią praktiką, galime įdiegti patikimą ir patogią autentifikavimo sistemą „React“ programose naudodami „Appwrite“.