320x100
기본적으로 카카오 ID는 있고 로그인이 되어있다는 가정하에...
1. 카카오 Developer 진입
먼저 카카오 Developer에 로그인한다.
2. 플랫폼 입력
"애플리케이션 추가하기"를 클릭한 뒤, 애플리케이션의 정보를 입력한다.
애플리케이션으로 들어가면 키들이 존재하는데, 사용목적에 맞는 키의 정보를 복사한다.
일반적인 web login인 경우 "REST API키"를 선택하면 된다.
다음으로는 플랫폼을 선택한다. Web Login의 경우 "Web"을 선택하면 된다.
Web의 도메인을 선택하면 Redirect URI를 등록한다.
활성화 상태를 ON으로 해주고 Redirect URI를 등록해 준다.
3. 코드구현
.env
KAKAO_CLIENT_ID=
KAKAO_REDIRECT_URI=
server.js
require("dotenv").config();
const express = require("express");
const cors = require("cors");
const app = express();
app.use(express.json());
app.use(cors());
const PORT = process.env.PORT || 3000;
app.get("/", (req, res) => {
res.sendFile(__dirname + "/public/index.html");
});
const axios = require("axios");
app.get("/kakao/login", (req, res) => {
const state = Math.random().toString(36).substr(2, 10);
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.KAKAO_CLIENT_ID}&redirect_uri=${encodeURIComponent(process.env.KAKAO_REDIRECT_URI)}&state=${state}`;
res.redirect(KAKAO_AUTH_URL);
});
app.get("/callback", async (req, res) => {
const { code, state } = req.query;
if (!code) {
return res.status(400).json({ error: "카카오 로그인 실패" });
}
try {
const response = await axios.post("https://kauth.kakao.com/oauth/token", null, {
params: {
grant_type: "authorization_code",
client_id: process.env.KAKAO_CLIENT_ID,
redirect_uri: process.env.KAKAO_REDIRECT_URI,
code: code,
state: state
},
headers: { "Content-type": "application/x-www-form-urlencoded;charset=utf-8" }
});
const accessToken = response.data.access_token;
res.redirect(`/kakao/user?access_token=${accessToken}`);
} catch (error) {
console.error("Access Token 요청 실패:", error.response?.data || error.message);
res.status(500).json({ error: "토큰 요청 실패" });
}
});
app.get("/kakao/user", async (req, res) => {
const { access_token } = req.query;
if (!access_token) {
return res.status(400).json({ error: "access_token이 필요합니다." });
}
try {
const response = await axios.get("https://kapi.kakao.com/v2/user/me", {
headers: { Authorization: `Bearer ${access_token}` }
});
res.json(response.data);
} catch (error) {
console.error("사용자 정보 요청 실패:", error.response?.data || error.message);
res.status(500).json({ error: "사용자 정보 요청 실패" });
}
});
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="kakaoLoginBtn" href="/kakao/login">카카오 로그인</a>
</body>
</html>
Sample URL
http://110.13.154.24:5000/learn/loginplatform/-/tree/kakao?ref_type=heads
4. 예제
카카오로 로그인하게 되면 제공받을 서비스의 동의를 구하게 되고
동의를 구하면 code값으로 해당 데이터를 불러온다.
반응형
'프로그래밍 > Open API' 카테고리의 다른 글
| 구글 로그인 인증 API 사용하기 (0) | 2025.03.27 |
|---|---|
| 네이버 로그인 인증 API 사용하기 (0) | 2025.03.24 |
댓글