📖구글 로그인 API

📌OAuth

구글 로그인 부터 진행 후

Google Cloud API 접속

👉 콘솔 클릭

👉 프로젝트 선택 > 우측 상단 새 프로젝트 클릭

👉 만들기 클릭


👉 OAuth 클라이언트 ID 만들기


👉 앱 이름, 이메일, 연락처 작성 후 저장 후 계속 x 3 👉 대시 보드

👉 여기까지 동의화면 만든 것 이제 진짜로 로그인 API를 적용해보자

📌OAuth 생성

👉 만들기

👉 앞으로 ID 와 PW를 사용하면 된다

👉 까먹으면 이거 누르면 다시 나옴

📌application-oauth 프로퍼티 생성

spring.security.oauth2.client.registration.google.client-id= # 클라이언트 ID
spring.security.oauth2.client.registration.google.client-secret= # 클라이언트 PW
spring.security.oauth2.client.registration.google.scope=profile, email

👉 [띄어쓰기 하지 말 것 !] 방금 받은 ID, PW를 넣어주고

📍application.properties 에서 import 해주기

맨 아래에 spring.profiles.include=oauth
추가
👉 파일 이름에 oauth 가 들어가면 알아서 실행함. 우린 application-oauth 를 만들었으므로 이걸로 실행.

📌User 엔티티 생성

우리가 만든 로그인과 별개로 테이블 생성

package com.shop.entity;

import jakarta.persistence.*;
import lombok.Data;
import lombok.NoArgsConstructor;

@Entity
@Data
@NoArgsConstructor
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String name; // 닉네임이 자동으로 등록 됨

    @Column(nullable = false)
    private String email; // 이메일이 자동으로 등록 됨

    private String picture; // 프사가 자동으로 등록 됨
    private String role = "ROLE_USER";

    public User(String name, String email, String picture) {
        this.name = name;
        this.email = email;
        this.picture = picture;
    }

    public User update(String name, String picture) {
        this.name = name;
        this.picture = picture;

        return this;
    }
}

📌SessionUser (Dto) 생성

기본 적으로 다른 것들고 연동이 되야 하기때문에 Dto 가 있어야 함

package com.shop.dto;

import com.shop.entity.User;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

import java.io.Serializable;

@Getter
@Setter
@NoArgsConstructor
// 직렬화 : 자바 시스템에서 사용할 수 있도록 바이트 스트림 형태로 연속 적인 포멧 변환 기술
// 👉 데이터를 줄 세워서 쭉 넣음 (마크 인터페이스) / 자바 Object Data 👉 Byte Stream
// 역직렬화 : Byte Stream 👉 자바 Object Data
public class SessionUser implements Serializable {

    private String name;

    private String email;

    private String picture;

    public SessionUser(User user) {
        this.name = name;
        this.email = email;
        this.picture = picture;
    }

}

📌UserRepository 클래스 생성

package com.shop.repository;

import com.shop.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.Optional;

public interface UserRepository extends JpaRepository<User, Long> {
    
    // 이메일 체크
    Optional<User> findByEmail(String email);
    
}

📌OAuthAttributes 클래스 생성

package com.shop.config;

import com.shop.entity.User;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

import java.util.Map;

@Getter
@Setter
@ToString
public class OAuthAttributes {

    private Map<String, Object> attributes;
    private String nameAttributeKey;
    private String name;
    private String email;
    private String picture;

    public OAuthAttributes(Map<String, Object> attributes, String nameAttributeKey,
                           String name, String email, String picture) {
        this.attributes = attributes;
        this.nameAttributeKey = nameAttributeKey;
        this.name = name;
        this.email = email;
        this.picture = picture;
    }

    public OAuthAttributes(){}

    public static OAuthAttributes ofGoogle(String userNameAttributeName,
                                            Map<String, Object> attributes){

        return new OAuthAttributes(attributes,userNameAttributeName,
                (String) attributes.get("name"),
                (String) attributes.get("email"),
                (String) attributes.get("picture"));

    }

    public User toEntity(){

        return new User(name, email, picture);

    }
}

📌pom.xml 의존성 추가

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-oauth2-client</artifactId>
        </dependency>

📌CustomOAuth2UserService 클래스 생성

package com.shop.config;

import com.shop.dto.SessionUser;
import com.shop.entity.User;
import com.shop.repository.UserRepository;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserService;
import org.springframework.security.oauth2.core.OAuth2AuthenticationException;
import org.springframework.security.oauth2.core.user.DefaultOAuth2User;
import org.springframework.security.oauth2.core.user.OAuth2User;

import java.util.Collections;

