Skip to content

Naver OAuth2.0 연동하기

Jump to bottom
sunkyu_yoo edited this page Nov 29, 2020 · 4 revisions

Naver OAuth2.0 연동하기

  • 이 문서는 Next.js에 구현된 내용
  • 다음과 같이 여러 방법이 있지만 학습을 위해 API 문서를 따라 직접 구현
    • Naver에서 자체적으로 제공하는 sdk 사용
    • passport.js에도 passport-naver Strategy를 제공
    • API 문서를 따라가며 직접 구현
네이버 아이디로 로그인

Naver에서는 네이버아이디로로그인(네아로)라는 이름으로 OAuth2.0 api가 제공되고 있으며, 다음과 같이 API명세와 개발 가이드가 제공되고 있다. 이 문서에서는 가벼운 구현 flow만 기록되며, 자세한 내용은 참고하길 바란다.

전체적인 flow는 이전에 해봤던 GitHub OAuth와 유사하지만 정책상 조금 까다로운 면이 있다.


애플리케이션 등록

우선 Naver Developers 페이지에서 애플리케이션을 등록해야 한다.

애플리케이션을 등록한 후에는 ClientID와 Clinet Secret이 주어진다.

아래의 개발 상태는 현재에는 개발 중이지만 네이버에 검수를 통과한 후에는 변경된다. 네이버 정책상 검수되지 않은 애플리케이션의 경우 일부 등록된 계정만 로그인이 가능하며(최대 20개), 그 외에는 불가능하며, 그마저도 계정의 일부 데이터는 가려져서 나온다.

2

API 설정 탭에 가면 다음과 같이 나오는데, 서비스 URL에는 애플리케이션의 URL을 적어야 한다. 현재는 로컬에서 테스트 할 것이니 http://localhost:3000 으로 적어두고 나중에 배포 후 바꾸면 된다.

Callback URL의 경우 네이버 페이지에서 로그인을 성공적으로 마쳤을 때 돌아오는 주소이다.


Flow

전체적인 흐름은 다음과 같이 이루어진다.

  • 버튼 클릭
  • 네이버 로그인 페이지로 연결
  • 로그인 성공시 지정한 callbackURL로 redirect - 여기를 api 주소로 지정
  • callback에 해당하는 api에서 query로 돌아온 token 받음.
  • 이 token을 다시 access_token을 받는 api로 보냄.
  • access_token이 돌아옴. 이 access_token을 다시 profile받는 api로 보냄
  • profile 정보를 드디어 얻음.

구현

​ 버튼 삽입 및 url 설정

  • 먼저 테스트를 위해 테스트페이지에 로그인 버튼을 넣는다. img태그에 들어간 소스는 네이버에서 제공되는 버튼이다.
  • api_url에 query로 다음과 같은 요소들이 들어가야 한다.
    • client_id: 위에서 본 Client ID
    • redirect_url: 위에서 설정한 callbackURI를 encodeURI로 encode한 문자열
    • state: 사이트 간 요청 위조(cross-site request forgery) 공격을 방지하기 위해 애플리케이션에서 생성한 상태 토큰값으로 URL 인코딩을 적용한 값을 사용. 예측하기 어려운 문자열로 자유롭게 넣되, 유지만 하면 된다.
const api_url = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${clientID}&redirect_uri=${redirectURI}&state=${state}`;
<a href={api_url}><img height='50' src='http://static.nid.naver.com/oauth/small_g_in.PNG'/></a>

Callback api

  • 네이버로그인 성공 이후 설정해둔 callback url로 돌아온다. 여기에 해당하는 api 에서 다음을 처리하면 된다.

    • axios 등을 이용하여 다음 url로 access_token 요청

      • code: redirect되며 query로 함께온 token

      • state: 앞에서 정했던 state

      • const url = `https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=${clientID}&client_secret=${clientSecret}&code=${code}&state=${state}`

    • access_token을 받아 다음 url에 다음과 같이 요청

    • 이후 오는 응답에 다음처럼 profile정보 포함

      • {
  resultcode: '00',
  message: 'success',
  response: {
    id: '12345678',
    nickname: 'abc****',
    profile_image: 'profile_image_url',
    age: '20-29',
    gender: 'M',
    email: '*******@naver.com',
    name: '***',
    birthday: '01-01'
  }
}

K-Develop

Home

📒 Rules

📄 Plan

✍️ History

🛠 DevLog

Clone this wiki locally