Secure your Angular 7 application with Spring Security and enable LDAP authentication for added protection

Question

Secure your Angular 7 application with Spring Security and enable LDAP authentication for added protection

Having a significant issue, I've been stuck for days trying to figure out how to make my login app functional. I need it to send the username and password to Spring Boot for validation. Although I have the basic setup in place using Spring Boot's loginForm, I'm quite new to programming with Spring Boot as I was previously working with NodeJS. My aim is to authenticate users via LDAP in the backend using Spring Security instead of Pure Java (which would be simpler). This involves handling HTTP Requests (Endpoints).

Here's what I currently have:

// WebSecurityConfiguration

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            .authorizeRequests()
            .anyRequest().fullyAuthenticated()
            .and()
            .formLogin()
            .loginPage("/test").permitAll()
            .usernameParameter("_username_")
            .passwordParameter("_password_")
            .and()
            .csrf()
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
}

@Override
public void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth
            .ldapAuthentication()
            .userDnPatterns("uid={0},ou=people")
            .groupSearchBase("ou=groups")
            .contextSource()
            .url("ldap://localhost:8389/dc=springframework,dc=org")
            .and()
            .passwordCompare()
            .passwordEncoder(new LdapShaPasswordEncoder())
            .passwordAttribute("userPassword");

}

@Bean
public DefaultSpringSecurityContextSource contextSource() {
    return new DefaultSpringSecurityContextSource(Arrays.asList("ldap://localhost:8389/"), "dc=springframework,cd=org");
}

I opted to use Gradle due to company standards, so here's the build.gradle:

// build.gradle

    plugins {
    id 'org.springframework.boot' version '2.1.2.RELEASE'
    id 'java'
}

apply plugin: 'io.spring.dependency-management'


group = 'net.company'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-data-ldap'
    // other dependencies...
}

Below is my current app.component.ts where I imported HttpClientModule and added it to imports:

// app.component.ts

import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http';

// rest of the code...

View Login App Look

// login.component.html

    <div id="container"
     fxLayout="column"
     fxLayoutAlign="start center">
  <div class="spacer" fxFlex="10%"></div>
  <div id="login" fxFlex="25%"
       fxLayout="column"
       fxLayoutAlign="start center">
    <h1 id="loginTitle" fxFlex="35%">LOGIN</h1>
    // form structure...
  </div>
  // more template code...
</div>

For those requiring information on LDAP configurations, refer to application.properties:

// application.properties

spring.ldap.embedded.ldif=classpath:test-server.ldif
spring.ldap.embedded.base-dn=dc=springframework,dc=org
spring.ldap.embedded.port=8389
server.servlet.context-path=/
server.port=8082

If more details or files are needed, feel free to reach out. I'll update this post once a solution is found for better understanding by beginners.

java angular spring typescript ldap

Answer 1

Answer №1

To solve your issue, consider implementing a custom filter. I suggest reviewing the Spring Security Documentation, specifically point 9.

For HTTP and REST operations, you'll need a JWT library to manage tokens between Angular and your Spring backend.

You can customize the

UsernamePasswordAuthenticationFilter

by implementing the attemptAuthentication and successfulAuthentication methods.

Firstly, verify if the submitted username and password are correct:

 try {
      LoginDto loginDto = new ObjectMapper().readValue(request.getInputStream(), LoginDto.class);
      if (getAuthenticationManager() == null) logger.warn("Authentication manager is null!");
      return getAuthenticationManager()
          .authenticate(
              new UsernamePasswordAuthenticationToken(
                  loginDto.getEmail(), loginDto.getPassword(), new ArrayList<>()));
    } catch (IOException e) {
      logger.warn(e.getMessage());
    }
    throw new AuthenticationServiceException("Credentials are invalid");

Next, generate a token for your Angular client for future authentication with your backend:

 String userName = authResult.getName();
    try {
      User user = userService.findUserByUserName(userName);

      // Add logic for handling user account lockout

      List<String> authorities = new ArrayList<>();
      user.getAuthorities().forEach(e -> authorities.add(e.getAuthority()));
      Map<String, Object> claims = new LinkedHashMap<>();

      // Include user details in the token

      String token =
          Jwts.builder()
              .setSubject(user.getId())
              .addClaims(claims)
              .setExpiration(
                  new Date(System.currentTimeMillis() + Long.parseLong(jwtConfig.getExpiration())))
              .signWith(SignatureAlgorithm.HS512, jwtConfig.getSecret())
              .compact();
      response.setHeader("Access-Control-Expose-Headers", "Authorization");
      response.setHeader("Authorization", "Bearer " + token);

      userService.successfulLogin(user);
      userService.resetLoginAttempts(user);

    } catch (NotFoundException e) {
      logger.warn(e.getMessage());
    }
  }

