close

인증 및 권한 부여 Next.js

이 섹션에서는 애플리케이션에서 사용자 인증 및 액세스 제어를 구현하는 방법을 안내합니다 Next.js. Firebase Auth0과 같은 서비스를 사용하여 안전한 사용자 로그인과 효과적인 사용자 권한 관리를 달성하는 방법을 배우게 됩니다 .

다음을 통한 사용자 인증 Firebase

Firebase 인증 시스템 구축을 위한 포괄적인 도구 세트를 제공합니다. Firebase 다음은 애플리케이션 에서 사용자 인증을 설정하는 방법의 예입니다 Next.js.

프로젝트를 설정 Firebase 하고 인증 서비스를 활성화합니다.

JavaScript SDK를 설치합니다 Firebase.

npm install firebase

Firebase 애플리케이션에서 구성합니다 .

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

사용자 인증 구현:

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

Auth0을 사용한 사용자 인증

Auth0은 보안 사용자 인증을 애플리케이션에 쉽게 통합할 수 있게 해주는 인증 및 권한 부여 플랫폼입니다. 앱 에서 사용자 인증을 위해 Auth0을 사용하는 방법은 다음과 같습니다 Next.js.

Auth0 계정에 가입하고 애플리케이션을 만듭니다.

Auth0 SDK를 설치합니다.

npm install @auth0/auth0-react

애플리케이션에서 Auth0을 구성합니다.

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

사용자 인증 구현:

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

액세스 제어 및 승인

인증 외에도 액세스 제어 및 권한 부여는 사용자가 애플리케이션의 특정 부분에 액세스할 수 있는 적절한 권한을 갖도록 보장합니다. Firebase 사용자 속성을 기반으로 사용자 정의 권한 부여 논리를 사용하거나 구현하여 사용자 역할 및 권한을 관리할 수 있습니다 .

결론

이 섹션에서는 Auth0과 Next.js 같은 서비스를 사용하여 애플리케이션 에서 사용자 인증 및 액세스 제어를 구현하는 방법을 보여주었습니다. Firebase 안전한 사용자 로그인을 보장하고 사용자 권한을 효과적으로 제어함으로써 애플리케이션에서 더욱 안전하고 맞춤화된 사용자 환경을 만들 수 있습니다.