페이스북 소셜 로그인 구현하기

🔗 Meta for Developers 공식 홈페이지

✏️ 앱 세팅

📍 앱 만들기

• 로그인 후 오른쪽 상단의 내앱 → 앱 만들기 → 소비자 → 앱 이름 추가 항목을 채우고 앱 만들기

📍 앱에 제품 추가

• Facebook 로그인 설정 → 좌측 매뉴의 Facebook 로그인 → 설정
• redirection url 입력
  • ⚠️ facebook 은 https 만 취급한다.
    • 실제 배포환경에서는 nginx 가 https 를 담당해주기 때문에 서버는 http 를 사용하지만,
      개발 환경에서는 별도로 https 로 만들어줘야 한다.
  • 🔗 ssl 인증서 생성하기

https://localhost/login/oauth2/code/facebook

• url 입력후 저장

📍 기본설정

• 좌측 매뉴에 설정 → 기본설정
  • 앱 ID 와 앱 시크릿 코드 복사

✏️ 프로젝트 환경설정

📍 application yml

• https 설정 추가
  • 이 설정을 추가하면 http://localhost:8080 으로 더이상 접속할 수 없다.
  • https://localhost 로 접속이 가능하다.
  • 만약 api 를 활용한 다른 서비스가 있다면 redirect url 을 모두 변경해줘야 한다.

server:
  port: 443
  ssl:
    enabled: true
    key-store-type: PKCS12
    key-store-password: 'key store pw'
    key-store: keystore.p12

• oauth2 설정 추가

security:
    oauth2:
      client:
        registration:

					facebook:
            clientId: '앱 ID'
            client-secret: '시크릿 코드'
            redirect-uri: '리다이렉트 url'
            client-name: Facebook
            scope:

✏️ Oauth2 구현

🔗 oauth2 구현 방법

✏️ facebook 로그인

📍 web page 접속

• https 로 처음 접속하는것이기 때문에 최초 1회 설정을 해줘야 한다.
  • 좌측 하단 고급 → localhost(안전하지 않음)
  • 정상적으로 접속이 가능하다.

📍 로그인

• 아래 url 로 연결되는 태그를 생성해 접속하면 로그인이 완료된다.

<a href="/oauth2/authorization/facebook">