[express] 네이버 로그인을 통해 회원 정보 받아오기

공식 문서를 참고하여 만들어진 글입니다.

주의

1. 나는 코드를 request-promise 모듈을 사용해서 짰지만, axios로 대체하는 방법을 더 추천 하는 글도 봤었다. 각자 잘 찾아본 후 자신에게 맞는 모듈을 사용하면 될 것 같다.
   • request 대신 request-promise를 사용한 이유는 비동기 통신을 하기 위해!
2. 네이버 API를 사용하려면 애플리케이션 등록 시 발급 받은 Client ID와 Client Secret 값이 필요하다. 발급 받는 방법의 자세한 안내는 공식 문서를 확인하길 바란다.

로그인 구현 순서

1. 네이버로 로그인 링크 클릭 시 로그인 화면으로 연결
2. 미리 등록해둔 callback URL로 라우터를 등록해 요청을 받는다
3. 2번 라우터 안에서 모든 것(회원 가입, JWT 발급)을 진행한다.

이건 어디까지나 내가 선택한 방법이고, 더 좋은 방법은 얼마든지 있을 것이다.

로그인 구현

1. 네이버 로그인 클릭 시 로그인 화면으로 연결

const naver_api_url = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${Naver.client_id}&redirect_uri=${Naver.redirectURI}&state=${Naver.state}`;

다음과 같이 네이버 로그인 클릭 링크를 구성했다.

1. https://nid.naver.com/oauth2.0/authorize 링크를 base url로 잡는다.
2. response_type=code&client_id=${Naver.client_id}&redirect_uri=${Naver.redirectURI}&state=${Naver.state}로 적절한 query string 값을 보내준다.
   • 네이버에서 발급 받은 값을 확인하여 넣으면 된다.

2. 미리 등록해둔 callback URL로 라우터를 등록해 요청을 받는다

• 콜백 등록은 내 애플리케이션 > (원하는 앱) > API 설정 > 로그인 오픈 API 서비스 환경 > 네이버 로그인 Callack URL에서 등록할 수 있다.

app.get('/naver/callback', async (req, res) => {
	// code
});

3. 2번 라우터 안에서 모든 것을 진행한다.

const request = require('request-promise');

app.get('/naver/callback', async (req, res) => {
  	// 토큰을 발급받으려면 query string으로 넘겨야 할 정보들이다.
    const code = req.query.code;
    const state = req.query.state;

  	// 로그인 API를 사용해 access token을 발급받는다.
    const naver_api_url = `https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&response_type=code&client_id=${Naver.client_id}&client_secret=${Naver.client_secret}&redirect_uri=${Naver.redirectURI}&code=${code}&state=${state}`;
    const options = {
        url: naver_api_url,
        headers: {
          'X-Naver-Client-Id': Naver.client_id, 
          'X-Naver-Client-Secret': Naver.client_secret
        }
    }
    const result = await request.get(options);
  	// string 형태로 값이 담기니 JSON 형식으로 parse를 해줘야 한다.
    const token = JSON.parse(result).access_token;
  
    // 발급 받은 access token을 사용해 회원 정보 조회 API를 사용한다.
    const info_options = {
        url: 'https://openapi.naver.com/v1/nid/me',
        headers: {'Authorization': 'Bearer ' + token}
    };

    const info_result = await request.get(info_options);
  	// string 형태로 값이 담기니 JSON 형식으로 parse를 해줘야 한다.
    const info_result_json = JSON.parse(info_result).response;
  
  	// 이후 얻게 된 정보들로 원하는 코드를 작성하면 된다.
  	// Ex) 회원 가입 시키기, 내 app용 jwt 발급하기
})

네이버 로그인 API를 사용한 회원 정보 조회 완성이다!

---

이후 어떤 코드를 작성해 정보를 어떻게 활용할지는 사용자의 몫이다.
나는 얻은 정보에서 고유 ID를 통해 첫 로그인 시에는 회원 가입을 시키고, 이후 로그인 시에는 고유 ID를 담은 JWT를 발급하도록 코드를 작성하였다.