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을 생성합니다.apipages 폴더로 이동하여 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

    좋은 웹페이지 즐겨찾기