google oauth 구현

Google Cloud

1. Google API Console에서 새 프로젝트 만들기

Google API Console 로 들어가 로그인 후 새 프로젝트를 만든다.

 

2. OAuth 동의 화면

사용자 인증 정보 들어가기 

API 및 서비스 클릭!

OAuth 동의 화면에서 User Type은 외부로 설정해 준다.(외부로 설정해야 google 계정이 있는 모든 사용자가 앱을 사용할 수 있다고 한다.)

 

앱 등록 수정 - OAuth 동의 화면에서는 * (별표시, 필수)만 입력해주고 넘어갔다

범위는 userinfo.email, userinfo.profile을 추가했다.

테스트 사용자를 추가하면 끝이다!

OAuth 동의 화면 완성!

 

3. 사용자 인증 정보 - OAuth 클라이언트 ID

OAuth 클라이언트 ID를 생성해보자.

승인된 자바스크립트 원본으로 프론트 경로를 입력하고 승인된 리디렉션 uri는 백앤드 api 경로를 입력했다. 승인된 리디렉션은 사용자가 google 로그인 후 어디로 이동할지를 나타낸다.

 

이렇게 하면 google에서 해야 할 일은 끝났다!

 

Next.js

1. 버튼 클릭 시 백앤드로 요청

로그인 페이지를 만들고 로그인 버튼 클릭 시 백앤드 경로로 보내줬다.

export default function LoginPage() {
  return (
    <div>
      <a href={`${process.env.NEXT_PUBLIC_API_HOST}/v1/auth/redirect/google`}>
        Google 로그인
      </a>
    </div>
  )
}

 

Express

1. googleapis 설치

npm install googleapis

2. OAuth 2.0 accessToken 가져오기

socialRedirect에서는 맞는 provider인지 확인 후 provider에 따라서 url을 생성하고 google 로그인 화면으로 리디렉션 처리를 했다.

import { google } from "googleapis";
import { Request, Response } from "express";

const REDIRECT_PATH = `/v1/auth/callback/`;
const REDIRECT_URI =
  process.env.NODE_ENV === "development"
    ? `http://localhost:3001${REDIRECT_PATH}`
    : `http://localhost:3001${REDIRECT_PATH}`;

const generators = {
  google() {
    const oauth2Client = new google.auth.OAuth2(
      process.env.GOOGLE_CLIENT_ID,
      process.env.GOOGLE_CLIENT_SECRET,
      `${REDIRECT_URI}google`
    );
    const url = oauth2Client.generateAuthUrl({
      scope: [
        "https://www.googleapis.com/auth/userinfo.email",
        "https://www.googleapis.com/auth/userinfo.profile",
      ],
    });

    return url;
  },
};

/**
 * Redirect to Social Login Link
 *
 * GET /v1/auth/redirect/:provider (google)
 */
export const socialRedirect = async (req: Request, res: Response) => {
  const { provider } = req.params;

  if (provider !== "google") {
    res.status(400).send();
    return;
  }

  const loginUrl = generators[provider]();
  res.redirect(loginUrl);
};

 

사용자가 구글 로그인에 성공하면 Google은 사용자를 redirect uri(http://localhost:3001/v1/auth/callback/google)로 이동시켜 인증코드를 전달해 준다. 이 인증코드를 가져와 토큰을 받아오고 이 토큰으로 다시 사용자 정보를 요청받아오면 끝이다!

/**
 * /v1/auth/callback/google
 */
export const googleCallback = async (
  req: Request,
  res: Response
  // next: NextFunction
) => {
  const { code }: { code?: string } = req.query;
  if (!code) {
    res.status(400).send();
    return;
  }

  try {
    const oauth2Client = new google.auth.OAuth2(
      process.env.GOOGLE_CLIENT_ID || "",
      process.env.GOOGLE_CLIENT_SECRET || "",
      `${REDIRECT_URI}google`
    );
    const { tokens } = await oauth2Client.getToken(code);
    if (!tokens)
      throw new Error("Failed to retrieve google token");

    oauth2Client.setCredentials(tokens);
    const { data } = await google
      .oauth2("v2")
      .userinfo.get({ auth: oauth2Client });

    console.log(data);
    res.redirect("http://localhost:3000/");
  } catch (e) {
    res.status(500).send("Internal Error");
  }
};

 

 

참고자료

https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=ko