Autentifikimi dhe autorizimi në Next.js

Në këtë seksion, ne do t'ju udhëzojmë përmes zbatimit të vërtetimit të përdoruesit dhe kontrollit të aksesit në Next.js aplikacionin tuaj. Do të mësoni se si të arrini hyrje të sigurta të përdoruesve dhe menaxhim efektiv të lejeve të përdoruesit duke përdorur shërbime si Firebase ose Auth0.

Autentifikimi i përdoruesit me Firebase

Firebase ofron një grup të plotë mjetesh për ndërtimin e sistemeve të vërtetimit. Më poshtë është një shembull se si të konfiguroni vërtetimin e përdoruesit duke përdorur Firebase në Next.js aplikacionin tuaj:

Vendosni një Firebase projekt dhe aktivizoni shërbimet e vërtetimit.

Instaloni Firebase SDK-në e JavaScript:

npm install firebase

Konfiguro Firebase në aplikacionin tuaj:

import firebase from 'firebase/app';  
import 'firebase/auth';  
  
const firebaseConfig = {  
  apiKey: 'YOUR_API_KEY',  
  authDomain: 'YOUR_AUTH_DOMAIN',  
  projectId: 'YOUR_PROJECT_ID',  
  storageBucket: 'YOUR_STORAGE_BUCKET',  
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',  
  appId: 'YOUR_APP_ID',  
};  
  
if(!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);  
}  

Zbatoni vërtetimin e përdoruesit:

import firebase from 'firebase/app';  
import 'firebase/auth';  
  
// Sign up with email and password  
const signUpWithEmail = async(email, password) => {  
  try {  
    await firebase.auth().createUserWithEmailAndPassword(email, password);  
  } catch(error) {  
    console.error(error);  
  }  
};  
  
// Sign in with email and password  
const signInWithEmail = async(email, password) => {  
  try {  
    await firebase.auth().signInWithEmailAndPassword(email, password);  
  } catch(error) {  
    console.error(error);  
  }  
};  

Autentifikimi i përdoruesit me Auth0

Auth0 është një platformë vërtetimi dhe autorizimi që e bën të lehtë integrimin e vërtetimit të sigurt të përdoruesit në aplikacionin tuaj. Ja se si mund të përdorni Auth0 për vërtetimin e përdoruesit në Next.js aplikacionin tuaj:

Regjistrohuni për një llogari Auth0 dhe krijoni një aplikacion.

Instaloni Auth0 SDK:

npm install @auth0/auth0-react

Konfiguro Auth0 në aplikacionin tuaj:

import { Auth0Provider } from '@auth0/auth0-react';  
  
const Auth0ProviderWithHistory =({ children }) => {  
  const domain = 'YOUR_AUTH0_DOMAIN';  
  const clientId = 'YOUR_CLIENT_ID';  
  
  return( 
    <Auth0Provider  
      domain={domain}  
      clientId={clientId}  
      redirectUri={window.location.origin}  
    >  
      {children}  
    </Auth0Provider>  
 );  
};  

Zbatoni vërtetimin e përdoruesit:

import { useAuth0 } from '@auth0/auth0-react';  
  
function AuthButton() {  
  const { isAuthenticated, loginWithRedirect, logout } = useAuth0();  
  
  if(isAuthenticated) {  
    return <button onClick={() => logout()}>Log out</button>;  
  } else {  
    return <button onClick={() => loginWithRedirect()}>Log in</button>;  
  }  
}  

Kontrolli dhe Autorizimi i Aksesit

Përveç vërtetimit, kontrolli i aksesit dhe autorizimi sigurojnë që përdoruesit të kenë lejet e duhura për të hyrë në pjesë të caktuara të aplikacionit tuaj. Ju mund të menaxhoni rolet dhe lejet e përdoruesve duke përdorur Firebase ose zbatuar logjikën e personalizimit të autorizimit bazuar në atributet e përdoruesit.

konkluzioni

Ky seksion ju ka treguar se si të zbatoni vërtetimin e përdoruesit dhe kontrollin e aksesit në Next.js aplikacionin tuaj duke përdorur shërbime si Firebase ose Auth0. Duke siguruar hyrje të sigurta të përdoruesve dhe duke kontrolluar në mënyrë efektive lejet e përdoruesve, mund të krijoni një përvojë përdoruesi më të sigurt dhe më të përshtatur në aplikacionin tuaj.