如何将 angular 9 登录页面连接到 Spring Boot 应用程序？

Question

I've successfully implemented spring security in the first user microservice, here is the configuration code:

   @EnableWebSecurity
    public class MSSecurityConfiguration extends WebSecurityConfigurerAdapter {
    
        @Autowired
        UserDetailsService userDetailsService;
        
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception {
            
            auth.userDetailsService(userDetailsService);
        }
        
        @Override
        public void configure(WebSecurity web) throws Exception {
            web.ignoring().antMatchers("/users/UserById/*")                   
                          .antMatchers("/users/Activate/**/");
        }
        
        @Bean
        public PasswordEncoder getPasswordEncoder() {
            return new BCryptPasswordEncoder();
        }

The full syntax from angular service is:

return this.http.get<UserObj>(`http://localhost:9023/users/Authenticate?username=aaa&password=bbb`

The user details service:

@Service
public class MSUserDetailsService implements UserDetailsService {

    @Autowired
    UserRepository userRepository;
    
    @Override
    public UserDetails loadUserByUsername(String userName) throws UsernameNotFoundException {
        
        User user = userRepository.getUser(userName);
        if (user != null) {
            return new MSUserDetails(user);
        }
        throw new UsernameNotFoundException("Not found: " + userName);      
    }

}

This is the controller which handle the service call from angular:

@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
@RestController
@RequestMapping("/users")
@Slf4j
public class UserController {
    @GetMapping("/Authenticate")    
        public User authenticatie(@RequestParam("username") String username, @RequestParam("password") String password) {
            return userService.authenticatie(username, password);       
        }

I need to know how connect this authentication to spring security so the next time user send different url it will be authincate already ?

Answer 1

The way that you set up urls is as if the spring boot handles also the frond end part of the application. Probably you got this code from a tutorial which if fine, but is not meant to be used for integration with a different frond end.

Even if the application runs on the same server probably the ports will be an issue, which I am not sure if you can over come.

You told me in the comment that you jave a RestController for the login, this is great because the idea is towards the right solution. This endpoint must take care of validating the user (against a db eventually, I see currently your are using static values) and return some kind of token to be stored in your angular (eg jwt).

The idea is the following, the angular login page must invoke a login endpoint created as a @RestController in spring-boot and return some kind ot token. Angular saves the token that is provided in the cookies or local storage. Then angular uses that for the requests against spring boot.

Then the endpoints of the spring boot that require authentication must be configured in the websecurity to do so. Read how to create filters for validation in spring boot and implement one.

Additional notice, probably you will need also to allow cors from angular to spring boot.