네이버 로그인 Web 구현 방법

HelloSesang·2023년 3월 28일
0

1. 애플리케이션 등록

  • Naver Developers > 상단 메뉴 > Application > 애플리케이션 등록에서 애플리케이션을 생성한다.

2. 네이버 간편 로그인 절차

1) 상태 토큰 생성

  • 네이버 로그인 API 호출 시 요구되는 파라미터로 넣을 토큰을 생성해야한다.
    이 토큰은 CSRF 공격을 방지하기 위해 필요한 토큰으로 추후 인증 과정의 결과값으로 전달되는 세션 토큰과 일치하는지 확인해서 정상적인 요청인지 검증하는 용도로 사용된다.

  • CSRF 공격 방어법 중 난수값 검증 방법을 사용한 것이다.

  • 상태 토큰은 네이버 로그인을 진행하는 동안 유지되어야하며 고유한 값이여야만 한다.

  • 아래는 CSRF 방지를 위한 상태 토큰 생성 예시 코드이다.

    // 상태 토큰은 추후 검증을 위해 세션에 저장되어야 한다. 
    public String generateState() { 
        SecureRandom random = new SecureRandom(); 
        return new BigInteger(130, random).toString(32); 
    }
    // 상태 토큰으로 사용할 랜덤 문자열 생성
    String state = generateState();
    
    // 세션 또는 별도의 저장 공간에 상태 토큰을 저장
    request.session().attribute("state", state);
    return state;

2) 네이버 로그인 페이지 호출

  • Request Parameters
    • client_id: 애플리케이션 등록 후 발급되는 클라이언트 아이디
    • response_type: code로 고정
    • redirect_uri: 애플리케이션 등록시 설정한 Callback URL로 네이버 로그인 인증 결과를 전달받게 된다.
    • state: 1번 과정을 통해서 애플리케이션이 생성한 상태 토큰
    https://nid.naver.com/oauth2.0/authorize
    ?client_id={클라이언트 아이디}
    &response_type=code
    &redirect_uri={개발자 센터에 등록한 콜백 URL(URL 인코딩)}
    &state={상태 토큰}

3) 네이버 로그인

  • 사용자가 로그인 페이지에서 ID,PW를 입력하고 로그인을 한다.

4) 기본 정보 제공 동의

  • 사용자가 서비스를 이용하기 위한 정보 제공에 동의를 한다.

5) 인증 코드 받기

  • 인증이 완료되면 아래와 같은 형태의 콜백 URL로 이동된다.
    	```
    	{개발자 센터에 등록한 콜백 URL}?state={상태 토큰}&code={인증 코드}
    	```
  • 콜백 URL에서 획득할 수 있는 정보는 아래와 같다.
    • state: 콜백으로 전달받은 상태 토큰으로 애플리케이션이 생성한 상태 토큰과 비교를 통해서 정상적인 요청인지 검증해야한다.
    • code: access token 발급에 필요한 인증 코드이다.

6) 상태 토큰 검증

  • 콜백으로 전달받은 상태 토큰과 애플리케이션이 생성한 상태 토큰이 일치하는지 검증한다.

7) Access Token 요청

  • Access Token 발급 API를 호출해서 네이버 API 호출에 필요한 Access Token을 획득한다.
  • Request
    • client_id: 애플리케이션 등록 후 발급받은 클라이언트 아이디
    • client_secret: 애플리케이션 등록 후 발급받은 클라이언트 시크릿
    • grant_type: authorization_code로 고정
    • state: 애플리케이션이 생성한 상태 코드
    • code: 콜백으로 전달받은 인증 코드
    https://nid.naver.com/oauth2.0/token
    ?client_id={클라이언트 아이디}
    &client_secret={클라이언트 시크릿}
    &grant_type=authorization_code
    &state={상태 토큰}
    &code={인증 코드}`
  • Response
    { 
        "access_token": "AAAAQosjWDJieBiQZc3to9YQp6HDLvrmyKC+6+iZ3gq7qrkqf50ljZC+Lgoqrg", 
        "refresh_token": "c8ceMEJisO4Se7uGisHoX0f5JEii7JnipglQipkOn5Zp3tyP7dHQoP0zNKHUq2gY",
        "token_type": "bearer", 
        "expires_in": "3600" 
    }

8) 사용자 프로필 조회

  • 아래 요청을 통해서 사용자 프로필을 조회할 수 있다.
  • Request
    • accessToken: 전 단계 진행하면서 얻은 AccessToken 값이다.
    https://openapi.naver.com/v1/nid/me 
    Authorization: Bearer {accessToken]
  • Response
    { 
        "resultcode": "00", 
        "message": "success", 
        "response": { 
            "email": "openapi@naver.com", 
            "nickname": "OpenAPI", 
            "profile_image": "https://ssl.pstatic.net/static/pwe/address/nodata_33x33.gif", 
            "age": "40-49", 
            "gender": "F", 
            "id": "32742776", 
            "name": "오픈 API", 
            "birthday": 
            "10-01" 
        } 
    }

9) 회원가입 절차 진행

- 서비스 자체 구현

10) JWT 토큰 반환

- 인증용 JWT토큰 반환

11) 회원 탈퇴

- 카카오와 달리 서비스 연결 끊기 API는 존재하지 않으므로 그냥 탈퇴 처리를 진행하면 된다.
profile
개인 기록용 블로그입니다. 잘못된 정보가 있거나 내용 이해가 어려운 경우 댓글로 알려주시면 감사하겠습니다 :)

0개의 댓글