NextJS 및 Passport로 Google 인증을 구현하는 방법.

소개

최근에 나는 프로젝트에서 NextJS을 사용하기로 결정했고 많은 반복 끝에 passport과 함께 Google 인증을 사용하기로 결정했습니다. 이 기사에서는 Passport Google 전략을 사용하여 NextJS 애플리케이션에서 인증을 설정하는 방법에 대한 단계별 가이드를 제공합니다.

골자

메인 코스를 시작하기 전에 알아야 하고 설정해야 할 몇 가지 사항이 있습니다.

React(NextJS)뿐만 아니라 Javascript 또는 Typescript에 대한 기본 지식이 있어야 합니다.

http 요청 및 응답의 개념을 이해해야 합니다.

컴퓨터에 Node이 설정되어 있어야 합니다.

Google developers console에서 애플리케이션을 설정했어야 합니다. '애플리케이션 등록' 섹션here에서 설정 방법을 확인할 수 있습니다.

이 기사에서는 패키지 관리자로 yarn 을 사용할 예정이며 원하는 경우 계속해서 npm를 사용할 수 있습니다.


먼저 컴퓨터에 NextJS 프로젝트를 설정해야 하므로 터미널로 이동하여 다음 명령을 실행합니다.

yarn create next-app --typescript

프로젝트 이름을 입력하라는 메시지가 표시되면 입력하고 Enter 키를 눌러 계속 진행합니다.
설정이 완료되면 다음 명령을 실행하여 새로 설정한 프로젝트로 디렉토리를 변경해야 합니다.

cd <your-project-name>

다음으로 다음을 포함하여 인증 구현을 성공적으로 완료하는 데 필요한 모든 종속성을 설치합니다.

next-connect

passport

passport-google-oauth20

설치하려면 터미널에서 다음 명령을 실행하십시오.

yarn add next-connect passport passport-google-oauth20 @types/passport @types/passport-google-oauth20

다음으로 env 파일에 몇 가지 자격 증명을 추가해야 합니다. .env라는 새 파일을 만들고 다음 값을 추가합니다.

GOOGLE_CLIENT_ID: <your app client id>
GOOGLE_CLIENT_SECRET: <your app client secret>

그런 다음 이제 기본 코드를 작성할 수 있습니다.

이제 코딩을 시작합니다!

루트 디렉토리에서 lib라는 새 폴더를 만듭니다. lib 폴더 안에 passport-google-auth.ts라는 새 파일을 만듭니다.
passport-google-auth.ts 파일에서 다음 코드를 사용하여 패스포트를 사용하여 Google 전략을 구성합니다.

// /lib/passport-google-auth.ts

import { Profile, Strategy as GoogleStrategy } from "passport-google-oauth20";
import passport from "passport";

// logic to save your user or check if user exists in your record to proceed.
const saveUser = (user: Profile) => {
  return new Promise((resolve, reject) => {
    resolve("Successful");
  });
};

passport.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
      callbackURL: "/api/oauth2/redirect/google", // this is the endpoint you registered on google while creating your app. This endpoint would exist on your application for verifying the authentication
    },
    async (_accessToken, _refreshToken, profile, cb: any) => {
      try {
        await saveUser(profile);
        return cb(null, profile);
      } catch (e: any) {
        throw new Error(e);
      }
    }
  )
);


// passport.serializeUser stores user object passed in the cb method above in req.session.passport
passport.serializeUser((user, cb) => {
  process.nextTick(function () {
    return cb(null, user);
  });
});

// passport.deserializeUser stores the user object in req.user
passport.deserializeUser(function (
  user: any,
  cb: (arg0: null, arg1: any) => any
) {
  process.nextTick(function () {
    return cb(null, user);
  });
});

// for broader explanation of serializeUser and deserializeUser visit https://stackoverflow.com/questions/27637609/understanding-passport-serialize-deserialize

// An article that explains the concept of process.nextTick https://nodejs.dev/learn/understanding-process-nexttick

export default passport;

다음으로 /pages/api라는 이름의 login.ts 폴더에 새 파일을 만듭니다.login.ts 파일 내에서 다음 코드를 추가하여 마지막 단계에서 passport로 구성한 google 전략 방법을 사용하는 get 요청을 생성합니다.

// /pages/api/login.ts

import passport from "../../lib/passport-google-auth";
import nextConnect from "next-connect";

export default nextConnect()
  .use(passport.initialize())
  .get(
    passport.authenticate("google", {
      scope: ["profile", "email"],
    })
  );

이제 인증 확인을 위한 콜백 URL을 생성합니다.api의 pages 폴더로 이동하여 oauth2라는 폴더를 만듭니다. oauth2 폴더 안에 redirect라는 폴더를 만듭니다. redirect 폴더 안에 google.ts라는 새 파일을 만듭니다.

// /pages/api/oauth2/redirect/google.ts

import { NextApiRequest, NextApiResponse } from "next";
import nextConnect from "next-connect";
import passport from "../../../../lib/passport-google-auth";

export default nextConnect().get(
  passport.authenticate("google"),
  (req: NextApiRequest & { user: any }, res: NextApiResponse) => {
    // you can save the user session here. to get access to authenticated user through req.user
    res.redirect("/");
  }
);

백엔드 구현을 완료했으므로 이제 프런트엔드에서 엔드포인트를 사용할 수 있습니다.
로그인 페이지를 생성합니다. 로그인 페이지에 다음 코드를 붙여넣을 수 있습니다.

import Link from "next/link";

const LoginPage = () => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        height: "100%",
        width: "100%",
        textAlign: "center",
      }}
    >
      <h1 style={{ fontSize: "2.5rem" }}>Login with Google</h1>
      <Link href="/api/login" passHref>
        <button
          style={{
            border: "1px solid black",
            backgroundColor: "white",
            borderRadius: "10px",
            height: "50px",
            width: "200px",
            cursor: "pointer",
          }}
        >
          Proceed
        </button>
      </Link>
    </div>
  );
};

export default LoginPage;

Voila, 이제 Google로 다음 앱을 인증할 수 있습니다.

결론

이 문서에서는 다음 앱에서 사용자를 인증하기 위해 Passport Google 전략을 활용하는 방법을 보여줍니다.
이 자습서에서 사용된 코드here에 액세스할 수 있습니다.

부인 성명

이것은 나의 첫 번째 기술 기사이며 주제에 대해 정의를 내리기를 바랍니다. 질문이나 피드백은 댓글로 남겨주시면 됩니다. 나를 팔로우하고 github