Menu
I want to build a Spring Boot application with clean Angular on frontend. My requirements are:
Those are pretty basic requirements but I'm lost with possibilities of securing web application. Is there any standard, recommended way of doing it? I really tried to follow tutorial from https://spring.io/guides/tutorials/spring-security-and-angular-js/ but it's so confusing due to mixing few possible solutions instead of describing one.
Thank you for any suggestions.
402
i had the same issue in my case i didn't use angularjs for my authentication , i used Thymleaf so first you need to make a configuration class
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import javax.sql.DataSource ;
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
Securityhandler successHandler ;
//this method to make datasource
@Autowired
public void GlobalConfig(AuthenticationManagerBuilder auth,DataSource dataSource) throws Exception {
auth.jdbcAuthentication()
.dataSource(dataSource)
.usersByUsernameQuery("SELECT \"user\" AS principal , \"Password\" AS credentials , true FROM \"usersss\" WHERE \"user\" = ? ")
.authoritiesByUsernameQuery("SELECT u.\"user\" AS principal , r.role as role FROM \"UTILISATEUR\" u ,\"Role\" r where u.id_role=r.id_role AND \"user\" = ? ");
}
//this one to ignore security for your ressources
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring()
.antMatchers("/bootstrap/**","/css/**");
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable()
.authorizeRequests()
.anyRequest()
.authenticated()
.and()
.formLogin()
//this one add to login page
.loginPage("/login")
.permitAll()
.successHandler(successHandler)
.and()
.logout()
.invalidateHttpSession(true)
.logoutUrl("/logout")
.permitAll();
}
}
now thymleaf had to resolve the page with the uri /login
so you need to add a viewresolver
you have to create another class like this one below
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class WebMVCconfig extends WebMvcConfigurerAdapter {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/login").setViewName("login");
registry.addViewController("/logout").setViewName("login");
}
}
finally in your html page under folder named templates you need to declare thymleaf in the doctype like this
<html xlmns:th="http://www.thymeleaf.org" xml:lang="fr">
and you finish with the login form
<form name="form" id="form" class="form-horizontal" th:action="@{/login}" method="post">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="username" type="text" class="form-control" name="username" value="" required="" placeholder="Nom de l'utilisateur"/>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" required="" placeholder="Mot de passe"/>
</div>
<div th:if="${param.error}" class="alert alert-default ">
<i class="glyphicon glyphicon-exclamation-sign"></i>
<b> Nom d'utilisateur et mot de passe invalide.</b>
</div>
<div th:if="${param.logout}" class="alert alert-default ">
<i class="glyphicon glyphicon-exclamation-sign"></i>
<b> Vous venez de déconnecter</b>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="submit" href="#" class="btn btn-success pull-right"><i class="glyphicon glyphicon-log-in"></i> Connéxion</button>
</div>
</div>
</form>
now spring security provides a lot of features like securing web services now if you want to use angularjs in your application you had to add sessions , if you understand what am trying to tell you this solution will provide a login page in every url you type once setup the login you had to make another front-end security with angularJs so can multiple users with different roles could not access privileges by changing urls
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
