Login issue on Secure a ZK Application with Spring Security

asked 2022-05-11 16:43:39 +0800

manchen
151 ● 2

updated 2022-05-31 16:13:13 +0800

I follow this page

https://www.zkoss.org/wiki/ZKSpringEssentials/WorkingwithZKSpring/WorkingwithZKSpringSecurity/SecureaZKApplicationwithSpring_Security

but my login page is not work

this my java

package org.zkoss.zkspringboot.edc.config;

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.http.HttpMethod; import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; import org.springframework.security.core.userdetails.User; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetailsService; import org.springframework.security.provisioning.InMemoryUserDetailsManager; import org.zkoss.zkspringboot.edc.service.WebServiceAuthenticationProvider;

/* * This is an example of minimal configuration for ZK + Spring Security, we open as less access as possible to run a ZK-based application. * Please understand the configuration and modify it upon your requirement. */ @Configuration @EnableWebSecurity public class WebSecurityConfig extends WebSecurityConfigurerAdapter { private static final String ZUL_FILES = "/zkau/web//.zul"; private static final String ZKRESOURCES = "/zkres/"; // allow desktop cleanup after logout or when reloading login page private static final String REMOVEDESKTOPREGEX = "/zkau\?dtid=.*&cmd0=rmDesktop&.*";

/*
@Autowired
private WebServiceAuthenticationProvider authProvider;
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
    auth.authenticationProvider(authProvider);
}
 */
@Override
protected void configure(HttpSecurity http) throws Exception {
    // ZK already sends a AJAX request with a built-in CSRF token,
    // please refer to https://www.zkoss.org/wiki/ZK%20Developer's%20Reference/Security%20Tips/Cross-site%20Request%20Forgery
    http.csrf().disable();
    http.authorizeRequests()
        //.antMatchers(ZUL_FILES).denyAll() // block direct access to zul files
        .antMatchers(HttpMethod.GET, ZK_RESOURCES).permitAll() // allow zk resources
        .regexMatchers(HttpMethod.GET, REMOVE_DESKTOP_REGEX).permitAll() // allow desktop cleanup
        .requestMatchers(req -> "rmDesktop".equals(req.getParameter("cmd_0"))).permitAll() // allow desktop cleanup from ZATS
        .mvcMatchers("/","/login","/logout").permitAll()
        //.mvcMatchers("/secure").hasRole("USER")
        .anyRequest().authenticated()
        .and()
        .formLogin()
        .loginPage("/login").defaultSuccessUrl("/main")
        .and()
        .logout().logoutUrl("/logout").logoutSuccessUrl("/login");
}

/**
 * Creates an {@link InMemoryUserDetailsManager} for demo/testing purposes only. DON'T use this in production, see: {@link User#withUserDetails}!
 * @return userDetailsService
 */
@Bean
@Override
public UserDetailsService userDetailsService() {
    UserDetails user =
            User.withDefaultPasswordEncoder()
                    .username("user")
                    .password("password")
                    .roles("USER")
                    .build();

    return new InMemoryUserDetailsManager(user);
}

}

browser console print error mesaage

but I flush page is can work (F5)

This is my login.zul

<zk xmlns:n="http://www.w3.org/1999/xhtml" xmlns:z="zul">
<!-- External CSS libraries -->
<?link rel="stylesheet" type="text/css" href="~./assets/css/bootstrap.min.css?" ?>
<?link rel="stylesheet" type="text/css" href="~./assets/fonts/font-awesome/css/font-awesome.min.css" ?>
<?link rel="stylesheet" type="text/css" href="~./assets/fonts/flaticon/font/flaticon.css" ?>
<!-- Favicon icon -->
<?link rel="shortcut icon" href="~./assets/img/favicon.ico" type="image/x-icon" ?>

<!-- Google fonts -->
<?link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"?>

<!-- Custom Stylesheet -->
<?link type="text/css" rel="stylesheet" href="~./assets/css/style.css" ?>

<!-- External JS libraries -->
<script src="~./assets/js/jquery-3.6.0.min.js"></script>
<script src="~./assets/js/bootstrap.bundle.min.js"></script>
<script src="~./assets/js/jquery.validate.min.js"></script>
<script src="~./assets/js/app.js"></script>
<!-- Custom JS Script -->
<div class="login-6">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-8 col-lg-7 col-md-12 bg-img">
                <div class="info">
                    <div class="waviy">
                        <n:span style="color: #353535;--i:1">W</n:span>
                        <n:span style="color: #353535;--i:2">e</n:span>
                        <n:span style="color: #353535;--i:3">l</n:span>
                        <n:span style="color: #353535;--i:4">c</n:span>
                        <n:span style="color: #353535;--i:5">o</n:span>
                        <n:span style="color: #353535;--i:6">m</n:span>
                        <n:span style="color: #353535;--i:7">e</n:span>
                        <n:span style="color: #fea900;--i:8">t</n:span>
                        <n:span style="color: #fea900;--i:9">o</n:span>
                        <n:span style="color: #353535;--i:10">E</n:span>
                        <n:span style="color: #353535;--i:11">D</n:span>
                        <n:span style="color: #353535;--i:12">C</n:span>
                    </div>
                    <n:p>個資保護與營業秘密宣告依據政府頒佈之個人資料保護法與營業秘密法規範，本系統包含重要之個人資料、公司機密與營業秘密，請依所屬權責存取且妥善保管相關資料，並應遵守相關規定謹慎操作使用，以確保公司權益並避免觸法。若有踰越權責範圍或不當之蒐集、處理、利用或流通相關資料，將依公司規定及相關法律辦理，若因此造成公司或客戶之任何損害，並應負損害賠償責任</n:p>
                </div>
                <div class="bg-photo">
                    <!--
                    <img src="~./zul/assets/img/img-6.png" alt="bg" class="img-fluid">
                    -->
                </div>
            </div>
            <div class="col-xl-4 col-lg-5 col-md-12 bg-color-6">
                <div class="form-section">
                    <div class="logo">
                            <!--
                            <img src="~./zul/assets/img/logos/logo.png" alt="logo">
                            -->
                            <z:image src="~./assets/img/logos/logo-wt.png"  height="110px"/>
                    </div>
                    <n:h3>Welcome EDC System</n:h3>
                    <div class="login-inner-form">
                        <n:form action="/login" method="POST">
                            <div class="form-group clearfix">
                                <n:label for="username" class="form-label">User Name</n:label>
                                <div class="form-box">
                                    <n:input name="username"  class="form-control" id="username" placeholder="user name" aria-label="Email Address" value="user"></n:input>
                                    <n:i class="flaticon-mail-2"></n:i>
                                </div>
                            </div>
                            <div class="form-group clearfix">
                                <n:label for="password" class="form-label">Password</n:label>
                                <div class="form-box">
                                    <n:input name="password" type="password" class="form-control" autocomplete="off" id="password" placeholder="Password" aria-label="Password" value="password"/>
                                    <n:i class="flaticon-password"></n:i>
                                </div>
                            </div>
                            <div class="form-group clearfix mb-0">
                                <button type="submit" class="btn btn-primary btn-lg btn-theme">Login</button>
                            </div>
                        </n:form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</zk>