OAuth2 로그인 - 페이스북 개발자 센터로 페이스북 연동 로그인하기

1. OAuth란?

1.1 OAuth의 정의

• OAuth(Open Authorization)는 제3자 애플리케이션이 사용자 자원을 접근할 수 있도록 허가하는 표준 프로토콜입니다.
• 주로, 로그인을 위해 사용되며, 사용자 비밀번호를 노출하지 않고 안전하게 인증할 수 있습니다.

1.2 OAuth의 동작 원리

• OAuth는 클라이언트, 리소스 소유자, 인증 서버, 자원 서버 네 가지 주요 역할을 포함합니다.
• 사용자가 애플리케이션을 통해 로그인 요청을 하면, 인증 서버에서 사용자 인증을 진행하고, 인증 토큰을 발급합니다.
• 애플리케이션은 발급받은 토큰을 사용하여 자원 서버에서 사용자 정보를 요청할 수 있습니다.

➡️이제 OAuth의 정의와 동작원리를 이해하셨겠죠?

2. 클라이언트와 서버 사이에 회원가입 과정 설명

2.1 회원가입 과정

• 사용자가 애플리케이션에서 회원가입 버튼을 클릭합니다.
• 애플리케이션은 페이스북 인증 서버로 리디렉션하여 사용자가 페이스북 로그인 화면에서 인증을 진행합니다.
• 사용자가 인증을 완료하면, 페이스북은 인증 코드를 애플리케이션에 반환합니다.
• 애플리케이션은 이 코드를 사용하여 페이스북 API로부터 액세스 토큰을 요청합니다.
• 액세스 토큰을 이용해 페이스북 API로부터 사용자 정보를 가져와 회원가입을 완료합니다.

2.2 클라이언트와 서버 간의 통신

• 클라이언트는 브라우저 또는 모바일 앱이고, 서버는 애플리케이션 서버입니다.
• 클라이언트는 서버에 인증 요청을 보내고, 서버는 이를 처리하여 페이스북과 통신합니다.
• 서버는 클라이언트에게 인증 결과를 반환하고, 필요에 따라 세션을 유지합니다.

➡️이제 회원가입 절차가 백그라운드에서 어떤 방식으로 진행되는지 이해하셨죠?

3. 페이스북 개발자 사이트 이용 방법

1. 먼저 페이스북 개발자 센터에 접속해주세요

https://developers.facebook.com/?locale=ko_KR

Meta for Developers

2. "내 앱"을 클릭합니다.

3. "앱 만들기"를 클릭합니다.

4. 기능 선택 

5. Facebook 로그인 선택 및 웹사이트 추가

➡️사용할 플랫폼을 정하면 되는데 저는 웹만 사용했습니다.

저는 url이 없었어서 localhost를 입력해줬어요

그리고 다음 next를 누르면 javaScript로 구현하는 코드가 나오는데 저는 스프링부트로 할 거라서 그냥 다 넘어가줬습니다!

6. ID랑 암호코드 복사하기

➡️이걸 복사해주세요!

4. application.yml 설정하기

security에 들여쓰기해서 oauth2를 차례대로 입력해주세요!

📍들여쓰기를 제대로 하지않으면 오류가 발생해요 🥲

    oauth2:
      client:
        registration:
          facebook: //페이스북 플랫폼을 사용하겠다는 뜻
            client-id: your_id //자신의 고유 id 입력
            client-secret: your_number //자신의 고유 number 입력
            scope: //페이스북에게 어떤 데이터를 받을지에 대한 범위를 지정
              - public_profile
              - email

scope는 페이스북에게 어떤 데이터를 받을지에 대한 범위를 지정하는데요

이는 회사마다 제공하는 서비스가 다르다고 해요!

그래서 문서를 통해 확인해봐야합니다.

https://developers.facebook.com/docs/facebook-login/web

웹 - Facebook 로그인 - 문서 - Meta for Developers

여기서 확인해보면 페이스북이 제공하는  scope는 public_profile ( 자신이 작성한 공공 프로필 데이터) 와 email입니다.

 

페이스북 로그인 기능 구현과 개발자센터에서 앱 등록, yml 파일 설정 세팅까지 했어요!

일단 이렇게까지 하고 2탄으로 넘어갈게요 😆