프로그래밍/Open API

구글 로그인 인증 API 사용하기

Beginner:) 2025. 3. 27.

구글이랑 네이버 로그인 연동도 있다 ...

2025.03.25 - [프로그래밍/Open API] - 카카오 로그인 인증 API 사용하기

카카오 로그인 인증 API 사용하기

기본적으로 카카오 ID는 있고 로그인이 되어있다는 가정하에... 1. 카카오 Developer 진입먼저 카카오 Developer에 로그인한다.https://developers.kakao.com/ 2. 플랫폼 입력"애플리케이션 추가하기"를 클

park-duck.tistory.com

2025.03.24 - [프로그래밍/Open API] - 네이버 로그인 인증 API 사용하기

네이버 로그인 인증 API 사용하기

기본적으로 네이버 아이디는 있고 로그인은 했다는 가정하에... 1. 네이버 개발자 센터 진입먼저 네이버 개발자센터 URL 접속https://developers.naver.com/main/ 여러 가지 API가 있는데, 네이버 로그인을

park-duck.tistory.com

기본적으로 구글 ID는 있고 로그인이 되어있다는 가정하에...

1. Google Cloud 진입

먼저 아래 링크를 접속한다.

https://console.cloud.google.com/welcome

"프로젝트 선택" 버튼을 눌러서 기존의 프로젝트를 선택하거나 "새 프로젝트" 버튼을 클릭하여 프로젝트를 생성한다.

프로젝트 이름을 입력하고 프로젝트를 만든다.

"API 및 서비스"를 클릭한다.

좌측 메뉴에서 OAuth 동의 화면을 클릭한다.

플랫폼 구성 "시작하기" 버튼을 클릭한다.

2. 플랫폼 입력

아래에 요구하는 프로젝트 정보를 입력한다.

프로젝트를 생성하였다면, OAuth 클라이언트를 생성한다.

애플리케이션에 대한 정보를 입력해준다.

나의 경우 웹에서 테스트 할 것이니 웹 애플리케이션에 대해 추가한다.

그러면 Client ID를 발급해주는데, 이 화면은 일단 무시한다.

클라이언트 메뉴를 누르면 클라이언트 리스트들이 나오는데, 내가 생성한 클라이언트를 클릭한다.

아래의 내용을 기억한다.

클라이언트 ID가 GOOGLE_CLIENT_ID,
클라이언트 보안 비밀번호가 GOOGLE_CLIENT_SECRET,
리다이렉션 URI가 GOOGLE_REDIRECT_URL라는 이름으로 .env파일에 등록할 것이다.

3. 코드구현

.env

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URL=

server.js

require('dotenv').config();
const express = require("express");
const cors = require("cors");
const passport = require('passport');
const session = require('express-session');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

const app = express();
app.use(express.json());
app.use(cors());

app.use(session({
    secret: Math.random().toString(36).substr(2, 10),
    resave: false,
    saveUninitialized: true,
}));

app.use(passport.initialize());
app.use(passport.session());

passport.serializeUser((user, done) => { done(null, user); });
passport.deserializeUser((obj, done) => { done(null, obj); });

passport.use(new GoogleStrategy({
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: process.env.GOOGLE_REDIRECT_URL,
    },
    (accessToken, refreshToken, profile, done) => {
        // 여기에 DB 저장 로직 등을 넣을 수 있음
        return done(null, profile);
    }
));
console.log(process.env.GOOGLE_CLIENT_ID);
console.log(process.env.GOOGLE_CLIENT_SECRET);
console.log(process.env.GOOGLE_REDIRECT_URL);

const PORT = process.env.PORT || 3000;

app.get("/", (req, res) => {
    res.sendFile(__dirname + "/public/index.html");
});

app.get("/google/login", passport.authenticate('google', {
    scope: ['profile', 'email']
  }));

app.get("/callback",
    passport.authenticate('google', { failureRedirect: '/auth/fail' }),
        (req, res) => {
            res.redirect('/google/user');
        }
);

app.get("/google/user", async (req, res) => {
    res.send(`로그인 성공! 사용자: ${JSON.stringify(req.user)}`);
});

app.listen(PORT, () => {
    console.log(`start http://localhost:${PORT}`);
});

index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>구글 로그인 샘플</title>
</head>
<body>

    <h2>구글 로그인</h2>
    <a id="googleLoginBtn" href="/google/login">구글 로그인</a>

</body>
</html>

Sample URL

http://110.13.154.24:5000/learn/loginplatform/-/tree/google?ref_type=heads