[스프링 with AWS] 구글,네이버 로그인 연동

🏃CH.05 스프링 시큐리티와 OAuth 2.0으로 로그인 기능 구현🏃

---

* TODO : 리팩토링 *

IndexController에서 세션값을 가져오는 부분, 즉 (SessionUser) httpSession.getAttribute ~ 부분은

다른 컨트롤러나 메소드에서 세션값이 필요할 때마다 반복되는 코드로, 개선이 필요한 나쁜 코드이다.

이를 메소드 인자로 세션값을 바로 받을 수 있도록 변경하는 부분은 지금 단계에서 이해하기 어려운 부분이 있기 때문에 나중에 todo로 남겨두겠다.

---

 

https://console.cloud.google.com/

Google Cloud Platform

OAuth 클라이언트 ID를 생성해주고, 그에 따른 ID와 ClientSecret 코드를 받아두어야한다.

---

1. application.properties와 같은 위치에 application-oauth-properties 생성

 

* 스프링 부트에서는 properties이름을 application-XXX.properties로 만들면,

XXX이라는 profile이 생성되어 이를 통해 관리할 수 있다고 한다.

spring.security.oauth2.client.registration.google.client-id=클라이언트 ID
spring.security.oauth2.client.registration.google.client-secret=클라이언트 보안 비밀
spring.security.oauth2.client.registration.scope=profile,email

scope의 기본값은 openid,profile,email이나, openid라는 scope이 있으면 구글과 구글이 아닌 서비스(네이버)로 나눠서 각각의 OAuth2Service를 만들어야하므로, 하나로 사용하기 위해 openid scope을 빼고 등록한다.

 

 

2. application-properties에서 application-oauth-properties를 포함하도록 구성한다.

spring.profiles.include=oauth

---

📌사용자 정보를 담당할 도메인 User 클래스 생성

@Getter
@NoArgsConstructor
@Entity
public class User extends BaseTimeEntity {

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

    @Column(nullable = false)
    private String name;

    @Column(nullable = false)
    private String email;

    @Column
    private String picture;

    @Enumerated(EnumType.STRING)
    @Column(nullable = false)
    private Role role;


    @Builder
    public User(String name, String email, String picture, Role role) {
        this.name = name;
        this.email = email;
        this.picture = picture;
        this.role = role;
    }
}

 

📌 각 사용자의 권한을 관리할 Enum 클래스 Role 생성

 

* 스프링 시큐리티에서는 권한 코드에 항상 ROLE_이 앞에 있어야만 한다.

@Getter
@RequiredArgsConstructor
public enum Role {

    GUEST("ROLE_GUEST","손님"),
    USER("ROLE_USER","일반 사용자");

    private final String key;
    private final String title;
}

---

3. 스프링 시큐리티 설정

 

🔗 @EnableWebSecurity

: 스프링 시큐리티 설정들 활성화

 

🔗 authorizeRequests

: url 별 권한 관리 설정하는 옵션의 시작점

 

🔗 antMatchers

: 권한 관리 대상을 지정하는 옵션

 

🔗 anyRequest

: 설정된 값들 이외 나머지 url들

 

🔗 userInfoEndpoint

: OAuth 2 로그인 성공 이후 사용자 정보를 가져올 때의 설정들을 담당

 

🔗 userService

: 소셜 로그인 성공 후, 후속 조치를 진행할 UserService 인터페이스의 구현체를 등록

@RequiredArgsConstructor
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    private final CustomOAuth2UserService customOAuth2UserService;
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .csrf().disable()
                .headers().frameOptions().disable()
                .and()
                .authorizeRequests()
                .antMatchers("/","/css/","/images/**","/js/**","h2-console/**").permitAll()
                .antMatchers("/api/v1/**").hasRole(Role.USER.name())
                .anyRequest().authenticated()
                .and()
                .logout()
                .logoutSuccessUrl("/")
                .and()
                .oauth2Login()
                .userInfoEndpoint()
                .userService(CustomOAuth2UserService);
    }
}

 

📌 CustomOAuth2UserService 클래스 생성

 

: 구글 로그인 이후 가져온 사용자 정보(이메일,이름,사진..)들을 기반으로 가입 및 정보수정,세션 저장 등의 기능을 지원

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

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

       //현재 진행 중인 서비스 구분
        String registrationId = userRequest.getClientRegistration().getRegistrationId();
        
        //OAuth2 로그인 진행시 키가되는 필드값(=PK)
        String userNameAttributeName = userRequest.getClientRegistration().getProviderDetails()
                .getUserInfoEndpoint().getUserNameAttributeName();
		
        //OAtuth2User의 속성들을 담을 클래스(=dto)
        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(user.getRoleKey())),
                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);
    }
}

🔗 registrationId

: 현재 로그인 진행 중인 서비스 구분 (구글,네이버..)

 

🔗 userNameAttributeName

: OAuth2 로그인 진행시 키가되는 필드값(PK와 유사)

 

🔗 OAuthAttributes

: OAuth2User의 속성들을 담을 클래스(=dto)

 

🔗 SessionUser

: 세션에 사용자 정보를 저장하기 위한 DTO 클래스

-> User 클래스를 그대로 사용하지 않는 이유는, User는 엔티티이기 때문에 어떤 것과 연관관계가 성립되어있을 지 모르기 때문이다. ( 성능 이슈,부수 효과 발생 방지)

 

 

* 참고로 SessionUser에는 인증된 사용자 정보만 필요하므로, name/email/picture만 필드로 선언 *

---

📌로그인 테스트

<div class="row">
            <div class="col-md-6">
                <a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
                {{#MyUser}}
                    Logged in as: <span id="user">{{MyUser}}</span>
                    <a href="/logout" class="btn btn-info active" role="button">Logout</a>
                {{/MyUser}}
                {{^MyUser}}
                    <a href="/oauth2/authorization/google" class="btn btn-success active" role="button">Google Login</a>
                {{/MyUser}}
            </div>
        </div>
        <br>

🔗 {{^username}}

: username이 없다면, 스프링 시큐리티에서 기본으로 제공하는 로그인 url로 이동

 

 

📌 Controller에 세션 user name값 추가

private final HttpSession httpSession;

    @GetMapping("/")
    public String index(Model model)
    {
        List<Posts> postsList = postsRepository.findAllDesc();
        model.addAttribute("posts",postsList);

        //SessionUser에 저장한 로그인 정보
        SessionUser user = (SessionUser) httpSession.getAttribute("user");

        if(user!=null)
        {
             model.addAttribute("MyUser",user.getName());
        }

        return "index";
    }

 

*이때 주의할 점 *

window 사용자는 userName 이라는 변수가 시스템 변수 속에서 이미 사용되고 있으므로,

userName이라는 값으로 받으면 내 컴퓨터 사용자의 이름이 받아오게 된다.

userName말고 다른 변수(여기서는 MyUser) 로 값을 넘겨주자

---

📌 동작 확인

▼

구글 로그인

▼

---

네이버 로그인