Um login secundário no Facebook com o Spring Social

Um login secundário no Facebook com o Spring Social

1. Visão geral

Neste tutorial, vamos nos concentrar em adicionar um novo login do Facebook a um aplicativo de login de formulário existente.

Usaremos o suporte do Spring Social para interagir com o Facebook e manter as coisas limpas e simples.

2. Configuração do Maven

Primeiro, precisaremos adicionar a dependênciaspring-social-facebook ao nossopom.xml:


    org.springframework.social
    spring-social-facebook

3. Configuração de segurança - Just Form Login

Vamos primeiro começar com a configuração de segurança simples, onde temos apenas a autenticação baseada em formulário:

@Configuration
@EnableWebSecurity
@ComponentScan(basePackages = { "org.example.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();
    }
}

Não vamos gastar muito tempo com esta configuração - se você quiser entendê-la melhor, dê uma olhada emthe form login article.

4. Security Config - Adicionando Facebook

Agora, vamos adicionar uma nova forma de autenticação no sistema - conduzida pelo Facebook:

public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private ConnectionFactoryLocator connectionFactoryLocator;

    @Autowired
    private UsersConnectionRepository usersConnectionRepository;

    @Autowired
    private FacebookConnectionSignup facebookConnectionSignup;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .authorizeRequests()
        .antMatchers("/login*","/signin/**","/signup/**").permitAll()
        ...
    }

    @Bean
    public ProviderSignInController providerSignInController() {
        ((InMemoryUsersConnectionRepository) usersConnectionRepository)
          .setConnectionSignUp(facebookConnectionSignup);

        return new ProviderSignInController(
          connectionFactoryLocator,
          usersConnectionRepository,
          new FacebookSignInAdapter());
    }
}

Vejamos com atenção a nova configuração:

  • estamos usando umProviderSignInController para habilitar a autenticação do Facebook

  • enviando umPOST para “/signin/facebook” - este controlador iniciará um login do usuário usando o provedor de serviços do Facebook

  • estamos configurando umSignInAdapter para lidar com a lógica de login em nosso aplicativo

  • e também configuramos umConnectionSignUp para lidar com a inscrição de usuários implicitamente quando eles se autenticam pela primeira vez no Facebook

5. O adaptador de entrada

Simplificando, esse adaptador é uma ponte entre o controlador acima - direcionando o fluxo de entrada do usuário do Facebook - e nosso aplicativo local específico:

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;
    }
}

Observe que os usuários logados usando o Facebook terão a funçãoFACEBOOK_USER, enquanto os usuários logados usando o formulário terão a funçãoUSER.

6. Conexão Conexão

Quando um usuário se autentica no Facebook pela primeira vez, ele não possui uma conta existente em nosso aplicativo.

Este é o ponto em que precisamos criar essa conta automaticamente para eles; vamos usar umConnectionSignUp para conduzir essa lógica de criação de usuário:

@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();
    }
}

Como você pode ver, criamos uma conta para o novo usuário - usandoDisplayName como nome de usuário.

7. As propriedades do Facebook

A seguir, vamos configurar as propriedades do Facebook em nossoapplication.properties:

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

Observe que:

  • Precisamos criar um aplicativo do Facebook para obterappIdeappSecret

  • Nas configurações do aplicativo do Facebook, certifique-se de Adicionar "Site" da plataforma ehttp://localhost:8080/ é o "URL do site"

8. O front end

Finalmente, vamos dar uma olhada em nosso front end.

Agora vamos ter suporte para esses dois fluxos de autenticação - login de formulário e Facebook - em nossa página de login:



You have been logged out
There was an error, please try again

Finalmente - aqui está oindex.html:





Welcome, Username

User authorities

Observe como esta página de índice está exibindo nomes de usuários e autoridades.

E é isso - agora temos duas maneiras de autenticar no aplicativo.

9. Conclusão

Neste artigo rápido, aprendemos como usarspring-social-facebook para implementar um fluxo de autenticação secundário para nosso aplicativo.

E, claro, como sempre, o código-fonte está totalmente disponívelover on GitHub.