Fíordheimhniú agus Údarú i Next.js

Sa chuid seo, tabharfaimid treoir duit trí fhíordheimhniú úsáideora agus rialú rochtana a chur i bhfeidhm i d’ Next.js iarratas. Foghlaimeoidh tú conas logáil isteach slán úsáideora a bhaint amach agus bainistíocht éifeachtach ar chead úsáideora ag baint úsáide as seirbhísí mar Firebase nó Auth0.

Fíordheimhniú Úsáideora le Firebase

Firebase cuireann sé sraith chuimsitheach uirlisí ar fáil chun córais fíordheimhnithe a thógáil. Seo thíos sampla de conas fíordheimhniú úsáideora a shocrú ag baint úsáide as Firebase i d’ Next.js iarratas:

Tionscadal a bhunú Firebase agus seirbhísí fíordheimhnithe a chumasú.

Suiteáil an Firebase JavaScript SDK:

npm install firebase

Cumraigh Firebase i d'iarratas:

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

Cuir fíordheimhniú úsáideora i bhfeidhm:

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

Fíordheimhniú Úsáideora le hAuth0

Is ardán fíordheimhnithe agus údaraithe é Auth0 a éascaíonn fíordheimhniú slán úsáideora a chomhtháthú isteach i d’fheidhmchlár. Seo mar is féidir leat Auth0 a úsáid le haghaidh fíordheimhnithe úsáideora i d’ Next.js aip:

Cláraigh le haghaidh cuntas Auth0 agus cruthaigh feidhmchlár.

Suiteáil an Auth0 SDK:

npm install @auth0/auth0-react

Cumraigh Auth0 i d'iarratas:

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

Cuir fíordheimhniú úsáideora i bhfeidhm:

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

Rialú Rochtana agus Údarú

Chomh maith le fíordheimhniú, cinntíonn rialú rochtana agus údarú go bhfuil na ceadanna cuí ag úsáideoirí rochtain a fháil ar chodanna áirithe de d’iarratas. Is féidir leat róil agus ceadanna úsáideora a bhainistiú trí úsáid Firebase a bhaint as loighic údaraithe shaincheaptha bunaithe ar shaintréithe úsáideora.

Conclúid

Thaispeáin an rannán seo duit conas fíordheimhniú úsáideora agus rialú rochtana a chur i bhfeidhm i d’ Next.js fheidhmchlár trí úsáid a bhaint as seirbhísí amhail Firebase nó Auth0. Trí logáil isteach slán úsáideora a chinntiú agus ceadanna úsáideoirí a rialú go héifeachtach, is féidir leat eispéireas úsáideora níos sábháilte agus níos saincheaptha a chruthú i d’fheidhmchlár.