[Security] OAuth2.0을 이용한 소셜 로그인 (구글)

OAuth란?

OAuth는 Open Authorization의 약자로, 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준 프로토콜입니다.

자체 서버가 아닌 OAuth 인증 공급자를 사용 ( 구글, 카카오, 네이버 등 )
접근 권한(인가)을 증명하는 액세스 토큰을 발급해줍니다.
- 이 액세스 토큰 값으로 접근 권한을 검사합니다.
소셜 로그인에 사용

OAuth 2.0 구성요소

Resource Owner : 액세스할 USER
Authorization Server : USER에게 Token을 발급해주는 공급자
Authorization Code : Access Token을 얻기 위한 자격 증명
Access Token : 보호된 자원에 접근하기 위한 자격 증명서
Scpoe : 토큰의 권한을 지정

OAuth 동작 과정

OAuth 인증 방식은 인증의 과정을 '다른 서비스에게 위임'하는 인증 방식입니다.

구글이 해주는 일은 웹 사이트 사용자가 구글 로그인 기능을 통해 구글에게 전송한 구글 계정 정보가 유효한지 확인한 후,

유효하다면 해당하는 구글 유저 정보 중 일부(이름, 주소, 아이디 등)를 내 웹사이트에 제공해주는 '인증' 과정만을 처리합니다.

주체는 크게 세 가지로 나눌 수 있습니다.

1. Resource Owner (USER) : 리소스 소유자로, 우리의 서비스를 이용하면서, 구글 페이스 북 등의 플랫폼에서 리소스를 소유하고 있는 사용자.

2. Client : Resource Server의 자원을 이용하고자 하는 서비스, 즉 우리가 개발한 서비스라고 보면 됩니다.

3. Authorization & Resource Server : Resource Owner(USER)를 인증하고, Client에게 액세스 토큰을 발급해주는 서버 ( 구글, 네이버, 카카오 등 )

Client는 우리가 구현하는 서비스이므로 Resource Owner와 헷갈리지 않도록 합시다.

동작 과정은 위 그림과 같습니다.

1. Resource Owner(USER) 가 '구글로 로그인' 등 버튼을 통해 로그인을 요청합니다.

2. Client는 OAuth 프로세스를 시작하기 위해 사용자의 브라우저를 Authorization Server로 보내야 하는데, 이 때 Authorization URL로 Server가 제공하는 client_ID, Redirect URI, Scope 등 의 매개변수를 쿼리스트링으로 보냅니다.

3, 4. 클라이언트가 빌드한 Authorization URL로 이동된 Resource Owner는 제공된 로그인 페이지에서 ID 와 PW 를 입력하여 인증합니다.

5, 6. 인증(구글 로그인)에 성공하면 , Authorization Server는 제공된 Redirect URI로 사용자를 리다이렉션 시킵니다. ( 이 과정에서 Authorization Code를 포함하여 리다이렉션, 구글의 경우 코드를 쿼리스트링에 포함합니다.)

7, 8. Client는 Authorization Server에 Authorization Code, Client_ID, Client Secret을 전달하고, Access Token을 리턴받습니다.

9. 위 과정을 성공적으로 마치면 로그인 성공

10. Resource Owner가 Access Token을 통해 Client에게 서비스를 요청합니다.

11 ~ 13 . Client는 발급하고 저장해둔 Access Token을 사용하여 Resource Owner에게 제한된 리소스에 접근을 하용하고, 서비스를 제공합니다.

OAuth에 관해 많은 자료들이 있었지만, 그 중 가장 이해하기 쉽게 설명한 글을 참고하였습니다.
참고자료 : https://hudi.blog/oauth-2.0/

이제 위 동작과정을 토대로 구글 로그인을 도입해봅시다.

Resource Server API 발급

1. Google API 콘솔 접속

https://console.cloud.google.com/apis/dashboard?hl=ko

Google 클라우드 플랫폼

로그인 Google 클라우드 플랫폼으로 이동

accounts.google.com

2. Google Cloud 로고 옆 박스 클릭 -> 새 프로젝트 생성2

3. 프로젝트 이름 설정 및 만들기

4. OAuth 동의 화면에 사용자 유형 - '외부' 설정

5. 사용자 인증 정보에 들어가, + 사용자 인증 정보 만들기 클릭 및 OAuth 클라이언트 ID 생성, 웹 애플리케이션 유형으로 생성

6. 리다이렉션 URI 등록

구글 로그인 성공 시 여기에 등록한 리다이렉션 URI로 Authorization Code를 발급합니다.

7. Client ID, Client Secret 발급

구글 로그인 시 Authorization URL에 함께 보낼 정보들을 발급받습니다.

로그인 폼에 '구글로 로그인' 생성 및 리다이렉션 href 추가

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr/>
<!-- 시큐리티는 x-www-form-url-encoded 타입만 인식 -->
<form action="/login" method="post">
    <input type="text" name="username" placeholder="Username" />
    <input type="password" name="password" placeholder="Password"/>
    <button>로그인</button>
</form>
<a href="/oauth2/authorization/google">구글 로그인</a>
<a href="/joinForm">회원가입을 아직 하지 않으셨나요?</a>
</body>
</html>

