🌈 [Section4] 6. [Spring Security] OAuth2 2

📕 오늘 배운 내용!

• Frontend와 Backend 간의 OAuth 2 인증 처리 흐름
• Hello, OAuth 2 샘플 애플리케이션 구현 순서 ( SSR 방식 )
• OAuth 2 + JWT 를 이용한 샘플 애플리케이션 구현 ( CSR 방식 )

---

✏️ Frontend와 Backend 간의 OAuth 2 인증 처리 흐름

① Resource Owner
👉 웹 브라우저에서 [Google 로그인 링크] 클릭

② frontend 애플리케이션 ➜ Backend 애플리케이션 (OAuth Client)
👉 http://localhost:8080/oauth2/authorization/google로 request 전송
( 이 URI의 requet는 OAuth2LoginAuthenticationFilter가 처리 )

③ Backend 애플리케이션 (OAuth Client) ➜ frontend 애플리케이션
👉 Google의 로그인 화면을 요청하는 URI로 리다이렉트

👉 이 때, (처리 마지막 단계에서) Authorization Server가 Backend 애플리케이션 쪽으로 Authorization Code를 전송할 (Spring Security가 내부적으로 제공하는) Redirect URI(http://localhost:8080/login/oauth2/code/google)를 쿼리 파라미터로 함께 전달

④ Resource Owner
👉 Google 로그인 화면을 오픈 후, 인증 정보 입력하여 로그인

--------------------------------- ( 로그인 성공 ) ---------------------------------

⑤ frontend 애플리케이션 ➜ Authorization Server
👉 ③에서 함께 전달한 Backend Redirect URI(http://localhost:8080/login/oauth2/code/google)로 Authorization Code 요청

⑥ Authorization Server ➜ Backend 애플리케이션 (OAuth Client)
👉 Authorization Code를 응답으로 전송

⑦ Backend 애플리케이션 (OAuth Client) ➜ Authorization Server
👉 Access Token 요청

❗ 여기서의 Access Token
➜ Google Resource Server에게 Resource를 요청하는 용도
( OAuth2 사용하게 해주는 Access Token )

⑧ Backend 애플리케이션 (OAuth Client) ➜ Resource Server
👉 User Info 요청
( User Info - Resource Owner에 대한 이메일 주소, 프로필 정보 등 )

⑨ Resource Server ➜ Backend 애플리케이션 (OAuth Client)
👉 User Info 응답으로 전송

⑩ Backend 애플리케이션 (OAuth Client)
👉 JWT로 구성된 Access Token / Refresh Token 생성 후,
Frondend 애플리케이션에게 JWT(Access Token과 Refresh Token) 전달하기 위해
Frondend 애플리케이션(http://localhost?access_token={jwt-access-token}&refresh_token={jwt-refresh-token})으로 Redirect

❗ 여기서의 Access Token
➜ 우리 애플리케이션 인증하는 Access Token

---

😜 실습

• projects - be-template-spring-security-oauth2-basic

---

✔ Hello, OAuth 2 샘플 애플리케이션 구현 순서 ( SSR 방식 )

❗ Google 의 OAuth 2 인증 시스템을 이용해 사용자의 인증을 처리한 후, 보호된 HTML 페이지를 제공하는 SSR(Server Side Rendering) 방식의 애플리케이션

❗ OAuth 2의 클라이언트 ID / 클라이언트 Secret은 Google Cloud에서 발급 받음
( 유어클래스 - Section4 - OAuth2 인증 - OAuth2 인증을 위한 사전 작업 참고 )

1. build.gradle에 의존성 추가

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // (1)
implementation 'org.springframework.boot:spring-boot-starter-security' // (2)
implementation 'org.springframework.boot:spring-boot-starter-oauth2-client' // (3)

  ① HTML 화면을 구성하기 위한 템플릿인 타임리프(Thymeleaf) 추가
  ( 프로젝트에서는 굳이 필요하지 않을 수 있음 )
⠀
  ② Hello OAuth 2 애플리케이션은 Spring Security 기반의 애플리케이션이므로 추가
⠀
  ③ Hello OAuth 2 애플리케이션은 구글의 OAuth 2 시스템을 이용하는 OAuth 2 클라이언트이므로 클라이언트로써의 역할을 하기 위해 추가

2. src/main/resources/templates 경로에 hello-oauth2.html 파일 추가

3. HelloHomeControllerV1 클래스 추가
( hello-oauth2 화면에 대한 뷰를 리턴 )

4. OAuth 2 인증을 위한 SecurityConfiguration 설정 

    4-1. SecurityConfigurationV1 클래스 추가
    ( Spring Boot 의 자동 구성 이용 )

🔊 이 상태로 애플리케이션을 돌리면 에러 발생 !
( 대충 'ClientRegistrationRepository 라는 Bean 이 없으니 SecurityConfiguration 에 추가하라' 라는 에러 )
⠀
➜ 우리가 이용해야 할 OAuth 2 시스템에 대한 client ID / client Secret 을 설정하지 않았기 때문에 발생하는 에러임
⠀
➜ 에러 해결을 위해 구글 OAuth 2 시스템을 이용하기 위해 OAuth Client ID를 생성했던 것을 추가할 것임
( 유어클래스의 'Section4 - OAuth2 인증 - OAuth2 인증을 위한 사전 작업' 에서 확인 가능 )

5. OAuth 2 클라이언트 등록 정보 추가

    5-1. application.yml 파일에 우리가 생성한 구글 OAuth 2 클라이언트 정보 추가

🔊 여기까지 한 후, localhost:8080 으로 접속하면 google 로그인 페이지가 나올 것 !

 

6. Configuration 을 통한 OAuth 2 인증 설정
[ClientRegistration 참고]
[CommonOAuth2Provider 참고 1] / [CommonOAuth2Provider 참고 2]

    6-1. SecurityConfigurationV2 클래스 추가
    ( client Id/Secret 을 이용한 OAuth 2 인증 설정 )

🔊 여기까지 한 후, localhost:8080/hello-oauth2으로 접속하면 구글의 로그인 화면이 뜨고
로그인 인증에 성공하면 Hello OAuth 2 애플리케이션의 home 화면이 정상적으로 보일 것 !
⠀
⚠️ localhost:8080/hello-oauth2에 접속하여 Google 로그인할 때,
한 번 Google 로그인으로 연동을 해놓으면 이후로는 연동이 끊어지지 않아 서버를 닫고 다시 열어도 바로 로그인 이후 화면이 나타나는 경우가 발생함
➜ Google 화면 우측 점9개 있는 거 - Google 계정 - 보안 - Google 계정을 통한 로그인 에 들어가서 해당 페이지의 액세스 권한을 삭제한 후,
다시 접속하면 Google 로그인화면 뜸 !!

7. 인증된 Authentication 정보 확인

    7-1. SecurityContext 를 이용하는 방법
    ➜ HelloHomeControllerV2 클래스 추가

    7-2. Authentication 객체를 핸들러 메서드 파라미터로 전달 받는 방법
    ➜ HelloHomeControllerV3 클래스 추가

    7-3. OAuth2User 를 파라미터로 전달 받는 방법
    ➜ HelloHomeControllerV4 클래스 추가

8. Authorization Server 로부터 전달 받은 Access Token 확인
[OAuth2AuthorizedClient 참고 1], [OAuth2AuthorizedClient 참고 2]

    8-1. OAuth2AuthorizedClientService 를 DI 받는 방법
    ➜ HelloHomeControllerV5 클래스 추가

    8-2. OAuth2AuthorizedClient 를 핸들러 메서드의 파라미터로 전달 받는 방법
    ➜ HelloHomeControllerV6 클래스 추가

❗ 8-1 / 8-2 위 두가지 방법 중 아무거나 써도 상관 없지만,
하나 이상의 핸들러 메서드에서 OAuth2AuthorizedClient를 사용해야 된다면 OAuth2AuthorizedClientService 를 DI 받아서 사용하는 것이 바람직해 보임

---

✔ OAuth 2 + JWT 를 이용한 샘플 애플리케이션 구현 ( CSR 방식 )

❗ CSR(Client Side Rendering) 방식의 애플리케이션에 OAuth 2 인증 시스템을 통해 인증에 성공한 사용자에 대한 자격 증명 정보를 JWT 로 제공

❗ 이 학습은 Apache를 사용해 브라우저에서 확인을 해봤으니 자세한 건 유어클래스-OAuth2인증-OAuth 2 + JWT 를 이용한 샘플 애플리케이션 구현에서 확인하기 !
( 내 윈도우에서 Apache 파일은 c:\httpd-2.4.54-win64-VS17\Apache24에 있음 )
[ Apache 참고 1 ]

[OAuth2ClientAuthenticationProcessingFilter 참고]

1. build.gradle에 jwt 사용을 위한 의존성 추가

implementation 'io.jsonwebtoken:jjwt-api:0.11.5'
runtimeOnly 'io.jsonwebtoken:jjwt-impl:0.11.5'
runtimeOnly    'io.jsonwebtoken:jjwt-jackson:0.11.5'

2. JwtTokenizer 클래스 추가
( 원래 JWT 실습 코드의 JwtTokenizer 클래스와 동일 )

3. application.yml 에 JWT 설정 추가
➜ JWT 와 OAuth2 설정이 합쳐진 모습

4. JwtVerificationFilter 클래스 추가
( 원래 JWT 실습 코드의 JwtVerificationFilter 클래스와 동일 )

5. CustomAuthorityUtils 클래스 추가
( 원래 JWT 실습 코드의 CustomAuthorityUtils 클래스와 동일 )

6. OAuth2MemberSuccessHandler 클래스 추가
( OAuth2 인증이 성공적으로 수행되면 호출되는 핸들러 )
➜ OAuth 2 인증 후, Frontend 애플리케이션 쪽으로 JWT 전송하는 핵심 역할 담당

7. SecurityConfigurationV1 or SecurityConfigurationV2 / MemberAccessDeniedHandler / MemberAuthenticationEntryPoint / ErrorResponder 클래스 추가
( 모두 JWT 부분에서 학습했던 내용 ! / 코드, 설명 모두 같으니 JWT 프로젝트 참고 )

8. MemberController, MemberDto, MemberService, MemberMapper, Member 클래스 코드 수정
➜ OAuth 2 인증 시스템을 사용하기 때문에 회원 정보를 등록하거나 수정할 필요가 없어서 코드 수정 / 일부 삭제 함

[OAuth2 소셜 로그인 가이드 참고]
[네이버 로그인 연동 참고]
[카카오 로그인 연동 참고 1]
[카카오 로그인 연동 참고 2]

---

🌈 느낀점

그래도 jwt 학습을 하고 나니 조금 더 수월하긴 했다 !!
하지만 아직 jwt도 어려워서 더 공부해야겠다.
다음에 시간 날 때 OAuth2 말고 네이버랑 카카오 꺼도 해봐야지

 

( 본 게시물은 2022/11/29에 작성한 글을 옮긴 글입니다. 원문은 요기에 있음! )

728x90