前端身份验证失败（Angular/Spring）

Posted 2023-02-27

【中文标题】前端身份验证失败（Angular/Spring）

【英文标题】：Authentication failed in the front end (Angular/Spring)

【发布时间】：2017-09-07 05:41:22

【问题描述】：

我的前端代码是基于这个链接http://embed.plnkr.co/toe4XO/，除了authentication/service.js文件，我把代码改成如下：

'use strict';

angular.module('Authentication')

.factory('AuthenticationService',
    ['Base64', '$http', '$cookieStore', '$rootScope', '$timeout',
    function (Base64, $http, $cookieStore, $rootScope, $timeout) 
        var service = ;

        service.Login = function (username, password, callback) 

            /* Dummy authentication for testing, uses $timeout to simulate api call
             ----------------------------------------------*/
            //$timeout(function()
            //    var response =  success: username === 'test' && password === 'test' ;
            //    if(!response.success) 
            //        response.message = 'Username or password is incorrect';
            //    
            //    callback(response);
            //, 1000);


            /* Use this for real authentication
             ----------------------------------------------*/
            $http.post('http://localhost:8080/AngularSpringBackend/authenticate',  username: username, password: password )
                .success(function (response) 
                    callback(response);
                );

        ;

        service.SetCredentials = function (username, password) 
            var authdata = Base64.encode(username + ':' + password);

            $rootScope.globals = 
                currentUser: 
                    username: username,
                    authdata: authdata
                
            ;

            $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; // jshint ignore:line
            $cookieStore.put('globals', $rootScope.globals);
        ;

        service.ClearCredentials = function () 
            $rootScope.globals = ;
            $cookieStore.remove('globals');
            $http.defaults.headers.common.Authorization = 'Basic ';
        ;

        return service;
    ])

.factory('Base64', function () 
    /* jshint ignore:start */

    var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';

    return 
        encode: function (input) 
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;

            do 
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);

                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;

                if (isNaN(chr2)) 
                    enc3 = enc4 = 64;
                 else if (isNaN(chr3)) 
                    enc4 = 64;
                

                output = output +
                    keyStr.charAt(enc1) +
                    keyStr.charAt(enc2) +
                    keyStr.charAt(enc3) +
                    keyStr.charAt(enc4);
                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";
             while (i < input.length);

            return output;
        ,

        decode: function (input) 
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;

            // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
            var base64test = /[^A-Za-z0-9\+\/\=]/g;
            if (base64test.exec(input)) 
                window.alert("There were invalid base64 characters in the input text.\n" +
                    "Valid base64 characters are A-Z, a-z, 0-9, '+', '/',and '='\n" +
                    "Expect errors in decoding.");
            
            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

            do 
                enc1 = keyStr.indexOf(input.charAt(i++));
                enc2 = keyStr.indexOf(input.charAt(i++));
                enc3 = keyStr.indexOf(input.charAt(i++));
                enc4 = keyStr.indexOf(input.charAt(i++));

                chr1 = (enc1 << 2) | (enc2 >> 4);
                chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
                chr3 = ((enc3 & 3) << 6) | enc4;

                output = output + String.fromCharCode(chr1);

                if (enc3 != 64) 
                    output = output + String.fromCharCode(chr2);
                
                if (enc4 != 64) 
                    output = output + String.fromCharCode(chr3);
                

                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";

             while (i < input.length);

            return output;
        
    ;

    /* jshint ignore:end */
);

还有我放入 IIS 文件夹的所有前端代码。我的后端代码需要基本身份验证才能访问 API，并且 url 在 localhost 的 8080 端口下，所有登录信息都已经存储在数据库中。

我的后端实现是 Spring/Hibernate，我使用 postman 对其进行了测试，它可以正常工作。现在，如果我尝试从前端页面单击登录按钮，登录页面会一直循环，并且控制台会出现以下错误： Error message from Chrome，我做错了什么？