로그인 폼에서 '구글 로그인'을 클릭하면 Resource Server(Google)에서 구글 로그인 폼(Authorization URL)로 이동 후 구글 로그인에 성공하면 리다이렉션 URI로 이동합니다.
Authorization URL을 통해 로그인 할 때 필요한 발급받은 ID와 Secret이 필요합니다. 이 정보들은 yml에 별도로 설정할 수 있습니다.
이 때 리다이렉션 URI로 Authorization Code를 함께 보냅니다.

application.yml에 발급 받은 정보 입력

security:
  oauth2:
    client:
      registration:
        google:
          client-id: ~~
          client-secret: ~~
          scope:
            - email
            - profile

Authorizaiton URL(구글 로그인 폼)에 함께 전송할 Resource Owner의 정보를 application.yml에 저장합니다.

Security Filter에 OAuth 옵션 추가

.and()
.oauth2Login()
.loginPage("/loginForm")

OAuth를 사용한 로그인 옵션을 추가해주고 OAuth 로그인 옵션을 사용하는 loginPage 또한 설정해 줍시다.

이렇게 해서 로그인이 완료되었습니다.

하지만 로그인(인증) 절차만 완료 했을 뿐, 아직 OAuth Owner 사용자에 대한 인가 처리는 하지 못한 상황입니다.

( 아직 접근 제한이 걸린 리소스에 대한 접근은 불가능한 상황 )

또 뿐만 아니라 데이터베이스에 구글로 로그인한 회원의 정보 저장 또한 필요합니다.

다음 포스팅에서 OAuth 로그인 후처리(OAuth Resource Owner에 대한 접근 권한 처리 및 데이터베이스에 회원 저장)을 해보도록 하겠습니다.

<정리>

OAuth2.0은 Resource Owner, Client, Resource Server 세 가지 주체의 상호작용으로 이루어집니다.
OAuth2.0을 통해 로그인하기 위해서는 Resource Server로부터 Client_ID, Client_Secret을 발급받고, Ower가 OAuth 로그인 성공 시(OAuth ID, PW, Client_ID, Client_Secret을 통한) Resource Server에서 Resource Owner에게 전달해줄 code를 전달할 Rediret_URI를 설정해 주어야 합니다.
OAuth2.0의 동작과정을 잘 파악하는 것이 중요합니다.

<참고 자료>

OAuth 2.0 개념과 동작원리

2022년 07월 13일에 작성한 글을 보충하여 새로 포스팅한 글이다. OAuth 등장 배경 우리의 서비스가 사용자를 대신하여 구글의 캘린더에 일정을 추가하거나, 페이스북, 트위터에 글을 남기는 기능을

hudi.blog

저작자표시

'📕 Backend > Spring Security' 카테고리의 다른 글

[Security] OAuth2.0 네이버, 카카오 로그인 기능 추가 (0)	2023.06.01
[Security] OAuth2.0 로그인 후처리 - 권한 부여, 데이터베이스 저장 (0)	2023.05.31
[Security] 권한 처리 @PreAuthorize, @PostAuthorize, @Secured (0)	2023.05.29
[Security] Security 회원가입, 로그인 (0)	2023.05.29
[Security] Spring Security란? (1)	2023.05.29

블로그의 정보

Study Repository

rlaehddnd0422

[Security] OAuth2.0을 이용한 소셜 로그인 (구글)

OAuth란?

OAuth 2.0 구성요소

OAuth 동작 과정

Resource Server API 발급

1. Google API 콘솔 접속

2. Google Cloud 로고 옆 박스 클릭 -> 새 프로젝트 생성2

3. 프로젝트 이름 설정 및 만들기

4. OAuth 동의 화면에 사용자 유형 - '외부' 설정

5. 사용자 인증 정보에 들어가, + 사용자 인증 정보 만들기 클릭 및 OAuth 클라이언트 ID 생성, 웹 애플리케이션 유형으로 생성

6. 리다이렉션 URI 등록

7. Client ID, Client Secret 발급

로그인 폼에 '구글로 로그인' 생성 및 리다이렉션 href 추가

application.yml에 발급 받은 정보 입력

Security Filter에 OAuth 옵션 추가

'📕 Backend > Spring Security' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

OAuth란?

OAuth 2.0 구성요소

OAuth 동작 과정

Resource Server API 발급

1. Google API 콘솔 접속

2. Google Cloud 로고 옆 박스 클릭 -> 새 프로젝트 생성2

3. 프로젝트 이름 설정 및 만들기

4. OAuth 동의 화면에 사용자 유형 - '외부' 설정

5. 사용자 인증 정보에 들어가, + 사용자 인증 정보 만들기 클릭 및 OAuth 클라이언트 ID 생성, 웹 애플리케이션 유형으로 생성

6. 리다이렉션 URI 등록

7. Client ID, Client Secret 발급

로그인 폼에 '구글로 로그인' 생성 및 리다이렉션 href 추가

application.yml에 발급 받은 정보 입력

Security Filter에 OAuth 옵션 추가

'📕 Backend > Spring Security' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바