Uwierzytelnianie i autoryzacja w Next.js

W tej sekcji przeprowadzimy Cię przez proces wdrażania uwierzytelniania użytkowników i kontroli dostępu w Twojej Next.js aplikacji. Dowiesz się, jak zapewnić bezpieczne logowanie użytkowników i efektywne zarządzanie uprawnieniami użytkowników za pomocą usług takich jak Firebase lub Auth0.

Uwierzytelnianie użytkownika za pomocą Firebase

Firebase zapewnia kompleksowy zestaw narzędzi do budowy systemów uwierzytelniania. Poniżej znajduje się przykład konfiguracji uwierzytelniania użytkownika przy użyciu Firebase w Next.js aplikacji:

Skonfiguruj Firebase projekt i włącz usługi uwierzytelniania.

Zainstaluj Firebase pakiet SDK JavaScript:

npm install firebase

Skonfiguruj Firebase w swojej aplikacji:

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);  
}  

Zaimplementuj uwierzytelnianie użytkownika:

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);  
  }  
};  

Uwierzytelnianie użytkownika za pomocą Auth0

Auth0 to platforma uwierzytelniania i autoryzacji, która ułatwia integrację bezpiecznego uwierzytelniania użytkowników z aplikacją. Oto jak możesz używać Auth0 do uwierzytelniania użytkowników w swojej Next.js aplikacji:

Zarejestruj konto Auth0 i utwórz aplikację.

Zainstaluj zestaw SDK Auth0:

npm install @auth0/auth0-react

Skonfiguruj Auth0 w swojej aplikacji:

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>  
 );  
};  

Zaimplementuj uwierzytelnianie użytkownika:

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>;  
  }  
}  

Kontrola dostępu i autoryzacja

Oprócz uwierzytelniania, kontroli dostępu i autoryzacji upewnij się, że użytkownicy mają odpowiednie uprawnienia dostępu do niektórych części aplikacji. Możesz zarządzać rolami i uprawnieniami użytkowników za pomocą Firebase lub wdrożyć niestandardową logikę autoryzacji opartą na atrybutach użytkownika.

Wniosek

W tej sekcji pokazano, jak zaimplementować uwierzytelnianie użytkowników i kontrolę dostępu w Next.js aplikacji przy użyciu usług takich jak Firebase lub Auth0. Zapewniając bezpieczne logowanie użytkowników i skutecznie kontrolując uprawnienia użytkowników, możesz stworzyć bezpieczniejsze i bardziej dostosowane doświadczenie użytkownika w swojej aplikacji.