如何使用angularjs登录到spring security

Posted 2023-02-27

【中文标题】如何使用angularjs登录到spring security

【英文标题】：how to use angularjs login to spring security

【发布时间】：2015-12-19 00:27:42

【问题描述】：

我想使用 angularjs 发送用户名和密码来登录 spring security 而不是普通的 login.jsp 。我有一些配置如下：

-security_config.xml

<http use-expressions="true" auto-config="true">
        <access-denied-handler error-page="/403page" />
        <anonymous enabled="false" />
        <intercept-url pattern="/api/**" access="hasRole('ROLE_USER')" />
        <custom-filter ref="resourceServerFilter" before="PRE_AUTH_FILTER" />
        <access-denied-handler ref="oauthAccessDeniedHandler" />
        <form-login login-page='/login' username-parameter="username"
            password-parameter="password" default-target-url="/api/users"
            authentication-failure-url="/login?authfailed" />
        <logout logout-success-url="/login?logout" />
    </http>
<authentication-manager alias="authenticationManager"
        xmlns="http://www.springframework.org/schema/security">
        <authentication-provider>
            <password-encoder ref="encoder" />
            <jdbc-user-service data-source-ref="dataSource"
                users-by-username-query="select username,password, enabled from users where username=?"
                authorities-by-username-query="select username, role from user_roles where username =?  " />
        </authentication-provider>
    </authentication-manager>
<beans:bean id="encoder"
        class="org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder">
        <beans:constructor-arg name="strength" value="10" />
    </beans:bean>

-LoginController.java

@RequestMapping("login")
    public ModelAndView getLoginForm(@RequestParam(required = false) String authfailed, String logout,String denied) 
        String message = "";
        if (authfailed != null) 
            message = "Invalid username of password, try again !";
         else if (logout != null) 
            message = "Logged Out successfully, login again to continue !";
         else if (denied != null) 
            message = "Access denied for this user !";
        
        return new ModelAndView("loginForm", "message", message);
    

    @RequestMapping("user")
    public String geUserPage() 
        return "user";
    

-loginForm.jsp

<form method="post" action="<c:url value='j_spring_security_check' />">

    <table>
                    <tr>
                        <td colspan="2" style="color: red">$message</td>

                    </tr>
                    <tr>
                        <td>User Name:</td>
                        <td><input type="text" name="username" />
                        </td>
                    </tr>
                    <tr>
                        <td>Password:</td>
                        <td><input type="password" name="password" />
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input type="submit" value="Login" />
                        </td>

                    </tr>
                </table>
            </form>

当我这样使用时，我可以正常登录，但我不想像上面的 loginForm.jsp 那样使用。我想通过angularjs使用restful web服务将用户名和密码发送到spring security进行登录。我能怎么做？请帮帮我！

【问题讨论】：

看看这个***.com/questions/20538619/…

我想使用 angularjs 而不是 ajax

【参考方案1】：

在您的示例中，您不需要控制器 (LoginController.java) 来处理安全性，Spring Security 会为您完成。删除此代码。

在 AngularJs 中你需要发送一个 POST 请求来登录。像这样：

        var data = "username="+username+"&password="+password+"&submit=Login";

        $http(
            method: 'POST',
            url: $window.domaineName + 'j_spring_security_check',
            data: data,
            headers: 
                'Content-Type': 'application/x-www-form-urlencoded',
              
        )  
        .success(function(data, status)
             //login success
        )
        .error(function(data, status)
            // login failure
        )

为了退出，你需要发送另一个 Http POST 请求：

       $http(
            method: 'POST',
            url: $window.domaineName + 'j_spring_security_logout',
        )  
        .success(function(data, status)
            // logout success
        )
        .error(function(data, status)
            // logout failure
        )

【讨论】：

谢谢你的回答，对不起，我想让你给我看整个页面登录angularjs

@BillBilal，你能看看我的post