Don't forget to add this filter to your http configuration:

        Collections.singletonList(daoAuthenticationProvider()));
    AuthenticationFilter filter =  new AuthenticationFilter(userService,manager, mapper, jwtConfig);
    filter.setFilterProcessesUrl("/login");

    http.authorizeRequests().antMatchers("/**").permitAll()
        .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
        .and().addFilter(filter);

Answer 2

To solve your issue, consider implementing a custom filter. I suggest reviewing the Spring Security Documentation, specifically point 9.

For HTTP and REST operations, you'll need a JWT library to manage tokens between Angular and your Spring backend.

You can customize the

UsernamePasswordAuthenticationFilter

by implementing the attemptAuthentication and successfulAuthentication methods.

Firstly, verify if the submitted username and password are correct:

 try {
      LoginDto loginDto = new ObjectMapper().readValue(request.getInputStream(), LoginDto.class);
      if (getAuthenticationManager() == null) logger.warn("Authentication manager is null!");
      return getAuthenticationManager()
          .authenticate(
              new UsernamePasswordAuthenticationToken(
                  loginDto.getEmail(), loginDto.getPassword(), new ArrayList<>()));
    } catch (IOException e) {
      logger.warn(e.getMessage());
    }
    throw new AuthenticationServiceException("Credentials are invalid");

Next, generate a token for your Angular client for future authentication with your backend:

 String userName = authResult.getName();
    try {
      User user = userService.findUserByUserName(userName);

      // Add logic for handling user account lockout

      List<String> authorities = new ArrayList<>();
      user.getAuthorities().forEach(e -> authorities.add(e.getAuthority()));
      Map<String, Object> claims = new LinkedHashMap<>();

      // Include user details in the token

      String token =
          Jwts.builder()
              .setSubject(user.getId())
              .addClaims(claims)
              .setExpiration(
                  new Date(System.currentTimeMillis() + Long.parseLong(jwtConfig.getExpiration())))
              .signWith(SignatureAlgorithm.HS512, jwtConfig.getSecret())
              .compact();
      response.setHeader("Access-Control-Expose-Headers", "Authorization");
      response.setHeader("Authorization", "Bearer " + token);

      userService.successfulLogin(user);
      userService.resetLoginAttempts(user);

    } catch (NotFoundException e) {
      logger.warn(e.getMessage());
    }
  }

Don't forget to add this filter to your http configuration:

        Collections.singletonList(daoAuthenticationProvider()));
    AuthenticationFilter filter =  new AuthenticationFilter(userService,manager, mapper, jwtConfig);
    filter.setFilterProcessesUrl("/login");

    http.authorizeRequests().antMatchers("/**").permitAll()
        .and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
        .and().addFilter(filter);

Secure your Angular 7 application with Spring Security and enable LDAP authentication for added protection

Answer №1

Similar questions

Attempting to utilize FirefoxProfile via GeckoDriver with Selenium on Mac OS X resulted in an unexpected error message stating "unknown error" with further details indicating that the connection was refused

End the Angular RxJS stopwatch after a specified number of seconds

Tips for effectively passing an array to props in Vue when leveraging Typescript and the class component decorator

Encountering an issue while creating an Ionic v6 Cordova Android Angular13 application, the error message "Project target does not exist" is displayed, indicating an unhandled exception

What is the best way to create a write function that is not located in the main function?

Guide to utilizing props conditionally in a Material UI TextField component

Angular 9 date input and selection

Exploring Java Swing GUI Elements: A Guide to Marathon OSS Inspection

Can a custom directive be set up for two-way binding with ngModel in Angular?

Centralizing Tab Components with Angular 4's Material 2

What methods can be used to test included content in Angular?

Replace Angular Material Component with a new custom component in Angular

Ways to display or conceal a component based on the current component being used

TypeScript: Unable to retrieve values or keys from a Map data structure

Discovering the Absent Elements within a specified sequence array list using java

Transforming "datetime-local" into java.sql.Timestamp

Error in Typescript regarding inheritance and the usage of static methods in classes

Issues encountered with Navbar Links functionality while running on localhost in .jsp files

RecyclerView appears to be failing to display its contents

Encountering the error "TS(2604): JSX element type 'App' does not have any construct or call signatures" while trying to export an array of JSX Elements