@Service
public class CustomOAuth2UserService implements
        OAuth2UserService<OAuth2UserRequest, OAuth2User> {

    @Autowired
    private UserRepository userRepository;

    @Autowired
    private HttpSession httpSession;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest oAuth2UserRequest)
        throws OAuth2AuthenticationException{

        OAuth2UserService oAuth2UserService = new DefaultOAuth2UserService();
        OAuth2User oAuth2User = oAuth2UserService.loadUser(oAuth2UserRequest);

        // String registrationId = oAuth2UserRequest.getClientRegistration().getRegistrationId();

        String userNameAttributeName = oAuth2UserRequest.getClientRegistration().getProviderDetails()
                .getUserInfoEndpoint().getUserNameAttributeName();

        OAuthAttributes attributes = OAuthAttributes.ofGoogle(userNameAttributeName,
                 oAuth2User.getAttributes());

        User user = saveOrUpdate(attributes);

        httpSession.setAttribute("user", new SessionUser(user));

        return new DefaultOAuth2User(Collections.singleton(new SimpleGrantedAuthority("ROLE_USER")),
                 attributes.getAttributes(), attributes.getNameAttributeKey());

    }

    private User saveOrUpdate(OAuthAttributes attributes){

        User user = userRepository.findByEmail(attributes.getEmail())
                .map(entity -> entity
                        .update(attributes.getName(), attributes.getPicture()))
                .orElse(attributes.toEntity());

        return userRepository.save(user);

    }

}

📌SecurityConfig 클래스 수정

...
    @Autowired
    private CustomOAuth2UserService customOAuth2UserService;
...

 // 로그아웃
                .logout(logout -> logout
                        .logoutRequestMatcher(new AntPathRequestMatcher("/members/logout")) // 로그아웃 페이지
                        .logoutSuccessUrl("/")) // 로그아웃 성공 페이지 👉 "/"
                // 구글 인증
                .oauth2Login(oauth2Login -> oauth2Login
                        .defaultSuccessUrl("/")
                        .userInfoEndpoint(userInfoEndpointConfig -> userInfoEndpointConfig
                        .userService(customOAuth2UserService))
                );

        // 에러가 발생하면 에러 핸들링
        ...

👉 이 것까지 하고 실행해본다. 에러가 나지 않아야 한다

📌memberLoginForm.html 수정

...
    <a href="/oauth2/authorization/google" >구글 아이디로 로그인</a>
</div>

</html>

📌결과

👉 구글 로그인 창이 뜨게 된다. 로그인을 해보면 ROLE_USER 이기 때문에 주문만 할 수 있다.

👉 DB에는 담을 수 있지만 USER로 View에서 보여지는 로직은 구현하지 않았기 때문에 실제로 보이지는 않는다.

👉 🔥Todo

---

📖네이버, 카카오 추가

📌네이버

네이버 로그인 API
👉 로그인 진행

👉 Client ID/PW를 이용해 구글과 똑같이 해주면 된다

📌카카오

카카오 로그인 API
👉 로그인 진행



👉 신청하고 비즈니스 앱 가입 하면 된다. (설명대로 하면 됨)

👉 설정 가능해 짐

👉 Client ID

👉 Clinet PW

📌코드에 추가하기

구글과 다르게 조금 까다롭다
config패키지 관련 클래스, memberLonginForm.html, application-oauth.properties 수정을 해준다

📍CustomOAuth2UserService 클래스 수정

package com.shop.config;

import com.shop.dto.SessionUser;
import com.shop.entity.User;
import com.shop.repository.UserRepository;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserService;
import org.springframework.security.oauth2.core.OAuth2AuthenticationException;
import org.springframework.security.oauth2.core.user.DefaultOAuth2User;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.stereotype.Service;

import java.util.Collections;

@Service
public class CustomOAuth2UserService implements OAuth2UserService<OAuth2UserRequest, OAuth2User> {
    @Autowired
    private UserRepository userRepository;
    @Autowired
    private HttpSession httpSession;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest oAuth2UserRequest) throws OAuth2AuthenticationException{
        OAuth2UserService oAuth2UserService = new DefaultOAuth2UserService();
        OAuth2User oAuth2User = oAuth2UserService.loadUser(oAuth2UserRequest);

        String registrationId = oAuth2UserRequest.getClientRegistration().getRegistrationId();

        String userNameAttributeName = oAuth2UserRequest.getClientRegistration().getProviderDetails()
                .getUserInfoEndpoint().getUserNameAttributeName();

        OAuthAttributes attributes = OAuthAttributes.of(registrationId, userNameAttributeName
                , oAuth2User.getAttributes());

        User user = saveOrUpdate(attributes);
        httpSession.setAttribute("user",new SessionUser(user));

        return new DefaultOAuth2User(Collections.singleton(new SimpleGrantedAuthority("ROLE_USER"))
                , attributes.getAttributes()
                , attributes.getNameAttributeKey()
        );
    }

    private User saveOrUpdate(OAuthAttributes attributes){
        User user = userRepository.findByEmail(attributes.getEmail())
                .map(entity -> entity.update(attributes.getName(), attributes.getPicture()))
                .orElse(attributes.toEntity());
        return userRepository.save(user);
    }
}

📍OAuthAttributes 클래스 수정

package com.shop.config;

import com.shop.entity.User;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

import java.util.Map;

@Getter
@Setter
@ToString
public class OAuthAttributes {
    private Map<String, Object> attributes;
    private String nameAttributeKey;
    private String name;
    private String email;
    private String picture;

