最近在改写kibana，碰到了验证登录的问题。问题是这样子的，nginx设置了basic认证，然后客户端访问kibana的时候总是会弹出登录框，输入用户名和密码，现在要改写这个登陆框，用bootstrap来模拟一下登录验证。
最终效果：
解决方案：首先看到请求的返回status是401，也就是未授权，可以自己百度一下 `basic authentication`。我们需要在node端把401的错误码改成其他的，我这里改成了403。红色部分是我后来加上的，文件路径: `src/server/plugins/elasticsearch/lib/create_proxy.js`。这样就不会弹出难看的认证框了。
var createAgent = require('./create_agent');
var mapUri = require('./map_uri');
module.exports = function createProxy(server, method, route, opts) {
opts = opts || {};
var options = {
method: method,
path: route,
handler: {
proxy: {
mapUri: mapUri(server, opts.prefix),
passThrough: true,
agent: createAgent(server),
onResponse:function(err, res, request, reply, settings, ttl){
if(res.statusCode==401){
res.statusCode =403;
}
reply(res);
}
}
}
};
if (opts && opts.config) options.config = opts.config;
server.route(options);
};
解决了nodejs端的状态码问题，现在该处理前端的展示方面了。
看了kibana源码，这里引用了angularjs，那就好办了，我们可以利用$httpProvider这个服务来写一个拦截器。然后在request的时候，把本地存储的用户名和密码写到header中去，就模拟了basic验证。文件路径：src/kibana/plugins/kibana/index.js
// ensure that the kibana module requires ui.bootstrap
require('modules')
.get('kibana', ['ui.bootstrap','ngCookies'])
.config(function ($tooltipProvider) {
$tooltipProvider.setTriggers({ 'mouseenter': 'mouseleave click' });
})
.factory('HttpInterceptorFactory', ['$rootScope', '$cookieStore', '$q', function ($rootScope, $cookieStore, $q) {
return {
'request': function (httpConfig) {
var up = $cookieStore.get('usernameandpassword'); up && (httpConfig.headers.Authorization = "Basic " + up); return httpConfig;
}
};
}])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('HttpInterceptorFactory');
}])
.controller('LoginController',function($scope,$cookieStore,$modalInstance){
$scope.username="";
$scope.password="";
$scope.ok = function (user,psw) {
$cookieStore.put("usernameandpassword", btoa(user +":"+psw));
location.reload();
};
})
.directive('kibana', function (Private, $rootScope,$timeout, $cookieStore,$injector, Promise, config, kbnSetup,$modal) {
return {
template: require('text!plugins/kibana/kibana.html'),
controllerAs: 'kibana',
controller: function ($scope) {
var _ = require('lodash');
var self = $rootScope.kibana = this;
var notify = new Notifier({ location: 'Kibana' }); // this is the only way to handle uncaught route.resolve errors
$rootScope.$on('$routeChangeError', function (event, next, prev, err) {
if(err.origError.status==403){
// location.hash="#/passport/login";
self.doLogin();
return;
}
notify.fatal(err);
}); self.doLogin = function(){
var modalInstance = $modal.open({
template: require('text!plugins/kibana/login.html'),
controller: 'LoginController',
size: 'sm',
backdrop:'static'
});
modalInstance.result.then(function (selectedItem) { }, function () {
$log.info('Modal dismissed at: ' + new Date());
});
} // run init functions before loading the mixins, so that we can ensure that
// the environment is ready for them to get and use their dependencies
self.ready = Promise.all([ kbnSetup(), config.init() ])
.then(function () {
// load some "mixins"
var mixinLocals = { $scope: $scope, notify: notify };
$injector.invoke(require('plugins/kibana/_init'), self, mixinLocals);
$injector.invoke(require('plugins/kibana/_apps'), self, mixinLocals);
$injector.invoke(require('plugins/kibana/_timepicker'), self, mixinLocals); $scope.setupComplete = true;
});
}
};
});
<div class="modal-header">
<h3 class="modal-title">Login In</h3>
</div> <div class="modal-body">
<div class="form-group">
<label >Username</label>
<input style="border:1px solid;" type="text" ng-model="username" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<label >Password</label>
<input style="border:1px solid;" type="password" ng-model="password" class="form-control" placeholder="Password">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(username,password)">Login</button>
</div>
大功告成。我使用的kibana的版本是4.2.0，enjoy it。