Ein sekundäres Facebook-Login mit Spring Social

1. Übersicht

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 unserer pom.xml die Abhängigkeit von spring-social-facebook hinzufügen :

 org.springframework.social spring-social-facebook 2.0.3.RELEASE 

3. Sicherheitskonfiguration - Einfach Formular Login

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

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

Wir werden nicht viel Zeit mit dieser Konfiguration verbringen. Wenn Sie sie besser verstehen möchten, lesen Sie den Artikel zur Formularanmeldung.

4. Die Facebook-Eigenschaften

Als Nächstes konfigurieren wir die Facebook-Eigenschaften in unserer application.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, um appId und appSecret zu erhalten
  • Stellen Sie in den Facebook-Anwendungseinstellungen sicher, dass Sie die Plattform "Website" hinzufügen und // localhost: 8080 / die "Site-URL" ist.

5. 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 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); } }

Schauen wir uns die neue Konfiguration genau an:

  • Wir verwenden einen ProviderSignInController , um die Facebook-Authentifizierung zu aktivieren, für die zwei Dinge erforderlich sind:

    Zunächst wurde ein ConnectionFactoryLocator als FacebookConnectionFactory mit den zuvor definierten Facebook-Eigenschaften registriert .

    zweitens ein InMemoryUsersConnectionRepository .

  • Durch Senden eines POST an „ / signin / facebook “ initiiert dieser Controller eine Benutzeranmeldung über den Facebook-Dienstanbieter
  • Wir richten einen SignInAdapter ein , um die Anmeldelogik in unserer Anwendung zu verarbeiten
  • Außerdem richten wir ein ConnectionSignUp ein , um die implizite Anmeldung von Benutzern bei der ersten Authentifizierung bei Facebook zu handhaben

6. Der Anmeldeadapter

Einfach ausgedrückt ist dieser Adapter eine Brücke zwischen dem oben genannten Controller, 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 Rolle FACEBOOK_USER haben , während Benutzer, die mit dem Formular angemeldet sind, die Rolle USER haben.

7. Verbindungsanmeldung

Wenn sich ein Benutzer zum ersten Mal bei Facebook authentifiziert, 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 ein ConnectionSignUp 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, haben wir ein Konto für den neuen Benutzer erstellt, wobei dessen Anzeigename als Benutzername verwendet wurde.

8. Das Frontend

Schauen wir uns zum Schluss unser Frontend an.

Wir werden jetzt Unterstützung für diese beiden Authentifizierungsabläufe - Formular-Login und Facebook - auf unserer Anmeldeseite haben:

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

Endlich - hier ist die index.html :

Username

Logout

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 this quick article, we learned how to use spring-social-facebook to implement a secondary authentication flow for our application.

And of course, as always, the source code is fully available over on GitHub.