close

での認証と認可 Next.js

このセクションでは、アプリケーションにユーザー認証とアクセス制御を実装する方法を説明します Next.js。 や Auth0などのサービスを使用して、安全なユーザー ログインと効果的なユーザー権限管理を実現する方法を学びます Firebase。

ユーザー認証 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 安全なユーザー ログインを確保し、ユーザーのアクセス許可を効果的に制御することで、アプリケーションでより安全でカスタマイズされたユーザー エクスペリエンスを作成できます。