【Next.js】Auth0을 사용하여 간단하고 안전하게 인증 기능을 실현하는 방법

Next.js에서 Auth0을 사용하는 방법에 대한 설명이 매우 적기 때문에 여기서 요약합니다.

Auth0의 부식과?

Auth0은 클라우드를 통해 인증과 인정을 제공하는 회사입니다.IDaS(Identity asa Service) 공급업체입니다.
장서 기능이 풍부해 쉽게 구현할 수 있고, 앱에 개인정보를 저장하지 않아 안전하게 로그인 기능을 할 수 있다는 점이 매력이다.또 접속이 가능한 SNS 계정의 종류도 풍부한 것이 특징이다.

Google

facebook

github

twitter

amazon

yahoo

등등 로그인이 가능합니다.
또 자유계획은 다음과 같은 제한이 있지만 개인 사용만으로도 충분하다.

활성 사용자 최대 7000명

최대 2가지 소셜 로그인

그리고 React, Vue, Anglar 등 유명한 프레임 튜토리얼이 갖춰져 있어 널리 활용할 수 있다.

Auth0 등록

그럼,next.js를 사용해서 Auth0을 사용하세요!
어쨌든 Auth0을 사용하려면 등록이 필요합니다.아래 사이트에 회원을 가입해 주십시오.
공식 사이트

Auth0 생성에 필요한 ID 및 암호

인증에 사용된 클라이언트 ID 및 클라이언트 기밀을 작성합니다.이 정보는 auth0을 사용할 때 ID와 암호 역할을 합니다.
먼저 대시보드를 방문하십시오.
그런 다음 테이블 왼쪽에 있는 Application 을 선택하고 왼쪽 위에 있는 CREATE APPLICATION 버튼을 클릭합니다.

이렇게 하면 팝업이 시작되고 응용 프로그램 이름을 입력하고 "Single Page Web Application"을 선택합니다.

제작 후 앞의 일람표에 추가하여 선택한 후 설정화면으로 옮깁니다.

응용 프로그램 설정

설정 화면에서 다음 항목을 설정합니다.

Allowed Callback URLs: http://localhost:3000/api/login/callback

Allowed Logout URLs: http://localhost:3000/

Allowed Callback URLs:Auth0 인증 후 리디렉션된 URL

Allowed Logiout URLs: 로그아웃 후 리디렉션된 URL

노트 프로그램에서 사용하는 정보

또한, 응용 프로그램에서auth0을 이용할 때 필요한 정보는 다음과 같이 적어 주십시오.

Domain

센터 ID: 인증용 ID

CentSecret: 인증용 암호

nextjs-auth0 샘플 프로그램의 전체 이미지

다음은nextjs-auth0의 샘플 프로그램을 사용하여 설명합니다.github에 소스github가 들어있어 clone을 시작하면 이해하기 쉬워요.
아래 이미지는 홈 화면에서 로그인 버튼을 눌러 인증한 후 다시 홈 화면 앞으로 돌아오는 화면으로 이동합니다.
메인 화면

로그인 화면

인증된 홈 화면

로그인 프로세스

auth0.js 설정

