[spring] Spring Security + JWT로 로그인 구현하기(2) - 구글 api로 로그인 기능 구현

Google API Console

 

구글 api를 사용하기 위해서 Google Api Console에서

Oauth 클라이언트 ID및 클라이언트 비밀번호를 생성해야 한다.

 

일단 구글 클라우드 플랫폼에 접속하여 로그인한다.

 

https://console.developers.google.com/

Google 클라우드 플랫폼

 

1. 먼저 상단의 프로젝트 선택을 클릭한다.

구글 클라우드 플랫폼

 

2. 프로젝트 선택 클릭 후 상단의 오른쪽에 새프로젝트를 클릭한다.

 

프로젝트 선택하는 화면

 

3. 프로젝트 정보를 입력한 후 만들기를 클릭한다.

 

새 프로젝트 만들기

4. API 및 서비스의 OAuth 동의화면을 클릭한다.

 

프로젝트 대시보드

5. 내 프로젝트에 대한 설정을 해준다.

* 제일 중요한 부분은 앱 도메인 부분이다.

 

OAuth 동의화면 설정

 

6. 사용자 인증정보를 추가해준다.

 

클라이언트ID 생성버튼 클릭

7.  애플리케이션 유형을 선택하고, URL 을 추가한 후에 만들기를 클릭한다.

로컬에서 테스트 할 경우, 승인된 자바스크립트 원본에 URI을 2개 추가해야 한다.

• http://localhost
• http://localhost:port

* 클라이언트ID와 클라이언트 시크릿키는 따로 복사해둔다.

 

클라이언트 ID 생성하기

 

---

구글 로그인 기능 구현

 

구글 자습서에 나와있는 로그인 기능 구현 방법 중

HTML 렌더링을 이용한 방법으로 로그인 기능을 구현한다.

 

 

HTML 

로그인 버튼을 추가할 영역에 해당 코드를 추가한다.

 

<div id="g_id_onload"
    data-client_id=""
    data-login_uri="">
</div>
<div class="g_id_signin"
    data-type="standard"
    data-size="large"
    data-theme="outline"
    data-text="sign_in_with"
    data-shape="rectangular"
    data-logo_alignment="left">

 

Controller

 

로그인이 완료되면, JWT 형태로 사용자 인증 정보가 넘어온다.

 

@ResponseBody
@PostMapping("/api/auth/google")
public String googleLogin(@RequestParam("credential") String credential, HttpServletResponse response) {
    String token = loginService.getGoogleToken(credential);

    Cookie cookie = new Cookie("jwtToken", token);
    cookie.setHttpOnly(true);
    cookie.setSecure(true);
    cookie.setMaxAge((int) TimeUnit.MINUTES.toSeconds(JWT_TOKEN_VALIDITY));
    cookie.setPath("/");
    response.addCookie(cookie);

    return "/auth/success";
}

 

해당 인증정보를 디코딩하여,

사용자 정보를 받아온 후 해당 정보를 바탕으로 jwt 토큰을 발급한다.

 

public String getGoogleToken(String credential){
    // JWT 디코딩
    String[] credentialParts = credential.split("\\.");
    String body = new String(Base64.getUrlDecoder().decode(credentialParts[1]));

    String jwtToken = "";

    ObjectMapper objectMapper = new ObjectMapper();
    try {
        Map<String, Object> map = objectMapper.readValue(body, new TypeReference<Map<String, Object>>(){});
        String id = map.get("email").toString();
        String userName = map.get("name").toString();

        log.info(id);
        log.info(userName);

        //전달받은 사용자 정보를 기반으로 Token 생성
        jwtToken = jwtTokenProvider.generateToken(id, userName);
    } catch (Exception e) {
        e.printStackTrace();
    }

    return jwtToken;
}

 

이제 jwt 토큰을 클라이언트로 넘겨준 후,

쿠키에 저장 또는 로컬스토리지에 저장하여 HTTP 요청헤더에 담아 요청한다.

 

헤더에 담아 요청한 후에는 jwt filter에서 해당 토큰을 검증하여 유효하면 인증된 사용자로 본다.

 

 

 

https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid?hl=ko 

설정  |  Authentication  |  Google Developers