사진출처

---

• 새로비블로그의 스프링 부트로 OAuth2 구현(페이스북, 구글, 카카오, 네이버)글을 참고하시면 도움이 될 것입니다.

지식과 꿀팁이 넘치는 "새로비" 블로그 방문하기
"스프링 부트로 OAuth2 구현(페이스북, 구글, 카카오, 네이버)" 글 보러가기

---

🟡❗ 하지만 글의 내용과 사진은 모두 박도흠강사님의 강의 내용입니다. ❗🟡

---

🔹 카카오톡

• https://developers.kakao.com/ 로그인

• redirect URI
  스프링 부트의 시큐리티를 쓰고 있어서
  yaml파일에서 설정한 redirect-uri 부분을 적어야 한다

• 동의 항목
  이메일은 필수동의가 아니라서 그냥 사용안하고, 카카오톡 로그인 사용자일 경우에는 또는 모든 소셜로그인 사용자들에게는 이메일 정보를 추가 입력하게 만들어야 할 것 같다

🔹 네이버

• https://developers.naver.com/main/ 로그인

• 서비스 URL
  - 루트 주소 or 구매한 도메인

• Callback URL

  • redirect URI
    스프링 부트의 시큐리티를 쓰고 있어서
    yaml파일에서 설정한 redirect-uri 부분을 적어야 한다

🔹 페이스북

• https://developers.facebook.com/ 로그인
• https://jsikim1.tistory.com/114
• 페이스북 > 내 앱 > 앱 만들기
• Facebook 로그인 > 빠른 시작 > 앱 만들기
  • 1. 웹사이트에 대해 Facebook에 알리기 (설정)
  • 2. JavaScript용 Facebook SDK 설정 (넘어가기)
  • 3. 로그인 상태 확인 (넘어가기)
  • 4. Facebook 로그인 버튼 추가 (넘어가기)
  • 5. 다음단계 (넘어가기)
  • 유효한 리다렉션 (넘어가기)

🔹 구글

• https://console.developers.google.com/?pli=1 로그인

• 승인된 도메인 : 진짜 도메인만 하면된다. 로컬 호스트면 넘어가면 된다.

• 범위, 테스트 사용자 그냥 넘어가면 된다.

• 승인된 리다렉션 URL

  • 기본 URL 적으면 된다. 바꾸고 싶다면 yaml파일에서 새로 설정한다.
  • 기본 URL : uri /login/oauth2/code/
  • 구글 , 페이스북, 깃허브, 트위터는 기본세팅 되어있어서 따로 설정 안해줘도 된다. 하지만 국내는 해야한다.

🔹 소스

• https://github.com/BASIC-SKILLS/LEARN-SPRING-FACEBOOK/blob/master/src/main/resources/application.txt

• yaml 파일에 spring 1차 밑에 넣어야 한다.

• 순서들이 아주 중요하다

• 예를 들면, auth2는 security 안에, client는 auth2안에 있어야 한다.

  security:
      oauth2:
        client:
          registration:
            google:
              client-id: your-client-id
              client-secret: your-client-secret
              redirectUri: "{baseUrl}/oauth2/callback/{registrationId}"
              scope:
                - profile
                - email
            facebook:
              client-id: your-client-id
              client-secret: your-client-secret
              redirectUri: "{baseUrl}/oauth2/callback/{registrationId}"
            kakao:
              authorization-grant-type: authorization_code
              client-id: your-client-id
              client-secret: your-client-secret
              redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
              scope:
                - profile
                - account_email
              client-authentication-method: POST
              client-name: Kakao
            naver:
              authorization-grant-type: authorization_code
              client-id: your-client-id
              client-secret: your-client-secret
              redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
              scope: name,email,profile_image
              client-name: Naver

          provider:
            kakao:
              authorization-uri: https://kauth.kakao.com/oauth/authorize
              token-uri: https://kauth.kakao.com/oauth/token
              user-info-uri: https://kapi.kakao.com/v2/user/me
              user-name-attribute: properties
              # JSON 형태에서 "properties"라는 key값에 해당하는 value에 회원 정보가 담겨져있다.
            naver:
              authorization-uri: https://nid.naver.com/oauth2.0/authorize
              token-uri: https://nid.naver.com/oauth2.0/token
              user-info-uri: https://openapi.naver.com/v1/nid/me
              user-name-attribute: response
              # JSON 형태에서 "response"라는 key값에 해당하는 value에 회원 정보가 담겨져있다.

🔹 시큐리티 업데이트

• CustomUserPrincipal클래스의 implements에 OAuth2User클래스 추가

🔹 Pom.xml 업데이트

• oauth2-client 라이브러리 추가

🔹 DB 업데이트

• provider컬럼 추가 , 기본값은 local로 설정