🍪 OAuth 2.0, Http-Only Cookie 활용 자동 로그인 - 1

동아리를 통해 진행하였던 웹뷰 형태의 앱 서비스 프로젝트에서 OAuth 2.0 활용한 자동 로그인을 구현하였다. 카카오와 애플 모두 REST 방식으로 구현한 뒤, 서비스 자체 JWT 토큰을 통해 유저 인증 로직을 구현하였고 이 과정에서 Cookie를 활용해 자동 로그인이 가능하도록 하였다.

각 IdP의 developers 페이지에서 설정하는 방법은 다른 블로그에도 자세히 잘 작성되어있기 때문에 생략하고자 한다. 소개하고자 하는 프로젝트에서는 카카오 로그인과 애플 로그인만 사용하였지만, 추가로 카카오 로그인과 매우 유사한 네이버 로그인까지 소개하려고 한다.

---

카카오 로그인

1. 카카오 서버-프론트의 인가코드 통신

프론트에서 사용자가 로그인 시 카카오 서버에게 인가코드를 요청한다. 카카오 서버는 인가코드를 redirect_uri로 반환해주고, 그 형태는 다음과 같다. 아래는 마음대로 작성한 예시 코드다.

"~~/callback?code=kSc9f-ZZ0asdfgafjai4t-D05Tl9zYgas-dfQasdfas3-diw"

이 코드를 백엔드로 넘겨주면 된다.

2. 카카오 서버-백의 유저 정보 통신

두 번의 요청이 오고 간다.

"https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id="
                + KAKAO_KEY + "&redirect_uri=" + KAKAO_URI + "&code="
                + kakaoRequest.getCode()

먼저 프론트로부터 넘겨 받은 인가 코드를 위의 주소에 POST 요청하여 인가코드의 유효성을 확인 받고, 그 대가로 카카오 서버의 Access Token과 Refresh Token을 돌려 받는다. 이 토큰들은 프론트로 넘겨져서는 안되는 중요한 정보다. 여러번 실험해본 결과 만료기간이 굉장히 긴 듯 보였고, 다음 요청에는 프로젝트 고유의 비밀 키 등이 요구되지 않기 때문이다.

"https://kapi.kakao.com/v2/user/me"

두 번째로 위에서 받은 카카오 서버의 Access Token과 Refresh Token과 함께 해당 주소에 POST 요청을 날려야 한다.

이 때, 카카오로부터 아래와 같은 형태의 유저 정보를 받게 된다.

{
    "authenticationCode": "",
    "connectedAt": "",
    "kakaoAccount": {
          "profile": {
				"nickname": ""
          }
    }
}

위의 리스폰스에서 authenticationCode가 unique하므로 유저를 식별하는 용도로 사용할 수 있다.

---

네이버 로그인

카카오 로그인과 매우 유사하다.

1. 네이버 서버-프론트의 인가코드 통신

마찬가지로 프론트에서 사용자가 로그인함에 따라 네이버 서버에서 돌려 받은 인가코드와 state라는 프로젝트에서 지정한 String 값을 함께 백엔드로 넘겨주면 된다.

2. 카카오 서버-백의 유저 정보 통신

두 번의 요청 중 첫 요청의 주소는 아래와 같으며 마찬가지로 POST 요청한다.

"https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id="
                + NAVER_KEY + "&client_secret=" + NAVER_SECRET + "&redirect_uri=" + NAVER_URI
                + "&code=" + naverRequest.getCode() + "&state=" + naverRequest.getState()

마찬가지로 네이버 서버의 Access Token과 Refresh Token을 돌려 받고, 이를 프론트에 전달하지 않고 두 번째 요청에 사용한다.

"https://openapi.naver.com/v1/nid/me"

위 주소에 두 번째 POST 요청을 날려 아래와 같은 형태의 유저 정보를 받는다.

이 때, 카카오로부터 아래와 같은 형태의 유저 정보를 받게 된다.

{
    "resultCode": "",
    "message": "",
    "response": {
          "authenticationCode": "",
          "nickname": "",
          "imageUrl": ""
    }
}

위의 리스폰스에서 response의 authenticationCode가 unique하므로 유저를 식별하는 용도로 사용할 수 있다.

---

애플 로그인

애플 로그인의 경우 위의 두 방식과 조금 더 길고 복잡하다.

1. 애플 서버-백의 유저 정보 통신

