Pengesahan dan Keizinan dalam Next.js

Dalam bahagian ini, kami akan membimbing anda melalui pelaksanaan pengesahan pengguna dan kawalan akses dalam Next.js aplikasi anda. Anda akan belajar cara mencapai log masuk pengguna selamat dan pengurusan kebenaran pengguna yang berkesan menggunakan perkhidmatan seperti Firebase atau Auth0.

Pengesahan Pengguna dengan Firebase

Firebase menyediakan satu set alat yang komprehensif untuk membina sistem pengesahan. Di bawah ialah contoh cara menyediakan pengesahan pengguna menggunakan Firebase dalam aplikasi anda Next.js:

Sediakan Firebase projek dan dayakan perkhidmatan pengesahan.

Pasang Firebase JavaScript SDK:

npm install firebase

Konfigurasikan Firebase dalam aplikasi anda:

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

Laksanakan pengesahan pengguna:

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

Pengesahan Pengguna dengan Auth0

Auth0 ialah platform pengesahan dan kebenaran yang memudahkan untuk menyepadukan pengesahan pengguna selamat ke dalam aplikasi anda. Begini cara anda boleh menggunakan Auth0 untuk pengesahan pengguna dalam Next.js apl anda:

Daftar untuk akaun Auth0 dan buat aplikasi.

Pasang Auth0 SDK:

npm install @auth0/auth0-react

Konfigurasikan Auth0 dalam aplikasi anda:

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

Laksanakan pengesahan pengguna:

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

Kawalan Akses dan Kebenaran

Selain pengesahan, kawalan akses dan kebenaran memastikan pengguna mempunyai kebenaran yang sesuai untuk mengakses bahagian tertentu aplikasi anda. Anda boleh mengurus peranan dan kebenaran pengguna menggunakan Firebase atau melaksanakan logik kebenaran tersuai berdasarkan atribut pengguna.

Kesimpulan

Bahagian ini telah menunjukkan kepada anda cara untuk melaksanakan pengesahan pengguna dan kawalan akses dalam Next.js aplikasi anda menggunakan perkhidmatan seperti Firebase atau Auth0. Dengan memastikan log masuk pengguna selamat dan mengawal kebenaran pengguna dengan berkesan, anda boleh mencipta pengalaman pengguna yang lebih selamat dan disesuaikan dalam aplikasi anda.