为什么 PicketLink 会导致使用 Token 进行基本浏览器身份验证？答案

【问题标题】：Why does PicketLink cause a Basic Browser authentication using Token?为什么 PicketLink 会导致使用 Token 进行基本浏览器身份验证？
【发布时间】：2015-03-10 12:47:34
【问题描述】：

我有一个使用 PicketLin (stateless)k + WildFly + Angular 的简单登录系统。

问题是：当我输入错误的密码时，服务器会向我发送标头：

WWW-Authenticate:Basic realm="PicketLink Default Realm"

这会导致浏览器打开基本身份验证窗口。我需要使用表单，而不是默认的浏览认证窗口；我试图在角度创建一个拦截器来尝试停止，但是浏览器在任何事情之前都会拦截并解释标题。

这是PicketLink的配置：

SecurityConfigurationBuilder builder = event.getBuilder();
builder.identity().stateless().http()
        .forPath("/api/*").authenticateWith().token();

这是 Realm 的代码和证书（用于生成令牌）代码：（无关的方法省略）

...
private void createDefaultPartition(PartitionManager partitionManager) {

    Realm partition = partitionManager.getPartition(Realm.class, Realm.DEFAULT_REALM);

    if (partition == null) {
        try {
            partition = new Realm(Realm.DEFAULT_REALM);
            partition.setAttribute(new Attribute<byte[]>("PublicKey", getPublicKey()));
            partition.setAttribute(new Attribute<byte[]>("PrivateKey",getPrivateKey()));
            partitionManager.add(partition);
        } catch (Exception e) {
            //log...
        }
    }
}


public void createAdminAccount(PartitionManager partitionManager) {
    IdentityManager identityManager = partitionManager.createIdentityManager();
    User user = new User("symon");
    user.setEmail("symoncc@gmail.com");
    user.setFirstName("Symon");
    user.setLastName("Lopes");
    identityManager.add(user);
    identityManager.updateCredential(user, new Password("123456"));
}

登录代码：

...
<body ng-app="app" >
    <div ng-controller="LoginController">

        <label>Usuário</label><br />
        <input type="text" id="usuario" ng-model="usuario.nome" /> <br />

        <label>Senha</label><br />
        <input type="text" id="senha" ng-model="usuario.senha" /> <br />

        <input type="button" value="logar" ng-click="logar()" />

        <div ng-show="loginResult">
            {{loginResult}}
        </div>
    </div>
</body>
...

应用js代码：

  (function(){

var app = angular.module('app',['ngRoute']);
var session = {};

app.config(['$routeProvider',function($routeProvider) {
    $routeProvider
        .when('/protected', {templateUrl:'partials/protected.html', controller: 'ProtectedController' })
}]);


app.controller('LoginController', ['$scope','$http',function($scope,$http) {
    $scope.usuario =  {nome:'symon', senha:'123456'};

    $scope.logar = function(){
        //$http.defaults.headers.common.Authorization = 'Basic ' + btoa($scope.usuario.nome + ':' + $scope.usuario.senha);
        $http.post('api/private/authc', {},{headers: { 'Authorization' : 'Basic ' + btoa($scope.usuario.nome + ':' + $scope.usuario.senha) }})
            .success(function(auth){
                $scope.loginResult = 'Autenticação efetuada com sucesso';
                session.token =auth.authctoken
                $http.get('api/pessoas',{headers: { 'Authorization' : 'Token ' +  session.token }}).success(
                        function(dados){
                            console.log(dados);
                        });             
            })
            .error(function(data){
                $scope.loginResult = 'Falha ao tentar fazer login: ' + data;                    
            });
    };      
}]);

})();

【问题讨论】：

标签： angularjs picketlink

【解决方案1】：

要开始工作，您应该在登录资源中添加另一个标题，如下所示："X-Requested-With": "XMLHttpRequest"。像这样修改你的 Angular security.js 文件：

.factory('LoginResource', ['$resource', function($resource) {  
   return function(newUser) {  
   return $resource('rest/private/:dest', {}, {  
   login: {method: 'POST', params: {dest:"authc"}, headers:{"Authorization": "Basic " + btoa(newUser.userId + ":" + newUser.password), "X-Requested-With": "XMLHttpRequest"  
   } }  
  });  
}}]);

我希望这会有所帮助。 ;)

【讨论】：