[Google 간편 로그인] Next14 + App router + Typescript에 Oauth 구글 간편 로그인 구현하기

구글 간편 로그인 하는 법

1. 구글 클라우드 사이트 접속

- 구글 클라우드

한국어 옆에 보이는 콘솔링크로 이동합니다.

 

2. 새 프로젝트 생성

새 프로젝트를 생성 합니다.

프로젝트가 만들고 해당 프로젝트로 이동합니다.

위에 보이는 경로로 OAuth 동의 화면을 찾아갑니다.

 

3. OAuth 동의

외부를 선택하여 만들기.

위 진행단계로 진행합니다.

앱이름, 사용자 이메일, 앱 도메인을 입력합니다. 앱 도메인은 개발 상태에선 http://localhost:3000/로 작성하면 됩니다.

 

4. 범위

사용자가 동의해야 할 권한들을 설정합니다. 예를 들어, 구글 계정 정보 접근을 원하면 email, profile 등의 범위를 추가합니다.

권한을 추가하려면, 필요한 구글 API 범위를 선택해야 합니다.

여기서 선택한 범위에 따라 google에 사용자 정보를 요청할 수 있다. 

<Link
  href={`https://accounts.google.com/o/oauth2/v2/auth?scope=https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile&response_type=code&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}`}
>
  <Image src="/icons/social/social_google.svg" width={72} height={72} alt="구글 로그인" />
</Link>

 

5. 마무리

테스트 사용자와 요약은 별다른 사항이 없으면 다음으로 넘겨 앱 등록을 완료합니다.

 

---

OAuth 클라이언트 ID 설정

위에 보이는 경로로 사용자 인증 정보를 찾아갑니다.

 

1. OAuth 클라이언트 ID 선택

위 내용대로 각자 프로젝트에 알맞은 Redirect URL을 적어준다.

이렇게 생성된 클라이언트 ID와 비밀번호는 복사하여 .env 파일에 저장하여 사용한다.

 

코드 작성

Redirect URL 주소인 BASEURL/api/oauth/callback/google 의 코드는 다음과 같이 작성하였다.

import { NextRequest, NextResponse } from "next/server";
import axios from "axios";
import { decodeJwt } from "@/middleware";
export const GET = async (req: NextRequest) => {
  const searchParams = req.nextUrl.searchParams;
  const code = searchParams.get("code");

  if (!code) {
    return NextResponse.json({ message: "Code not found" }, { status: 400 });
  }

  const GOOGLE_TOKEN_URL = "https://oauth2.googleapis.com/token";
  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
  const clientSecret = process.env.NEXT_PUBLIC_GOOGLE_SECRET;
  const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;

  if (!clientId || !clientSecret || !redirectUri) {
    return NextResponse.json({ message: "Environment variables not set" }, { status: 500 });
  }

  try {
    // Access Token 요청
    const tokenResponse = await axios.post(GOOGLE_TOKEN_URL, null, {
      params: {
        code,
        client_id: clientId,
        client_secret: clientSecret,
        redirect_uri: redirectUri,
        grant_type: "authorization_code",
      },
    });

    const { access_token, id_token } = tokenResponse.data;
    console.log("Google access token:", access_token);
    console.log("Google id token:", id_token);

    // id_token 디코딩
    const decodedIdToken = decodeJwt(id_token);
    if (!decodedIdToken) {
      return NextResponse.json({ message: "Invalid ID token" }, { status: 400 });
    }

    const user = {
      id: decodedIdToken.sub,
      name: decodedIdToken.name,
      picture: decodedIdToken.picture,
      email: decodedIdToken.email,
    };
    console.log("Google user:", user);

    // 사용자 정보를 클라이언트에 반환
    const response = NextResponse.redirect("http://localhost:3000");
    response.cookies.set("user", JSON.stringify(user), {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      sameSite: "strict",
      maxAge: 60 * 60 * 24, // 1일
      path: "/",
    });
    return response;
  } catch (error) {
    console.error("Google login error:", error);
    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
  }
};

콘솔로 출력해본 구글 엑세스 토큰, 구글 id 토큰, user가 잘 출력된다.
구글 id 토큰은 암호화 된 JWT 토큰으로 발급이되어 JWT 디코딩 사이트 에서 확인할 수 있다.