먼저 방금 작성한 클라이언트 ID와 클라이언트 기밀 등을 통해auth0을 설정합니다.page/api/lib/auth0.js에서auth0을 사용하는 설정을 설명해야 하지만 설정 자체는 다시 쓰기.env(이름이 필요.env.template입니다.
방금 저장한 설정 화면의 매개 변수를 입력하세요.
page/api/lib/auth0.js

import { initAuth0 } from '@auth0/nextjs-auth0';
import config from './config';

export default initAuth0({
  audience: config.API_AUDIENCE,
  clientId: config.AUTH0_CLIENT_ID,
  clientSecret: config.AUTH0_CLIENT_SECRET,
  scope: config.AUTH0_SCOPE,
  domain: config.AUTH0_DOMAIN,
  redirectUri: config.REDIRECT_URI,
  postLogoutRedirectUri: config.POST_LOGOUT_REDIRECT_URI,
  session: {
    cookieSecret: config.SESSION_COOKIE_SECRET,
    cookieLifetime: config.SESSION_COOKIE_LIFETIME,
    storeIdToken: true,
    storeRefreshToken: true,
    storeAccessToken: true
  }
});

.env

AUTH0_DOMAIN=「ドメイン」
AUTH0_CLIENT_ID=「クライアントID」
AUTH0_CLIENT_SECRET=「クライアントシークレット」
REDIRECT_URI=「コールバック後のURL」
POST_LOGOUT_REDIRECT_URI=「ログアウト後のURL」
SESSION_COOKIE_SECRET=「32文字以上のランダムな文字列」

SESSION_COOKIE_SECRET는 쿠키를 암호화하는 데 사용할 비밀 키를 설정합니다.사이트 제목가 있기 때문에 거기에 표시된 문자열을 설정하면 됩니다.
클라이언트 ID와 클라이언트 기밀은 auth0이 사용하는 응용 프로그램의 ID와 비밀번호를 인증하는 역할을 한다.따라서 외부로 유출되지 않도록 주의해야 한다.

서버측 프로세싱

다음은 서버 측의 처리를 설명합니다.서버 측에서 다음과 같은 처리를 하고 있습니다.

로그인(page/appi/login)

콜백(page/appi/call back)

로그아웃(page/appi/logout)

소개 획득(page/appi/me)

page/api/login

import auth0 from '../../lib/auth0';

export default async function login(req, res) {
  try {
    await auth0.handleLogin(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

로그인 처리에서auth0의hadleLogin 방법을 사용하여auth0의 로그인 페이지로 변경합니다.따라서 홈 화면에서 로그인 버튼을 눌렀을 때/api/login에 방문해 Auth0의 로그인 인증 화면으로 이동한다.
page/api/callback

import auth0 from '../../lib/auth0';

export default async function callback(req, res) {
  try {
    await auth0.handleCallback(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

구성은 로그인 처리와 대체로 같다.auth0 페이지에서 인증한 후 API로 다시 지정하여 쿠키를 생성합니다.이후auth0에 설정된 REDIRECT_URI로 방향을 바꿉니다.따라서 마이그레이션http://localhost:3000합니다.
page/api/logout

import auth0 from '../../lib/auth0';

export default async function logout(req, res) {
  try {
    await auth0.handleLogout(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

logout.jsx에서 handleLogout 방법으로 취소 처리를 한다.따라서 방문/api/logout하면 로그아웃 처리가 진행됩니다.로그아웃 후 설정된 URLpostLogoutRedirectUri로 마이그레이션합니다.하면, 만약, 만약...http://localhost:3000/네.
page/api/me

import auth0 from '../../lib/auth0';

export default async function me(req, res) {
  try {
    await auth0.handleProfile(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

마지막으로 소개된 API를 받습니다.SNS에 로그인하면 사용자 이름과 아이콘에 설정된 이미지 등이 표시됩니다.

클라이언트 처리

마지막으로 고객 측의 처리를 살펴봅시다.
index.jsx

import React from 'react';

import Layout from '../components/layout';
import { useFetchUser } from '../lib/user';

export default function Home() {
  const { user, loading } = useFetchUser();

  return (
    <Layout user={user} loading={loading}>
      <h1>Next.js and Auth0 Example</h1>

      {/* ロード中 */}
      {loading && <p>Loading login info...</p>}

      {/* ログアウト状態 */}
      {!loading && !user && (
        <>
          <p>
            To test the login click in <i>Login</i>
          </p>
          <p>
            Once you have logged in you should be able to click in <i>Profile</i> and <i>Logout</i>
          </p>
        </>
      )}

      {/* ログイン状態 */}
      {user && (
        <>
          <h4>Rendered user info on the client</h4>
          <pre>{JSON.stringify(user, null, 2)}</pre>
        </>
      )}
    </Layout>
  );
}

index.js에서lib속하user#useFetchUser 방법으로 불러오는 정보와 사용자 정보를 얻습니다.이에 따라 현재 어떤 상태인지 알 수 있다.

로드 중: loading이 트루

로그아웃 상태:loading은 가짜이고user 정보가 존재하지 않습니다

로그인 상태:user 정보가 있음

위에 소스가 들어올 때 "Loading login info..."로그인 상태에서 사용자 정보를 출력합니다.
참고로 useFetchUser에서/appi/me에 방문하여 개인 정보를 얻습니다.자세한 내용은 github의 소스를 보십시오.
로그인 상태 화면

header.jsx
layout 구성 요소 내의 헤더입니다.jsx에서 로그인 상태, 로그아웃 상태에서 표시되는 항목을 변경했습니다.
로그아웃 상태

로그인 상태

로그아웃 상태에서 접근\api\login의login 단추를 표시하지만 로그인 상태에서 접근\api\logout의login 단추를 표시합니다.
사용자 정보가 있는지 여부에 따라 로그인을 판단합니다.사용자 정보가 없으면 로그아웃 상태입니다.로그인 상태가 있으면