[Auth] OAuth 2.0을 통한 소셜 로그인

박이레·2022년 11월 30일
0

Auth

목록 보기
4/4

 십수 년 전만 하더라도 사람들은 종이 신문을 읽었습니다. 막차 시간 무렵 지하철 선반에는 종이 신문이 켜켜이 쌓여 있었습니다. 그런데 이제 종이 신문을 찾아보기 힘듭니다. 그 자리에 스마트폰이 들어섰습니다. 뉴스를 소비하는 방식이 달라진 겁니다.

십수 년 전만 하더라도 사이트를 이용하려면 회원가입을 해야만 했습니다. 이름과 주민등록번호, 집주소 등을 적어야 했습니다. 무엇에 동의하는지도 모른 채 동의를 눌러야만 했습니다. 이제 그 자리에 소셜 로그인이 들어왔습니다. 회원가입하는 방식이 달라졌습니다.

이 글에서는 소셜 로그인에 대해 다룹니다. 소셜 로그인은 싱글 사인 온(Single sign on)의 일종입니다. 싱글 사인 온은 하나의 아이디를 이용해 여러개의 독립된 애플리케이션에 로그인할 수 있는 인증 메커니즘입니다.

소셜 로그인을 사용하면 소셜 네트워크의 계정을 이용해 다른 애플리케이션의 계정을 생성할 수 있습니다.

소셜 로그인(기능)을 구현하기 위해 OAuth 2.0 인가 프레임워크(도구)를 사용합니다. OAuth 2.0은 소셜 로그인을 구현하기 위한 인가 프레임워크입니다.


용어 정리

서드 파티/클라이언트

소셜 로그인을 사용하려고 하는 애플리케이션을 서드 파티(Third-party) 혹은 클라이언트(Client)라고 합니다.

리소스

서드 파티 애플리케이션이 접근하고자 하는 것을 말합니다. 만약 서드 파티 앱이 사용자의 계정 정보를 사용한다면, 사용자 정보가 리소스(Resource) 혹은 HTTP Service가 됩니다.

리소스 오너

리소스를 가지고 있는 것을 뜻합니다. 위에 정의한 리소스의 리소스 오너는 사용자입니다.

리소스 서버

리소스를 가지고 있는 서버를 말합니다.

인가 서버

인가만 집중적으로 하는 서버를 말ㅂ니다. 인가 서버와 리소스 서버는 서로 다를 수도 있고 같을 수도 있습니다.

제한된 액세스

서드 파티 애플리케이션이 리소스 오너(사용자)가 허락한 리소스에만 접근할 수 있도록 하겠다는 것입니다.

OAuth 2.0 흐름

  1. 사용자가 소셜 로그인 하기 요청을 보냅니다.
  2. 백엔드 서버가 요청을 받습니다.
  3. 백엔드 서버는 해당 요청을 인가 페이지로 리다이렉트합니다.
  4. 사용자가 인가 페이지를 보게 됩니다.
  5. 사용자가 소셜 로그인을 요청을 보냅니다.
  6. 사용자가 인가 서버에 로그인됩니다.
  7. 인가 서버가 접근 권한을 부여하는 페이지로 리다이렉트합니다.
  8. 사용자가 접근 인가 버튼을 클릭합니다.
  9. 인가 서버가 사용자를 서드 파티 애플리케이션(콜백 URL)으로 리다이렉트합니다.
  10. 서드 파티 애플리케이션은 인가 서버를 받은 토큰을 사용자에게 전달합니다.
  11. 토큰을 받은 사용자는 토큰을 이용해 사용자의 정보에 접근합니다.

서드 파티 애플리케이션은 인가 페이지서드 파티 애플리케이션 페이지(콜백 URL)인가 서버에 알려주어야 합니다.

OAuth 2.0 설정

spring:
  security:
    oauth2:
      client:
        registration:
          github:
            client-id: 
            client-secret: 
            redirect-uri: "{baseUrl}/oauth2/callback/{registrationId}"
            scope:
              - user:email
              - read:user
        provider:
          github:
            authorization-uri: 
            token-uri: 
            user-info-uri: 


💁‍♂️reference

React.js, 스프링 부트, AWS로 배우는 웹 개발 101

김다정 지음ㅣ에이콘출판ㅣ2022ㅣ도서 정보


EOD.

profile
혜화동 사는 Architect

0개의 댓글