[Photogram] OAuth2 페이스북 로그인

• 이번시간에는 페이스북 로그인을 구현해보려고 합니다.

---

📝 의존성 추가

• OAuth2 로그인을 위해서는 우선 라이브러리가 필요합니다.

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

---

📝 앱 등록 및 앱 설정

• 다음으로 페이스북 개발자 사이트(https://developers.facebook.com/?locale=ko_KR)에 접속하여 로그인을 수행하고 아래와 같이 새로운 앱을 만들어주었습니다.

---

📝 application.yml

• 다음으로 위에서 생성한 앱 정보에 따라 아래와 같이 application.yml 파일에 해당 앱의 정보를 저장해줍니다.

spring:
  ...

  security:
    ...  

    oauth2:
      client:
        registration:
          facebook:
            client-id: 1749303502077922
            client-secret: c9d4c1f4a2614361e2849e0570246f72
            scope:
            - public_profile
            - email

---

📝 SecurityConfig

• 다음으로 Security 설정 클래스를 손봐주어야 합니다.

package com.cos.photogram.config;

...

@RequiredArgsConstructor
@EnableWebSecurity    //Security 활성화
@Configuration    //IoC
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    private final OAuth2DetailsService oAuth2DetailsService;

    ...

    //기존 Security의 기능을 모두 비활성화 시키고 기능을 직접 지정
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            ...
            .and()
            .oauth2Login()
            .userInfoEndpoint()    //OAuth2 로그인 시 최종응답으로 회원정보를 바로 받을 수 있음
            .userService(oAuth2DetailsService);
    }
}

---

📝 OAuth2DetailsService

• OAuth2 로그인 시에 응답을 받기 위해서는 OAuth2UserService 객체가 필요한데 이를 위해서 아래와 같이 클래스를 구현해주었습니다.

package com.cos.photogram.config.oauth;

...

@RequiredArgsConstructor
@Service
public class OAuth2DetailsService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oauth2User = super.loadUser(userRequest);
        Map<String, Object> userInfo = oauth2User.getAttributes();

        String username = "facebook_" + (String) userInfo.get("id");
        String password = new BCryptPasswordEncoder().encode(UUID.randomUUID().toString());
        String name = (String) userInfo.get("name");
        String email = (String) userInfo.get("email");

        User userEntity = userRepository.findByUsername(username);
        if(userEntity == null) {    //페이스북 최초 로그인 시 발생
            User user = User.builder()
                    .username(username)
                    .password(password)
                    .name(name)
                    .email(email)
                    .role("ROLE_USER")
                    .build();

            return new PrincipalDetails(userRepository.save(user), oauth2User.getAttributes());
        }

        return new PrincipalDetails(userEntity, oauth2User.getAttributes());
    }
}

• 해당 클래스는 DefaultOAuth2UserService를 상속받아 기본 OAuth2UserService 객체로 설정되었으며 해당 클래스의 loadUser() 메서드는 사용자가 OAuth2 로그인을 요청할 시 호출되는 메서드입니다.
• 해당 메서드에서는 userRequest로 받은 사용자 정보를 통해 User 객체를 자동으로 생성하고 만약 최초 로그인 사용자라면 자동으로 회원가입을 수행, 그렇지 않다면 바로 로그인을 수행하도록 구현되어있습니다.
• 또한 loadUser() 메서드는 OAuth2User 타입의 객체를 반환하도록 되어있으므로 이를 위해 PrincipalDetails 클래스가 OAuth2User 클래스를 상속받도록 하여 기존 회원가입, 로그인 방식과 동일한 객체를 저장하도록 구현해주었습니다.

package com.cos.photogram.config.auth;

...

@Data
public class PrincipalDetails implements UserDetails, OAuth2User {

    private static final long serialVersionUID = 1L;

    private User user;
    private Map<String, Object> attributes;

    ...

    public PrincipalDetails(User user, Map<String, Object> attributes) {
        this.user = user;
    }

    ...

    @Override
    public Map<String, Object> getAttributes() {
        return attributes;
    }

    @Override
    public String getName() {
        return (String) attributes.get("name");
    }

}

---

📝 View

• View 페이지에서는 소셜 로그인 버튼을 클릭할 시 자동으로 아래와 같은 주소를 응답하도록 설정해주었습니다. 여기서 '/oauth2/authorization/' 경로는 기본값으로, 그 이후에 나오는 경로(facebook)는 우리가 application.yml 파일에 설정한 소셜 이름에 따라 달라질 수 있습니다.

<!-- Oauth 소셜로그인 -->
<div class="login__facebook">
    <button onclick="javascript:location.href='/oauth2/authorization/facebook'">
        <i class="fab fa-facebook-square"></i>
        <span>Facebook으로 로그인</span>
    </button>
</div>
<!-- Oauth 소셜로그인end -->

---

📝 Result

• 이후 결과를 살펴보면 페이스북 로그인 절차가 잘 수행되는 것을 확인할 수 있습니다.

---

GitHub - Daegwon-Kim/SpringBoot-Photogram