    public OAuthAttributes(Map<String, Object> attributes, String nameAttributeKey, String name,
                           String email, String picture) {
        this.attributes = attributes;
        this.nameAttributeKey = nameAttributeKey;
        this.name = name;
        this.email = email;
        this.picture = picture;
    }

    public OAuthAttributes() {
    }

    // 해당 로그인인 서비스가 kakao인지 google인지 구분하여, 알맞게 매핑을 해주도록 합니다.
    // 여기서 registrationId는 OAuth2 로그인을 처리한 서비스 명("google","kakao","naver"..)이 되고,
    // userNameAttributeName은 해당 서비스의 map의 키값이 되는 값이됩니다. {google="sub", kakao="id", naver="response"}
    public static OAuthAttributes of(String registrationId, String userNameAttributeName,
                                     Map<String, Object> attributes) {
        if (registrationId.equals("kakao")) {
            return ofKakao(userNameAttributeName, attributes);
        } else if (registrationId.equals("naver")) {
            return ofNaver(userNameAttributeName,attributes);
        }
        return ofGoogle(userNameAttributeName, attributes);
    }

    private static OAuthAttributes ofKakao(String userNameAttributeName,
                                           Map<String, Object> attributes) {
        Map<String, Object> kakao_account = (Map<String, Object>) attributes.get("kakao_account");  // 카카오로 받은 데이터에서 계정 정보가 담긴 kakao_account 값을 꺼낸다.
        Map<String, Object> profile = (Map<String, Object>) kakao_account.get("profile");   // 마찬가지로 profile(nickname, image_url.. 등) 정보가 담긴 값을 꺼낸다.

        return new OAuthAttributes(attributes,
                userNameAttributeName,
                (String) profile.get("nickname"),
                (String) kakao_account.get("email"),
                (String) profile.get("profile_image_url"));
    }

    private static OAuthAttributes ofNaver(String userNameAttributeName,
                                           Map<String, Object> attributes) {
        Map<String, Object> response = (Map<String, Object>) attributes.get("response");    // 네이버에서 받은 데이터에서 프로필 정보다 담긴 response 값을 꺼낸다.

        return new OAuthAttributes(attributes,
                userNameAttributeName,
                (String) response.get("name"),
                (String) response.get("email"),
                (String) response.get("profile_image"));
    }

    private static OAuthAttributes ofGoogle(String userNameAttributeName,
                                            Map<String, Object> attributes) {

        return new OAuthAttributes(attributes,
                userNameAttributeName,
                (String) attributes.get("name"),
                (String) attributes.get("email"),
                (String) attributes.get("picture"));
    }

    public User toEntity() {
        return new User(name, email, picture);
    }
}

📍application-oauth.properties 수정

#Google
spring.security.oauth2.client.registration.google.client-id=
spring.security.oauth2.client.registration.google.client-secret=
spring.security.oauth2.client.registration.google.scope=profile,email

#Naver
# registration
spring.security.oauth2.client.registration.naver.client-id=
spring.security.oauth2.client.registration.naver.client-secret=
spring.security.oauth2.client.registration.naver.redirect-uri={baseUrl}/{action}/oauth2/code/{registrationId}
spring.security.oauth2.client.registration.naver.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.naver.scope=name,email,profile_image
spring.security.oauth2.client.registration.naver.client-name=Naver

# provider
spring.security.oauth2.client.provider.naver.authorization_uri=https://nid.naver.com/oauth2.0/authorize
spring.security.oauth2.client.provider.naver.token_uri=https://nid.naver.com/oauth2.0/token
spring.security.oauth2.client.provider.naver.user-info-uri=https://openapi.naver.com/v1/nid/me
spring.security.oauth2.client.provider.naver.user-name-attribute=response

# KAKAO
spring.security.oauth2.client.registration.kakao.client-id=
spring.security.oauth2.client.registration.kakao.client-secret=
spring.security.oauth2.client.registration.kakao.scope=profile_nickname, account_email, profile_image
spring.security.oauth2.client.registration.kakao.client-name=Kakao
spring.security.oauth2.client.registration.kakao.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.kakao.redirect-uri={baseUrl}/{action}/oauth2/code/{registrationId}
spring.security.oauth2.client.registration.kakao.client-authentication-method=client_secret_post

# provider
spring.security.oauth2.client.provider.kakao.authorization-uri=https://kauth.kakao.com/oauth/authorize
spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/oauth/token
spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me
spring.security.oauth2.client.provider.kakao.user-name-attribute=id

👉 본인 Client ID, PW 를 추가해 준다

📍memberLonginForm.html 수정

...
    <a href="/oauth2/authorization/google">구글 아이디로 로그인</a>
    <a href="/oauth2/authorization/naver">네이버 아이디로 로그인</a>
    <a href="/oauth2/authorization/kakao">카카오 아이디로 로그인</a>
</div>

</html>

📍결과

👉 성공

👉 사업자 등록을 안했기 때문에 안전하게 2차 인증까지 받도록 되있음

👉 성공