预期的行为应该是当用户输入有效帐户时，它可以访问api，也可以进入主页。

这是我的后端代码在 github.com/zhengye1/SpringAngular

感谢您的帮助。

更新（2017 年 4 月 12 日） Github 代码根据以下评论进行更新。但我还是没有得到我想要的。

回复 Ajit Soman 的评论： 在邮递员中，当我粘贴我的 url 链接，例如http://localhost:8080/AngularSpringBackend/api/v1/users/，然后点击 Authorization ，选择 Type is Basic Auth，输入 admin/admin 作为用户名和密码，它返回用户列表，可以从数据库中检索.

看了https://samerabdelkafi.wordpress.com/2016/01/25/secure-angularjs-application-with-spring-security/后，我的理解是在service.js中，需要把post调用改成http://localhost:8080/AngularSpringBackend/authenticate。现在我在 Chrome 中输入http://localhost/SimpleTest/#/login，在登录页面中输入 admin/admin 作为用户名和密码，点击登录，spring security 将处理其余部分并使身份验证成功并路由到主页，但似乎不是这种情况，我误解了什么？

更新（2017 年 4 月 18 日） 终于得到我想要的，但它可能有安全问题。我做的方式是在'authentication/service.js'中，我改为 ``` service.Login = 函数（用户名、密码、回调） var base64Credentials = btoa(用户名 + ':' + 密码); console.log(base64Credentials);

            console.log(username + ":" + password);
            /* Dummy authentication for testing, uses $timeout to simulate api call
             ----------------------------------------------*/
            //$timeout(function()
            //    var response =  success: username === 'test' && password === 'test' ;
            //    if(!response.success) 
            //        response.message = 'Username or password is incorrect';
            //    
            //    callback(response);
            //, 1000);


            /* Use this for real authentication
             ----------------------------------------------*/
        var req = 
            method: 'POST',
            url: 'http://localhost:8080/AngularSpringBackend/login?username='+username ,
            headers: 
            'Authorization': 'Basic ' + base64Credentials,
            'Access-Control-Allow-Origin': '*',
            'content-type' : 'application/x-www-form-urlencoded'
            
        ;
    $http(req).then(function (response) 
    callback(response);

在我的后端，我需要添加一个控制器类，将“/login”路径映射到登录方法，使用路径变量获取用户名，指定方法为 POST 和 OPTIONS，一切正常。

除了我提到的方法之外，还有什么好的方法可以实现我想要的要求吗？

【参考方案1】：

在您的 corsFilter 中缺少 @Component 注释。所以请像这样添加@component

@Component
    public class CORSFilter implements Filter
        static final Logger logger = LoggerFactory.getLogger(CORSFilter.class);
        public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) 
                throws IOException, ServletException 
    ...

@Component 表示一个自动扫描组件，这会让你的 spring 容器自动扫描 CORSFilter。

【讨论】：

已经添加了，但是，在服务器控制台中，它仍然给了我 org.springframework.security.access.AccessDeniedException: Access is denied at org.springframework.security.access.vote.AffirmativeBased.decide (AffirmativeBased.java:84) 在 org.springframework.security.access.intercept.AbstractSecurityInterceptor.beforeInvocation(AbstractSecurityInterceptor.java:233) 在 org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:124 ) ...也许我还错过了什么？

我已经搜索过“/api/authenticate”，我在 securityConfiguration.java 中找到了它在那里看到的内容..你已经注释掉了 //.loginProcessingUrl("/api/authenticate") 你也是用角度击中 url-localhost:8080/AngularSpringBackend/api/authenticate。你能解释一下你为什么这样做吗？

所以我不应该注释掉那行？因为我不知道如何接近我想要的预期......你能给我一些建议吗？

请确认您是否能够使用邮递员访问您的登录 API。如果是这样，请告诉我网址和正文数据。如果您能够使用邮递员进行访问，那么使用 angularjs 访问 URL 将没有问题。