I'm always a beginner :)

프로그래밍/Open API

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

Beginner:) 2025. 3. 24.
320x100

기본적으로 네이버 아이디는 있고 로그인은 했다는 가정하에...

 

1. 네이버 개발자 센터 진입

먼저 네이버 개발자센터 URL 접속

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

 

여러 가지 API가 있는데, 네이버 로그인을 클릭

 

네이버 로그인 API에서 "오픈 API 이용 신청" 버튼을 클릭

 

 

2. 애플리케이션 정보 입력

 

 

이름은 아래와 같이 최상단에 나오는 어플리케이션 이름이 된다.

 

 

현재는 로그인 API만 추가되어 있는데, 다양한 API도 같이 포함시킬 수 있다.

API를 사용할 때 필요한 필수&선택데이터를 선택할 수 있다.

 

 

API를 사용하는 환경을 선택할 수 있다. 

물론 여러 개 선택 가능하다.

 

 

PC 웹의 경우 서비스할 URL과 로그인 후 정보를 받을 Callback URL을 입력해 준다.

 

 

애플리케이션 등록이 끝나면 "Client ID"와 "Client Secret"을 얻을 수 있다.

 

3. 코드 구현

나의 경우는 NodeJS, Web을 예로 든다.

 

 

naver login 버튼 클릭 이벤트

naver_login_btn.addEventListener("click", async function () {
    window.location.href = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${CLIENT_ID}&state=${STATE}&redirect_uri=${REDIRECT_URI}`;
});

 

여기서 "CLIENT_ID"와 "REDIRECT_URI"는  2번에서 입력한 값이고

"STATE"는 임의의 값이다. 리다이렉션에서 똑같은 쿼리로 돌아오기에 증명하기 위한 코드이며 선택사항이다.

 

 

redirection 된 페이지

document.addEventListener("DOMContentLoaded", async function () {
    const urlParams = new URLSearchParams(window.location.search);
    const code = urlParams.get("code");
    const state = urlParams.get("state");

    if ( code ) {
        const param = JSON.stringify({code: code, state: state});
		const tokenResponse = await axios.post("https://nid.naver.com/oauth2.0/token", null, {
            params: {
                grant_type: "authorization_code",
                client_id: CLIENT_ID,
                client_secret: CLIENT_SECRET,
                code: code,
                state: state
            }
        });

        const accessToken = tokenResponse.data.access_token;
        console.log("발급된 Access Token:", accessToken);

        if (!accessToken) {
            return res.status(400).json({ error: "Access Token 발급 실패" });
        }

        // 네이버 사용자 정보 요청
        const userResponse = await axios.get("https://openapi.naver.com/v1/nid/me", {
            headers: { Authorization: `Bearer ${accessToken}` }
        });

        const userInfo = userResponse.data.response;
        console.log("네이버 사용자 정보:", userInfo);

        // 사용자 정보 처리 (예: DB 저장 또는 세션 생성)
        const userData = {
            id: userInfo.id,
            name: userInfo.name,
            email: userInfo.email,
            profile_image: userInfo.profile_image,
        };
    } 
    else { console.error("코드 값이 없습니다."); }
});

 

redirection된 페이지에서 url 파라미터로 login에 대한 정보를 code로 return 해주는데,

이 code를 이용하여 토큰 데이터를 받아올 수 있다.

 

 

그러면 이 토큰데이터를 통해서 DB로 저장하던지, cookie에 저장하던지  할 수 있는 것이다.

 

4. 예제

위 글과 관계없이 테스트용으로 작성한 예제이다. 

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

 

.env

NAVER_CLIENT_ID=
NAVER_CLIENT_SECRET=
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("/naver/login", (req, res) => {
    const state = Math.random().toString(36).substr(2, 10);

    const NAVER_AUTH_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NAVER_CLIENT_ID}&redirect_uri=${encodeURIComponent(process.env.REDIRECT_URI)}&state=${state}`;

    res.redirect(NAVER_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://nid.naver.com/oauth2.0/token", null, {
            params: {
                grant_type: "authorization_code",
                client_id: process.env.NAVER_CLIENT_ID,
                client_secret: process.env.NAVER_CLIENT_SECRET,
                code,
                state
            }
        });

        const accessToken = response.data.access_token;

        res.redirect(`/naver/user?access_token=${accessToken}`);
    } catch (error) {
        console.error("Access Token 요청 실패:", error.response?.data || error.message);
        res.status(500).json({ error: "토큰 요청 실패" });
    }
});

app.get("/naver/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://openapi.naver.com/v1/nid/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}`);
});
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("/naver/login", (req, res) => {
    const state = Math.random().toString(36).substr(2, 10);

    const NAVER_AUTH_URL = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NAVER_CLIENT_ID}&redirect_uri=${encodeURIComponent(process.env.REDIRECT_URI)}&state=${state}`;

    res.redirect(NAVER_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://nid.naver.com/oauth2.0/token", null, {
            params: {
                grant_type: "authorization_code",
                client_id: process.env.NAVER_CLIENT_ID,
                client_secret: process.env.NAVER_CLIENT_SECRET,
                code,
                state
            }
        });

        const accessToken = response.data.access_token;

        res.redirect(`/naver/user?access_token=${accessToken}`);
    } catch (error) {
        console.error("Access Token 요청 실패:", error.response?.data || error.message);
        res.status(500).json({ error: "토큰 요청 실패" });
    }
});

app.get("/naver/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://openapi.naver.com/v1/nid/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="naverLoginBtn" href="/naver/login">네이버 로그인</a>
</body>
</html>
반응형
저작자표시

'프로그래밍 > Open API' 카테고리의 다른 글

구글 로그인 인증 API 사용하기  (0) 2025.03.27
카카오 로그인 인증 API 사용하기  (0) 2025.03.25

댓글

티스토리툴바