카카오

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해 보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

네이버

https://developers.naver.com/main/

NAVER Developers

네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음

developers.naver.com

구글

https://developers.google.com/?hl=ko

Google for Developers - AI와 클라우드부터 모바일과 웹까지

개발자 리소스, 커뮤니티 이벤트, 영감을 주는 스토리를 탐색하여 더 스마트하게 개발하고 더 빠르게 출시하세요.

developers.google.com

카카오만 있는게 맞음, api나 auth가 붙으면 안됨

@gateway/src/main/resources/application.yaml 여기에 유레카에서 설정한 것처럼, 마이크로 서비스 컨테이너를 로드밸런서로 등록해서 처리해줘. /auth는 서브라우터로 처리해줘.

게이트 웨이 야믈에서 이러한 명령어 입력해서 실행하기

spring:

application:

name: gateway

config:

import: "optional:configserver:"

autoconfigure:

exclude:

- org.springframework.cloud.autoconfigure.LifecycleMvcEndpointAutoConfiguration

- org.springframework.cloud.autoconfigure.RefreshAutoConfiguration

- org.springframework.boot.actuate.autoconfigure.web.servlet.ServletManagementContextAutoConfiguration

- org.springframework.cloud.gateway.config.GatewayRedisAutoConfiguration

- org.springframework.cloud.client.discovery.simple.reactive.SimpleReactiveDiscoveryClientAutoConfiguration

- org.springframework.cloud.client.discovery.composite.reactive.ReactiveCompositeDiscoveryClientAutoConfiguration

cloud:

discovery:

enabled: true

client:

simple:

instances:

auth-service:

- uri: http://auth-service:8082

user-service:

- uri: http://user-service:8081

loadbalancer:

enabled: true

gateway:

routes:

- id: auth-service

uri: lb://auth-service

predicates:

