[SpringBoot] - 구글, 네이버 소셜로그인 구현 설정

네이버 소셜 로그인 설정

이 포스팅에서는 네이버 소셜 로그인을 스프링 부트를 사용하여 구현하는 방법을 설명합니다.

아래 단계의 그림을 따라 차근차근 따라해보세요!

1. 네이버 개발자 센터 이동

먼저 네이버 개발자 센터로 이동합니다: https://developers.naver.com/main/

2. 애플리케이션 등록

네이버 오픈 API를 활용하기 위해 애플리케이션을 등록해야 합니다. 다음 단계를 따라주세요:

1. 네이버 개발자 센터에서 Application으로 이동합니다.
2. 애플리케이션 등록을 클릭합니다.
3. 애플리케이션 이름을 설정합니다.
4. 사용 API에서 네이버 로그인을 선택합니다.
5. 제공 정보에서 회원이름, 연락처, 이메일 주소를 필수로 선택합니다.

• 로그인 오픈 API 서비스 환경에서 PC 웹을 선택합니다.
• 서비스 URL에 http://localhost:8080을 입력합니다.
• 네이버 로그인 Callback URL에 http://localhost:8080/login/oauth2/code/naver을 입력합니다.

3. 스프링 부트 설정

스프링 부트 애플리케이션에서 네이버 소셜 로그인을 설정하기 위해 application.yml 파일에 다음 내용을 추가합니다:

  security:
    oauth2:
      client:
        registration:
          naver:
            client-id: [발급받은 Clidnet Id]
            client-secret: [발급받은 Secret]
            scope:
              - name
              - email
              - profile_image
            client-name: Naver
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/naver

        provider:
          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

 

 

구글 소셜 로그인 설정 방법

이 포스팅에서는 구글 소셜 로그인을 스프링 부트를 사용하여 구현하는 방법을 설명합니다. 아래 단계에 따라 차근차근 따라해보세요.

1. 구글 클라우드 접속

먼저 구글 클라우드에 접속합니다: https://cloud.google.com/

2. 새 프로젝트 생성

1. 구글 클라우드 콘솔에서 +새프로젝트를 클릭합니다.
2. 새 프로젝트 생성을 클릭합니다.
3. 프로젝트 이름을 입력하고 생성합니다.

3. OAuth 동의 화면 구성

소셜 로그인 시 수집할 개인정보를 설정합니다:

1. API 및 서비스 > 사용자 인증 정보 > 동의화면 구성을 클릭합니다.
2. 프로젝트를 만들 때 조직을 구성하지 않았으면 외부를 선택하고 만들기를 클릭합니다.
3. 서비스 이름을 개인적으로 설정하고, Cloud 프로젝트를 생성한 계정을 입력한 뒤, 저장하고 계속하기를 클릭합니다.
4. 범위 추가 또는 삭제를 클릭합니다.
5. 기본적으로 사용하는 email, profile, openid를 선택합니다. (필요에 따라 추가 선택 가능)
6. 테스트 사용자에서 +ADD USERS를 클릭하여 테스트 사용자를 이메일 형식으로 등록합니다.

---

---

---

---

 

테스트 사용자 이메일 형식으로 등록한다면, 여기까지가 OAuth 동의 화면 구성 단계입니다.

 

4. 클라이언트 ID 생성

OAuth API를 호출할 때 필요한 클라이언트 Key를 발급받습니다:

1. 사용자 인증정보 > 사용자 인증 정보 만들기 > OAuth 클라이언트 ID를 클릭합니다.
2. 해당 프로젝트는 웹 서비스이므로, 애플리케이션 유형으로 웹 애플리케이션을 선택합니다.
3. 서비스 이름을 입력한 뒤 승인된 리디렉션 URI에 http://localhost:8080/login/oauth2/code/google를 임시로 입력합니다.
4. 클라이언트 ID와 비밀번호가 생성됩니다. 이를 저장해둡니다.

---

---

 

5. 스프링 부트 설정

스프링 부트 애플리케이션에서 구글 소셜 로그인을 설정하기 위해 application.yml 파일에 다음 내용을 추가합니다

 

  security:
    oauth2:
      client:
        registration:
          google:
            client-id: [발급받은 Clidnet Id]
            client-secret: [발급받은 Secret]
            scope:
              - profile
              - email

          naver:
            client-id: [발급받은 Clidnet Id]
            client-secret: [발급받은 Secret]
            scope:
              - name
              - email
              - profile_image
            client-name: Naver
            authorization-grant-type: authorization_code
            redirect-uri: http://localhost:8080/login/oauth2/code/naver

        provider:
          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