로그인 시 백엔드의 Post API로 바로 redirect 시킨다. 아래와 같이 MultiValueMap을 통해 데이터를 받을 수 있다.

  	@ApiOperation(value = "애플 로그인")
    @PostMapping(value = "/login", produces = "application/json; charset=utf-8", consumes = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
    @ResponseBody
    public void postAppleLogin(@RequestBody MultiValueMap<String, String> formData, HttpServletResponse response){
        ...
    }

설정에 따라 돌려 받을 수 있는 정보가 상이한데, 기본적으로 받게 되는 정보는 아래와 같다. 이중 id_token으로 유효성 검증을 해야한다.

{
	"state": "",
    "code": "",
    "id_token": "",
    "user": "{}"
}

2. IdentityToken 유효성 검증

"https://appleid.apple.com/auth/keys"

위 주소에 GET 요청을 통해 공개 키를 받아 온다. 개발하던 당시에는 세 개의 키를 제공하였는데, 그 중 위에서 받은 id_token과 HEADER의 kid와 alg 영역의 값이 일치하는 키를 찾는다. 해당 기능의 코드는 아래와 같다.

    public AppleSubjectDTO verifyIdentityToken(AppleRequest appleRequest,
        AppleKeyListDTO appleKeyListDTO) {
        PublicKey publicKey = null;
        try {
       		// String을 JWT 형태로 매핑하고 유효 시간을 검증한다.
            SignedJWT signedJWT = SignedJWT.parse(appleRequest.getIdToken());
            JWTClaimsSet payload = signedJWT.getJWTClaimsSet();

            Date currentTime = new Date(System.currentTimeMillis());
            if (!currentTime.before(payload.getExpirationTime())) {
                throw new BadRequestException(ErrorCode.APPLE_TOKEN_EXPIRED.getErrorCode());
            }

			// . 기준으로 IdToken String의 HEADER 부분만 가져온다.
            String headerOfIdentityToken = appleRequest.getIdToken()
                .substring(0, appleRequest.getIdToken().indexOf("."));

			// 복호화 한 뒤 kid와 alg로 일치하는 key를 찾는다.
            AppleHeaderDTO appleHeaderDTO = new ObjectMapper().readValue(
                new String(Base64.getDecoder().decode(headerOfIdentityToken), "UTF-8"),
                AppleHeaderDTO.class);
            AppleKeyDTO appleKeyDTO = appleKeyListDTO.getMatchedKeyBy(
                    appleHeaderDTO.getKid(),
                    appleHeaderDTO.getAlg())
                .orElseThrow(
                    () -> new BadRequestException(ErrorCode.APPLE_KEY_UNAVAILABLE.getErrorCode()));
			
            // 구한 값으로 새로운 RSA 공개 키를 만든다.
            byte[] nBytes = Base64.getUrlDecoder().decode(appleKeyDTO.getN());
            byte[] eBytes = Base64.getUrlDecoder().decode(appleKeyDTO.getE());

            BigInteger n = new BigInteger(1, nBytes);
            BigInteger e = new BigInteger(1, eBytes);

            RSAPublicKeySpec publicKeySpec = new RSAPublicKeySpec(n, e);
            KeyFactory keyFactory = KeyFactory.getInstance(appleKeyDTO.getKty());
            publicKey = keyFactory.generatePublic(publicKeySpec);

        } catch (ParseException e) {
            e.printStackTrace();
        } catch (NoSuchAlgorithmException ex) {
            ex.printStackTrace();
        } catch (InvalidKeySpecException ex) {
            ex.printStackTrace();
        } catch (JsonMappingException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        }
        
        // 다시 복호화하여 얻은 Subject를 반환한다.
        Claims claims = Jwts.parser().setSigningKey(publicKey)
            .parseClaimsJws(appleRequest.getIdToken())
            .getBody();
        if (!claims.get("nonce").equals(APPLE_NONCE)) {
            throw new BadRequestException(ErrorCode.APPLE_NONCE_INCORRECT.getErrorCode());
        }
        return new AppleSubjectDTO(claims.getSubject());
    }

마지막에 얻은 Subject는 다음과 같은 AppleSubjectDTO에 감싸주었으며, 이 String 값이 유저 식별 용도로 사용할 수 있는 authenticationCode에 해당한다.

public class AppleSubjectDTO {

    private String authenticationCode;

}

여기까지만 진행해도 로그인 자체는 구현할 수 있지만, 앱 출시를 위해서는 일련의 과정이 더 필요하다. 2022년부터 앱스토어 출시를 위해서는 사용자가 서비스 탈퇴할 때 DB에서만 삭제할 것이 아니라 애플에도 해당 계정이 탈퇴하는 로직을 구현해야 한다.

"https://appleid.apple.com/auth/token?client_id=" + APPLE_CLIENT_ID + "&client_secret="
                + APPLE_SECRET + "&grant_type=authorization_code&code=" + appleRequest.getCode()
                + "&redirect_uri=" + APPLE_URI + option

Client Secret을 만들고 위의 주소에 POST 요청을 날리면 애플 고유의 Access Token과 Refresh Token을 제공한다. 해당 과정이 복잡하기 때문에 다른 글에서 탈퇴에 대해 따로 다루어 보려고 한다. 아무쪼록 이 때 얻은 Refresh Token과 Client Secret을 활용해 "https://appleid.apple.com/auth/revoke"에 POST 요청하여 탈퇴할 수 있다.

---

OAuth 2.0 로그인 후 자체 서비스 JWT Token을 활용한 자동 로그인 구현은 다음 포스트에 작성하려고 한다.