Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

CSS não carrega após mapear "/login"

Referente ao curso Spring MVC: autenticação com Spring Security, API Rest e AJAX

por Reginaldo Junior
| 101.8k xp | 5 posts

Estou trabalhando em um projeto pessoal seguindo a arquitetuta e a metodologia que este curso oferece. Porém ao realizar a chamada da minha "/login" o meu css não carrega

Minha página de Login: src/main/resources/templates/login.html

<html>
<head>
    <link rel="icon" type="image/png" href="/css/img/favicon-original.ico">
    <link rel="stylesheet" type="text/css" href="/css/login/vendor/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/css/login/vendor/animate/animate.css">
    <link rel="stylesheet" type="text/css" href="/css/login/vendor/css-hamburgers/hamburgers.min.css">
    <link rel="stylesheet" type="text/css" href="/css/login/vendor/select2/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/css/login/index.css">
    <link rel="stylesheet" type="text/css" href="/css/login/util.css">
    <style>
        body {
            width: 100%;
            height: 100vh;
            background-position: 30% 45%;
            background-size: cover;
            background-image: url("/css/img/background.png");
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <div class="login100-pic js-tilt" data-tilt>
                    <img src="/css/img/logo-coruripe.png" alt="IMG">
                </div>
                <form th:action="@{/login}" method="POST" class="login100-form validate-form">

                    <span class="login100-form-title">Solicitação de Materiais</span> 
                    <div class="text-center p-t-12" style="color: red; font-weight: bold; padding-bottom: 20px" th:text="${error}"></div>
                    <div class="wrap-input100 validate-input">
                        <input class="input100" type="text" name="username" placeholder="Usuário"> <span class="focus-input100"></span>
                        <span class="symbol-input100"> 
                            <i class="fa fa-envelope" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input" data-validate="Password is required">
                        <input class="input100" type="password" name="password" placeholder="Senha"> 
                        <span class="focus-input100"></span>
                        <span class="symbol-input100"> 
                            <i class="fa fa-lock" aria-hidden="true"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn">
                        <button type="submit" class="login100-form-btn">Login</button>
                    </div>

                    <div class="text-center p-t-12">
                        <span class="txt1">Esqueceu</span> <a class="txt2" href="#">Usuário / Senha ?</a>
                    </div>

                    <div class="text-center p-t-136">
                        <a class="txt2" href="#">Solicite seu login<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i></a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="/js/login/jquery/jquery-3.2.1.min.js"></script>
    <script src="/js/login/bootstrap/popper.js"></script>
    <script src="/js/login/bootstrap/bootstrap.min.js"></script>
    <script src="/js/login/select2/select2.min.js"></script>
    <script src="/js/login/tilt/tilt.jquery.min.js"></script>
    <script>
        $('.js-tilt').tilt({
            scale : 1.1
        })
    </script>
</body>

</html>

Minha classe de segurança br.com.coruripe.configuration

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter  {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
        .anyRequest().authenticated()
        .and()
        .formLogin(form -> form
            .loginPage("/login")
            .permitAll()
        );
    }


    @Bean
    @Override
    public UserDetailsService userDetailsService() {
        UserDetails user = User.withDefaultPasswordEncoder()
                .username("admin")
                .password("admin")
                .roles("ADM")
                .build();

        return new InMemoryUserDetailsManager(user);
    }
}

Minha classe de Controladora br.com.coruripe.controllers

@Controller
public class LoginController {

    @GetMapping
    @RequestMapping("/login")
    public String login() {
        return "login";
    }
}
4 respostas
por RENAN DE SOUZA TORRES
| 249.4k xp | 48 posts

O spring security passou a bloquear a pasta resources também.

Eu resolvi o problema liberando o acesso as suas subpastas. Para isso, eu as incluí dentro da chamada antMatchers / permitAll() no arquivo WebSecurityConfig.

http
      .authorizeHttpRequests((requests) -> requests
        .antMatchers("/", "/home","/js/**","/static/**", "/css/**", "/images/**","/vendor/**","/fonts/**").permitAll()
        .anyRequest().authenticated()
      )
por Reginaldo Junior
| 101.8k xp | 5 posts

Ótimo, resolveu meu problema, só que apareceu outro, não estou conseguindo fazer requisições http via Ajax, no console do navegador a mensagem de erro é código 403 forbbiden, veja minha tentativa após algumas pesquisar na internet:

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .authorizeRequests((requests) -> requests
            .antMatchers("/js/**", "/css/**").permitAll()
            .antMatchers(HttpMethod.GET, "/solicitar/get-material-codigo").permitAll()
            .anyRequest().authenticated()
        )
        .formLogin(form -> form
            .loginPage("/login")
            .defaultSuccessUrl("/home", true)
            .permitAll()
        )
        .logout(logout -> logout.logoutUrl("/logout").permitAll());
    }

Tentei liberar o path solicitado, mas meu navegador ainda me responde "error 403 Forbbiden" Devo abrir outro tópico?

solução!
por RENAN DE SOUZA TORRES
| 249.4k xp | 48 posts

Também tive esse erro. Se quiser uma solução rápida pra continuar o curso. Eu resolvi desabilitando o .csrf do Spring Security.

No entanto pelo que pesquisei, o CSRF é uma proteção contra um tipo de ataque (Cross-Site Request Forgery). Logo, me parece que ainda pode haver alguma solução melhor sem precisar desabitá-lo. Não tive tempo de pesquisar outra solução ainda.

Ainda assim, não me parece um problema tão grande desabilitá-lo. Tendo vista, que esse recurso ainda nem existia na versão usada na aula.

Se optar por desabilitar o CSRF é só adicionar ".csrf().disable()" ao final do mesmo código da resposta anterior.

http
      .authorizeHttpRequests((requests) -> requests
        .antMatchers("/", "/home","/js/**","/static/**", "/css/**", "/images/**","/vendor/**","/fonts/**").permitAll()
        .anyRequest().authenticated()
      ).csrf().disable()
por RENAN DE SOUZA TORRES
| 249.4k xp | 48 posts

Encontrei uma solução melhor, sem desabilitar o csrf. 

    http
      .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
      .and()
      .authorizeHttpRequests((requests) -> requests
        .antMatchers("/", "/home","/js/**","/static/**", "/css/**", "/images/**","/vendor/**","/fonts/**").permitAll()
        .anyRequest().authenticated()
      )

Pro padrão MVC. Só precisa substituir o disable() por .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()).and()

https://www.youtube.com/watch?v=lOzQnC4tRRI

Nesse vídeo, o cara explica também como utilizar o token gerado pro csrf por uma aplicação exterior.