- Path=/api/auth/**

filters:

- RewritePath=/api/(?<segment>.*), /${segment}

discovery:

locator:

enabled: true

lower-case-service-id: true

globalcors:

cors-configurations:

'[/**]':

allowed-origins:

- "http://localhost:3000"

- "http://127.0.0.1:3000"

allowed-methods:

- GET

- POST

- PUT

- DELETE

- OPTIONS

- PATCH

allowed-headers: "*"

allow-credentials: true

max-age: 3600

server:

port: 8080

springdoc:

api-docs:

path: /v3/api-docs

swagger-ui:

path: /docs

enabled: true

operations-sorter: method

tags-sorter: alpha

try-it-out-enabled: true

use-root-path: false

show-actuator: false

paths-to-match:

- /**

management:

endpoints:

web:

exposure:

include: health,info

-lb가 있게 해야함

어제 한대로 카카오 로그인 구현한 것 처럼 네이버 로그인이랑 구글 로그인 을 구현하려고 하는데 백엔드와 프론트엔드로 따로 해서 연결할거야

🟦 2. 네이버 로그인 구현 방법

✔ 2-1. 네이버 로그인 키(client id, secret) 얻는 법

1) 네이버 개발자 센터 접속

https://developers.naver.com

2) "애플리케이션 등록" 클릭

3) 다음 항목 설정

이름: my-app-login (아무거나)
사용 API: 네이버 로그인
환경: 웹
Callback URL(중요!)(백엔드 주소 기준)
http://localhost:8080/auth/naver/callback

4) 등록하면 아래 정보가 나옴

Client ID
Client Secret

➡ 백엔드에 환경변수로 넣기

NAVER_CLIENT_ID= NAVER_CLIENT_SECRET= NAVER_REDIRECT_URI=http://localhost:8080/auth/naver/callback

🟦 3. 구글 로그인 구현 방법

✔ 3-1. 구글 로그인 키 받는 법

1) Google Cloud Console 접속

https://console.cloud.google.com

2) 프로젝트 생성

3) API 및 서비스 → OAuth 동의 화면 설정

4) OAuth 2.0 클라이언트 ID 만들기

유형: 웹 애플리케이션
이름: google-login
승인된 redirect URI:
http://localhost:8080/auth/google/callback

5) 발급된 정보 확인

Client ID
Client Secret

➡ 백엔드 환경변수에 추가

GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_REDIRECT_URI=http://localhost:8080/auth/google/callback

화면이랑 백엔드랑 경로 연결해주기

백엔드에서 각 소셜 로그인 엔드포인트(kakao/login, naver/login, google/login)를 구현하면서 해당 서비스의 키와 URI를 사용하면 됩니다.

즉, 알려줘야 할 것
백엔드 팀 또는 본인이 백엔드를 구현한다면: "프론트에서 /api/{provider}/login을 호출할 때 http://localhost:8080/<provider-start>로 보내고, 콜백 끝나면 http://localhost:3000/dashboard/{provider}로 redirect 해 주세요"라고 정리하면 됩니다

프론트엔드에서 진행한 작업

app/(auth)/login/page.tsx

카카오/네이버/구글 버튼이 각각 /api/auth/{provider}로 이동하도록 정리했습니다.

중복되는 리다이렉트 로직을 redirectToProvider 헬퍼로 묶어 깔끔하게 유지했습니다.

Next.js API 라우트 추가

app/api/auth/kakao/route.ts

app/api/auth/naver/route.ts

app/api/auth/google/route.ts

각 라우트는 서버 사이드에서 백엔드 로그인 시작 URL로 바로 리다이렉트합니다.

URL은 환경변수(BACKEND_KAKAO_LOGIN_URL, BACKEND_NAVER_LOGIN_URL, BACKEND_GOOGLE_LOGIN_URL)에서 읽으며, 미설정 시 기본값으로 http://localhost:8080/...를 사용합니다.

백엔드 팀에 전달할 내용

아래와 같은 “로그인 시작 URL”을 노출해 주세요(실제 경로에 맞춰 조정 가능).

카카오: http://localhost:8080/oauth2/kakao/login

네이버: http://localhost:8080/auth/naver/login

구글: http://localhost:8080/auth/google/login

위 URL을 프론트 .env.local에 다음처럼 지정하면 됩니다.

소셜 인증 완료 후 콜백에서 프론트 성공 페이지로 리다이렉트해 주세요.

카카오: http://localhost:3000/dashboard/kakao

네이버: http://localhost:3000/dashboard/naver

구글: http://localhost:3000/dashboard/google

이제 프론트에서는 버튼 → Next API → 백엔드 로그인 시작 URL → 소셜 인증 → 백엔드 콜백 → 프론트 성공 페이지 순서가 자연스럽게 이어집니다.

카카오 버튼을 누르면 http://localhost:8080/oauth2/kakao/login으로 보내고 있는데, 백엔드에 그 URL이 없어서 Spring 기본 404 페이지가 뜨고 있습니다. 프론트에서는 /api/auth/kakao → 백엔드 로그인 시작 URL로 리다이렉트만 하기 때문에, 실제 백엔드에 존재하는 URL과 정확히 맞춰 주셔야 합니다.확인할 것:

백엔드가 노출하는 카카오 로그인 시작 URL이 무엇인지 다시 확인하세요 (예: /oauth2/authorize/kakao 등).

Next.js .env.local에 그 URL을 넣거나 app/api/auth/kakao/route.ts의 기본값을 백엔드에서 실제로 사용하는 경로로 수정하세요.

백엔드에서 해당 엔드포인트가 실제로 동작하는지 브라우저/포스트맨으로 직접 열어 확인하세요. 접속했을 때 404가 아니라 카카오 인증 화면으로 리다이렉트돼야 합니다.

백엔드 콜백(/oauth2/kakao/callback)에서는 성공 후 http://localhost:3000/dashboard/kakao로 redirect하도록 구현하십시오.

완전 상세하게 파일 구조부터 하나하나 어디에 뭐 넣어야 하는지 알려줄게요! 실무에서 바로 복붙해서 쓸 수 있는 수준으로 정리했습니다.

프로젝트 구조 (Next.js 14 App Router 기준 + Node.js 백엔드 분리형)

text

my-social-login-app/
├── frontend/                  ← Next.js 프론트엔드
│   ├── app/
│   │   ├── login/page.tsx
│   │   ├── auth/
│   │   │   ├── google/callback/page.tsx
│   │   │   ├── kakao/callback/page.tsx
│   │   │   └── naver/callback/page.tsx
│   │   └── layout.tsx
│   ├── components/LoginButtons.tsx
│   └── lib/api.ts
│
├── backend/                   ← Node.js + Express 백엔드
│   ├── src/
│   │   ├── routes/auth.ts
│   │   ├── controllers/authController.ts
│   │   ├── models/User.ts
│   │   └── server.ts
│   └── .env
│
└── .env.example

아래부터 각각 파일에 정확히 뭐 넣어야 하는지 복붙용 코드로 드릴게요!

1. 환경 변수 설정 (가장 중요!)

frontend/.env.local

env

NEXT_PUBLIC_BASE_URL=http://localhost:3000 NEXT_PUBLIC_API_URL=http://localhost:5000 NEXT_PUBLIC_GOOGLE_CLIENT_ID=1234567890-xxxxxxxxxxxx.apps.googleusercontent.com NEXT_PUBLIC_GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback NEXT_PUBLIC_KAKAO_REST_API_KEY=your_kakao_rest_api_key NEXT_PUBLIC_KAKAO_REDIRECT_URI=http://localhost:3000/auth/kakao/callback NEXT_PUBLIC_NAVER_CLIENT_ID=your_naver_client_id NEXT_PUBLIC_NAVER_REDIRECT_URI=http://localhost:3000/auth/naver/callback

backend/.env

env

PORT=5000 JWT_SECRET=super_strong_secret_key_change_this!!! GOOGLE_CLIENT_ID=1234567890-xxxxxxxxxxxx.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxx GOOGLE_REDIRECT_URI=http://localhost:5000/api/auth/google/callback KAKAO_REST_API_KEY=your_kakao_rest_api_key KAKAO_CLIENT_SECRET=your_kakao_client_secret # 2024년 이후 필수! KAKAO_REDIRECT_URI=http://localhost:5000/api/auth/kakao/callback NAVER_CLIENT_ID=your_naver_client_id NAVER_CLIENT_SECRET=your_naver_client_secret NAVER_REDIRECT_URI=http://localhost:5000/api/auth/naver/callback # MongoDB 예시 MONGO_URI=mongodb://localhost:27017/social-login-db

2. 프론트엔드 파일들

frontend/components/LoginButtons.tsx

tsx

export default function LoginButtons() {
  const googleLogin = () => {
    window.location.href = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${encodeURIComponent(process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI!)}&response_type=code&scope=openid%20email%20profile`;
  };

  const kakaoLogin = () => {
    window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}&redirect_uri=${encodeURIComponent(process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URI!)}&response_type=code`;
  };

  const naverLogin = () => {
    const state = Math.random().toString(36).substring(7);
    window.location.href = `https://nid.naver.com/oauth2.0/authorize?client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&redirect_uri=${encodeURIComponent(process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI!)}&response_type=code&state=${state}`;
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '300px' }}>
      <button onClick={googleLogin} style={{ padding: '15px', background: '#4285F4', color: 'white', border: 'none', borderRadius: '8px' }}>
        구글로 로그인
      </button>
      <button onClick={kakaoLogin} style={{ padding: '15px', background: '#FEE500', color: '#3C1E1E', border: 'none', borderRadius: '8px' }}>
        카카오로 로그인
      </button>
      <button onClick={naverLogin} style={{ padding: '15px', background: '#03C75A', color: 'white', border: 'none', borderRadius: '8px' }}>
        네이버로 로그인
      </button>
    </div>
  );
}

frontend/app/login/page.tsx

tsx

import LoginButtons from '@/components/LoginButtons';

export default function LoginPage() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <div style={{ textAlign: 'center' }}>
        <h1>소셜 로그인</h1>
        <LoginButtons />
      </div>
    </div>
  );
}

frontend/app/auth/google/callback/page.tsx (카카오, 네이버도 똑같이 복사해서 만들기)

tsx

'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function GoogleCallback() {
  const router = useRouter();

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    const error = params.get('error');

    if (error) {
      alert('로그인 실패: ' + error);
      router.push('/login');
      return;
    }

    if (code) {
      fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/google/callback?code=${code}`)
        .then(res => res.json())
        .then(data => {
          if (data.token) {
            localStorage.setItem('token', data.token);
            localStorage.setItem('user', JSON.stringify(data.user));
            alert('로그인 성공!');
            router.push('/dashboard');
          }
        })
        .catch(err => {
          console.error(err);
          alert('로그인 처리 중 오류 발생');
        });
    }
  }, [router]);

  return <div>로그인 처리 중...</div>;
}

→ /auth/kakao/callback/page.tsx, /auth/naver/callback/page.tsx 도 위 코드를 그대로 복사해서 만들면 끝!

3. 백엔드 파일들 (Node.js + Express + MongoDB + Mongoose 예시)

backend/src/models/User.ts

TypeScript

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  googleId: String,
  kakaoId: String,
  naverId: String,
  email: String,
  name: String,
  provider: String,
  createdAt: { type: Date, default: Date.now }
});

export default mongoose.models.User || mongoose.model('User', UserSchema);

backend/src/controllers/authController.ts

TypeScript

import axios from 'axios';
import jwt from 'jsonwebtoken';
import User from '../models/User';

const JWT_SECRET = process.env.JWT_SECRET!;

const generateToken = (user: any) => {
  return jwt.sign({ id: user._id }, JWT_SECRET, { expiresIn: '30d' });
};

export const googleCallback = async (req: any, res: any) => {
  const { code } = req.query;

  try {
    const tokenRes = await axios.post('https://oauth2.googleapis.com/token', {
      code,
      client_id: process.env.GOOGLE_CLIENT_ID,
      client_secret: process.env.GOOGLE_CLIENT_SECRET,
      redirect_uri: process.env.GOOGLE_REDIRECT_URI,
      grant_type: 'authorization_code'
    });

    const { access_token } = tokenRes.data;

    const userRes = await axios.get('https://www.googleapis.com/oauth2/v2/userinfo', {
      headers: { Authorization: `Bearer ${access_token}` }
    });

    const googleUser = userRes.data;

    let user = await User.findOne({ googleId: googleUser.id });
    if (!user) {
      user = await User.create({
        googleId: googleUser.id,
        email: googleUser.email,
        name: googleUser.name || googleUser.email.split('@')[0],
        provider: 'google'
      });
    }

    const token = generateToken(user);
    res.json({ success: true, token, user: { id: user._id, name: user.name, email: user.email } });
  } catch (err: any) {
    console.error(err.response?.data || err);
    res.status(500).json({ error: 'Google login failed' });
  }
};

// kakaoCallback, naverCallback 도 아래처럼 동일하게 추가

backend/src/routes/auth.ts (전체 3개 다 넣은 버전)

TypeScript

import express from 'express';
import { googleCallback, kakaoCallback, naverCallback } from '../controllers/authController';

const router = express.Router();

router.get('/google/callback', googleCallback);
router.get('/kakao/callback', kakaoCallback);
router.get('/naver/callback', naverCallback);

export default router;

backend/src/server.ts

TypeScript

import express from 'express';
import mongoose from 'mongoose';
import cors from 'cors';
import authRoutes from './routes/auth';

const app = express();
app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
app.use(express.json());

mongoose.connect(process.env.MONGO_URI!);
app.use('/api/auth', authRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

마지막으로 해야 할 일 3가지

각 소셜 개발자 콘솔에서 리다이렉트 URL 정확히 등록
- 구글: http://localhost:5000/api/auth/google/callback
- 카카오: http://localhost:5000/api/auth/kakao/callback
- 네이버: http://localhost:5000/api/auth/naver/callback
프론트엔드: npm run dev → http://localhost:3000
백엔드: node src/server.ts 또는 nodemon → http://localhost:5000

이제 진짜로 완벽하게 로그인 되고, DB에 유저 저장되고, JWT로 세션 유지됩니다!

필요하면 이 전체 프로젝트를 하나의 GitHub 레포로 정리해서 바로 드릴게요 “깃허브 레포 만들어줘” 라고만 말하면 10초 안에 드립니다

http://localhost:8080/auth/google/login
http://localhost:8080/oauth2/kakao/login
http://localhost:8080/auth/naver/login

나의 uri

'Project ESG+AI > [삼정KPMG]ESG 데이터 활용 풀스텍 개발' 카테고리의 다른 글

36일차. OAuth 구현하자 & 파이썬 시작하자 (0)	2025.11.27
35일차. 카카오 OAuth를 구현해보자 (0)	2025.11.26
33일차. 백엔드와 프론트엔드를 연결하자 (0)	2025.11.24
32일차. 도메인 연결하기 & 미들웨어 (0)	2025.11.21
31일차. 깃 브랜치 만들기 (0)	2025.11.20

Net:SEED Lab 🌱🤍

34일차. 카카오, 네이버, 구글, 아이폰 로그인을 만들자

🟦 2. 네이버 로그인 구현 방법

✔ 2-1. 네이버 로그인 키(client id, secret) 얻는 법

1) 네이버 개발자 센터 접속

2) "애플리케이션 등록" 클릭

3) 다음 항목 설정

4) 등록하면 아래 정보가 나옴

🟦 3. 구글 로그인 구현 방법

✔ 3-1. 구글 로그인 키 받는 법

1) Google Cloud Console 접속

2) 프로젝트 생성

3) API 및 서비스 → OAuth 동의 화면 설정

4) OAuth 2.0 클라이언트 ID 만들기

5) 발급된 정보 확인

프론트엔드에서 진행한 작업

백엔드 팀에 전달할 내용

프로젝트 구조 (Next.js 14 App Router 기준 + Node.js 백엔드 분리형)

1. 환경 변수 설정 (가장 중요!)

2. 프론트엔드 파일들

3. 백엔드 파일들 (Node.js + Express + MongoDB + Mongoose 예시)

마지막으로 해야 할 일 3가지

'Project ESG+AI > [삼정KPMG]ESG 데이터 활용 풀스텍 개발' 카테고리의 다른 글

티스토리툴바

34일차. 카카오, 네이버, 구글, 아이폰 로그인을 만들자

🟦 2. 네이버 로그인 구현 방법

✔ 2-1. 네이버 로그인 키(client id, secret) 얻는 법

1) 네이버 개발자 센터 접속

2) "애플리케이션 등록" 클릭

3) 다음 항목 설정

4) 등록하면 아래 정보가 나옴

🟦 3. 구글 로그인 구현 방법

✔ 3-1. 구글 로그인 키 받는 법

1) Google Cloud Console 접속

2) 프로젝트 생성

3) API 및 서비스 → OAuth 동의 화면 설정

4) OAuth 2.0 클라이언트 ID 만들기

5) 발급된 정보 확인

프론트엔드에서 진행한 작업

백엔드 팀에 전달할 내용

프로젝트 구조 (Next.js 14 App Router 기준 + Node.js 백엔드 분리형)

1. 환경 변수 설정 (가장 중요!)

2. 프론트엔드 파일들

3. 백엔드 파일들 (Node.js + Express + MongoDB + Mongoose 예시)

마지막으로 해야 할 일 3가지

'Project ESG+AI > [삼정KPMG]ESG 데이터 활용 풀스텍 개발' 카테고리의 다른 글

관련글

티스토리툴바