[Node.js] Naver Oauth로 로그인 구현해보기

네이버 로그인 OAuth 신청

이 링크에서 로그인 API를 신청할 수 있습니다!

https://developers.naver.com/docs/login/api/api.md

네이버 로그인 API 명세 - LOGIN

애플리케이션 등록을 누릅니다.

가져오고 싶은 제공 정보를 선택합니다.

로컬에서 작업하 때문에 개발 환경에 맞춰서 localhost:포트번호를 입력한 후 callback URL을 작성한 후 등록하기 버튼을 누릅니다!
 
index.ts

import express, { Request, Response } from 'express';
import request from 'request';
import dotenv from 'dotenv';

// .env 파일의 환경 변수
dotenv.config();

const app = express();
const client_id = process.env.CLIENT_ID as string; // .env 파일에서 가져온 Client ID
const client_secret = process.env.CLIENT_SECRET as string; // .env 파일에서 가져온 Client Secret
const state = "1015"; // random 문자열 
const redirectURI = encodeURI("http://localhost:3000/auth/naver/callback");
let api_url = "";

// 네이버 로그인 페이지로 리다이렉트
app.get('/naverlogin', (req: Request, res: Response) => {
  api_url = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${client_id}&redirect_uri=${redirectURI}&state=${state}`;
  res.writeHead(200, {'Content-Type': 'text/html;charset=utf-8'});
  res.end(`<a href="${api_url}"><img height="50" src="http://static.nid.naver.com/oauth/small_g_in.PNG"/></a>`);
});

// 네이버 로그인 콜백 처리
app.get('/auth/naver/callback', (req: Request, res: Response) => {
  const code = req.query.code as string;
  const state = req.query.state as string;
  
  // Access token 요청
  api_url = `https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=${client_id}&client_secret=${client_secret}&redirect_uri=${redirectURI}&code=${code}&state=${state}`;
  
  const options = {
    url: api_url,
    headers: {
      'X-Naver-Client-Id': client_id,
      'X-Naver-Client-Secret': client_secret
    }
  };
  
  // 토큰 요청
  request.get(options, (error, response, body) => {
    if (!error && response.statusCode === 200) {
      res.writeHead(200, {'Content-Type': 'application/json;charset=utf-8'});
      res.end(body);
    } else {
      console.error('Error:', error);
      console.error('Response:', response && response.statusCode);
      res.status(response?.statusCode || 500).end('Error occurred during authentication');
    }
  });
});

app.listen(3000, () => {
  console.log('서버 실행 성공!');
});

서버를 실행시켜봅니다!

http://localhost:3000/naverlogin을 입력해서 들어가면 네이버 로그인 버튼이 뜹니다

버튼을 눌러보면 네이버 로그인 창이 뜹니다!

값이 잘 들어오는 것을 확인 할 수 있습니다!
 

네이버 OAuth 응답 필드 분석

 
네이버 OAuth 인증에서 받은 JSON 응답에서 다음과 같은 필드들은 액세스 토큰과 관련된 정보입니다.
각각의 필드는 다음과 같은 의미를 가집니다.
 

1. access_token

• 설명: 사용자가 로그인 후 인증된 요청을 수행할 수 있도록 제공되는 토큰입니다.
• 용도: 이 토큰을 사용하여 API에 접근하거나 사용자 정보를 요청할 수 있습니다. Authorization 헤더에 Bearer <access_token> 형식으로 포함시켜야 합니다.

2. refresh_token

• 설명: access_token이 만료된 후 새로운 액세스 토큰을 발급받기 위해 사용하는 토큰입니다.
• 용도: access_token이 만료되면, refresh_token을 사용하여 새로 액세스 토큰을 요청할 수 있습니다. 이 토큰을 안전하게 저장하고 필요할 때마다 사용해야 합니다.

3. token_type

• 설명: 토큰의 유형을 나타냅니다. 일반적으로 "bearer"라는 값이 반환됩니다.
• 용도: "bearer" 토큰 유형은 API 요청 시 Authorization 헤더에 Bearer <access_token> 형태로 포함시켜야 함을 의미합니다.

4. expires_in

• 설명: 액세스 토큰이 만료되기까지의 시간을 초 단위로 나타냅니다.
• 용도: 이 값은 액세스 토큰의 유효 기간을 알려줍니다. 예를 들어, 3600이면 1시간 후에 만료됨을 의미합니다. 이 시간을 기준으로 액세스 토큰을 갱신하거나, 만료 전에 자동으로 갱신 작업을 설정할 수 있습니다.

JSON 예시

{
  "access_token": "example_access_token",
  "refresh_token": "example_refresh_token",
  "token_type": "bearer",
  "expires_in": 3600
}

 
이 JSON 응답을 기반으로, API 요청 시 access_token을 사용하여 인증을 처리하고, 만료되기 전에 refresh_token을 사용하여 새로운 access_token을 발급받아야 합니다!
 
TypeScript를 사용하여 네이버 로그인 기능을 간단하게 구현해보았습니다!
 
참고!

네이버 인증 프로필 모델 정보

key	value	optional	description
provider	String	X	naver 고정값
id	String	X	사용자의 naver id
nickname	String	O	사용자의 닉네임
profileImage	String	O	사용자의 프로필 이미지
age	String	O	사용자의 나이 (ex, '28-29')
gender	String	O	사용자의 성별 (ex, 'F' 또는 'M')
email	String	O	사용자의 이메일
mobile	String	O	사용자의 전화번호
mobileE164	String	O	사용자의 전화번호 (국가번호 포함)
name	String	O	사용자의 이름
birthday	String	O	사용자의 생년월일
birthYear	String	O	사용자의 생년
_raw	String	O	프로필 조회로 얻어진 json string
_json	Object	O	프로필 조회로 얻어진 json 원본 데이터