1. 개요

이 사용방법(예제)에서는 기존 양식 로그인 앱에 새 Facebook 로그인을 추가하는 데 중점을 둡니다.

우리는 Spring Social 지원을 사용하여 Facebook과 상호 작용하고 일을 깨끗하고 단순하게 유지할 것입니다.

2. Maven 구성

먼저 pom.xml 에 spring-social-facebook 의존성을 추가해야합니다 .

<dependency>
    <groupId>org.springframework.social</groupId>
    <artifactId>spring-social-facebook</artifactId>
    <version>2.0.3.RELEASE</version>
</dependency>

3. Security 구성 – Just Form 로그인

양식 기반 인증 만있는 간단한 Security 구성부터 시작하겠습니다.

@Configuration
@EnableWebSecurity
@ComponentScan(basePackages = { "com.baeldung.security" })
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private UserDetailsService userDetailsService;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) 
      throws Exception {
        auth.userDetailsService(userDetailsService);
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .csrf().disable()
        .authorizeRequests()
        .antMatchers("/login*").permitAll()
        .anyRequest().authenticated()
        .and()
        .formLogin().loginPage("/login").permitAll();
    } 
}

우리는이 구성에 많은 시간을 할애하지 않을 것입니다. 더 잘 이해하고 싶다면 양식 로그인 문서를 참조하십시오 .

4. 페이스 북 속성

다음으로 application.properties 에서 Facebook 속성을 구성 해 보겠습니다 .

spring.social.facebook.appId=YOUR_APP_ID
spring.social.facebook.appSecret=YOUR_APP_SECRET

참고 :

  • appId 및 appSecret 을 얻으려면 Facebook 애플리케이션을 만들어야합니다.
  • Facebook 애플리케이션 설정에서 플랫폼 "웹 사이트"를 추가하고 http : // localhost : 8080 / 이 "사이트 URL"인지 확인합니다.

5. Security 구성 – Facebook 추가

이제 Facebook에 의해 구동되는 시스템에 인증하는 새로운 방법을 추가해 보겠습니다.

public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private FacebookConnectionSignup facebookConnectionSignup;

    @Value("${spring.social.facebook.appSecret}")
    String appSecret;
    
    @Value("${spring.social.facebook.appId}")
    String appId;
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .authorizeRequests()
        .antMatchers("/login*","/signin/**","/signup/**").permitAll()
        ...
    } 

    @Bean
    public ProviderSignInController providerSignInController() {
        ConnectionFactoryLocator connectionFactoryLocator = 
            connectionFactoryLocator();
        UsersConnectionRepository usersConnectionRepository = 
            getUsersConnectionRepository(connectionFactoryLocator);
        ((InMemoryUsersConnectionRepository) usersConnectionRepository)
            .setConnectionSignUp(facebookConnectionSignup);
        return new ProviderSignInController(connectionFactoryLocator, 
            usersConnectionRepository, new FacebookSignInAdapter());
    }
    
    private ConnectionFactoryLocator connectionFactoryLocator() {
        ConnectionFactoryRegistry registry = new ConnectionFactoryRegistry();
        registry.addConnectionFactory(new FacebookConnectionFactory(appId, appSecret));
        return registry;
    }
    
    private UsersConnectionRepository getUsersConnectionRepository(ConnectionFactoryLocator 
        connectionFactoryLocator) {
        return new InMemoryUsersConnectionRepository(connectionFactoryLocator);
    }
}

새 구성을 자세히 살펴 보겠습니다.

  • 우리가 사용하고있는  ProviderSignInController을  : 두 가지가 필요로하는 페이스 북 인증을 활성화하려면
    먼저  ConnectionFactoryLocator는  A와 등록  FacebookConnectionFactory 우리가 이전에 정의 된 페이스 북의 특성을.
    둘째,  InMemoryUsersConnectionRepository .
  • " / signin / facebook "에 POST 를 전송하여 –이 컨트롤러는 Facebook 서비스 제공 업체를 사용하여 사용자 로그인을 시작합니다.
  • 애플리케이션에서 로그인 로직을 처리 하기 위해 SignInAdapter 를 설정하고 있습니다.
  • 또한 사용자가 Facebook에서 처음 인증 할 때 암시 적으로 사용자 등록을 처리 하도록 ConnectionSignUp 을 설정합니다.

6. 로그인 어댑터

간단히 말해,이 어댑터는 위의 컨트롤러 (Facebook 사용자 로그인 흐름을 주도)와 특정 로컬 애플리케이션 사이의 다리 역할을합니다.

public class FacebookSignInAdapter implements SignInAdapter {
    @Override
    public String signIn(
      String localUserId, 
      Connection<?> connection, 
      NativeWebRequest request) {
        
        SecurityContextHolder.getContext().setAuthentication(
          new UsernamePasswordAuthenticationToken(
          connection.getDisplayName(), null, 
          Arrays.asList(new SimpleGrantedAuthority("FACEBOOK_USER"))));
        
        return null;
    }
}

Facebook 을 사용하여 로그인 한 사용자에게는 FACEBOOK_USER 역할이있는 반면 양식을 사용하여 로그인 한 사용자에게는 USER 역할이 있습니다 .

7. 연결 등록

사용자가 처음으로 Facebook으로 인증하면 애플리케이션에 기존 계정이 없습니다.

여기에서 자동으로 해당 계정을 만들어야합니다. 사용자 생성 로직을 구동하기 위해 ConnectionSignUp 을 사용할 것입니다 .

@Service
public class FacebookConnectionSignup implements ConnectionSignUp {

    @Autowired
    private UserRepository userRepository;

    @Override
    public String execute(Connection<?> connection) {
        User user = new User();
        user.setUsername(connection.getDisplayName());
        user.setPassword(randomAlphabetic(8));
        userRepository.save(user);
        return user.getUsername();
    }
}

보시다시피, DisplayName 을 사용자 이름으로 사용하여 새 사용자의 계정을 만들었습니다 .

8. 프런트 엔드

마지막으로 프런트 엔드를 살펴 보겠습니다.

이제 로그인 페이지에서 양식 로그인과 Facebook의 두 가지 인증 흐름을 지원할 것입니다.

<html>
<body>
<div th:if="${param.logout}">You have been logged out</div>
<div th:if="${param.error}">There was an error, please try again</div>

<form th:action="@{/login}" method="POST" >
    <input type="text" name="username" />
    <input type="password" name="password" />
    <input type="submit" value="Login" />
</form>
	
<form action="/signin/facebook" method="POST">
    <input type="hidden" name="scope" value="public_profile" />
    <input type="submit" value="Login using Facebook"/>
</form>
</body>
</html>

마지막으로 다음은 index.html입니다 .

<html>
<body>
<nav>
    <p sec:authentication="name">Username</p>      
    <a th:href="@{/logout}">Logout</a>                     
</nav>

<h1>Welcome, <span sec:authentication="name">Username</span></h1>
<p sec:authentication="authorities">User authorities</p>
</body>
</html>

이 색인 페이지에 사용자 이름과 권한이 어떻게 표시되는지 확인하십시오.

그게 다입니다. 이제 애플리케이션을 인증하는 두 가지 방법이 있습니다.

9. 결론

이 빠른 기사에서는 spring-social-facebook 을 사용하여 애플리케이션에 대한 보조 인증 흐름을 구현하는 방법을 배웠습니다 .

물론 항상 그렇듯이 소스 코드는 GitHub에서 완전히 사용할 수 있습니다 .