TOC

Ein sekundärer Facebook-Login mit Spring Social

Ein sekundäres Facebook-Login mit Spring Social

1. Überblick

In diesem Tutorial konzentrieren wir uns darauf, einer vorhandenen Formular-Login-App ein neues Facebook-Login hinzuzufügen.

Wir werden die Unterstützung von Spring Social nutzen, um mit Facebook zu interagieren und die Dinge sauber und einfach zu halten.

2. Maven-Konfiguration

Zuerst müssen wir die Abhängigkeit vonspring-social-facebookzu unserenpom.xmlhinzufügen: 


    org.springframework.social
    spring-social-facebook

3. Sicherheitskonfiguration - Einfach anmelden

Beginnen wir zunächst mit der einfachen Sicherheitskonfiguration, bei der wir nur eine formularbasierte Authentifizierung haben: 

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

Wir werden nicht viel Zeit mit dieser Konfiguration verbringen. Wenn Sie sie besser verstehen möchten, schauen Sie sichthe form login article an.

4. Sicherheitskonfiguration - Hinzufügen von Facebook

Fügen wir nun eine neue Methode zur Authentifizierung im System hinzu - gesteuert von 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());
    }
}

Schauen wir uns die neue Konfiguration genau an:

  • Wir verwendenProviderSignInController, um die Facebook-Authentifizierung zu aktivieren

  • Durch Senden vonPOST an „/signin/facebook“ initiiert dieser Controller eine Benutzeranmeldung über den Facebook-Dienstanbieter

  • Wir richtenSignInAdapter ein, um die Anmeldelogik in unserer Anwendung zu verarbeiten

  • Außerdem richten wirConnectionSignUp ein, um die Anmeldung von Benutzern bei der ersten Authentifizierung bei Facebook implizit zu handhaben

5. Der Anmeldeadapter

Einfach ausgedrückt, dieser Adapter ist eine Brücke zwischen dem Controller oben - der den Anmeldefluss für Facebook-Benutzer steuert - und unserer spezifischen lokalen Anwendung: 

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

Beachten Sie, dass Benutzer, die mit Facebook angemeldet sind, die RolleFACEBOOK_USERhaben, während Benutzer, die mit dem Formular angemeldet sind, die RolleUSER.haben

6. Verbindung anmelden

Wenn sich ein Benutzer zum ersten Mal bei Facebook anmeldet, ist in unserer Anwendung kein Konto vorhanden.

Dies ist der Punkt, an dem wir dieses Konto automatisch für sie erstellen müssen. Wir werden einConnectionSignUp verwenden, um diese Benutzererstellungslogik voranzutreiben: 

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

Wie Sie sehen können, haben wir ein Konto für den neuen Benutzer erstellt - mit dessenDisplayName als Benutzernamen.

7. Die Facebook-Eigenschaften

Als Nächstes konfigurieren wir die Facebook-Eigenschaften in unserenapplication.properties: 

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

Beachten Sie, dass:

  • Wir müssen eine Facebook-Anwendung erstellen, umappId undappSecret zu erhalten

  • Stellen Sie in den Facebook-Anwendungseinstellungen sicher, dass Sie die Plattform "Website" hinzufügen undhttp://localhost:8080/ die "Website-URL" ist.

8. Das Frontend

Schauen wir uns zum Schluss unser Frontend an.

Diese beiden Authentifizierungsabläufe - Formular-Login und Facebook - werden jetzt auf unserer Anmeldeseite unterstützt: 




You have been logged out


There was an error, please try again

Zum Schluss - hier sind dieindex.html: 






Welcome, Username


User authorities

Beachten Sie, wie auf dieser Indexseite Benutzernamen und Berechtigungen angezeigt werden.

Und das war's - wir haben jetzt zwei Möglichkeiten, uns bei der Anwendung zu authentifizieren.

9. Fazit

In diesem kurzen Artikel haben wir gelernt, wie Siespring-social-facebook verwenden, um einen sekundären Authentifizierungsfluss für unsere Anwendung zu implementieren.

Und natürlich ist der Quellcode wie immer inover on GitHub vollständig verfügbar.

Related