问题描述
我想使用AngularJS将Grafana嵌入到我的Web应用程序中。目标是，当用户在我的应用程序中时，她应该能够单击按钮并加载Grafana UI。就其本身而言，这是一项简单的任务。为此，我有apache代理Grafana并返回任何必要的CORS头。 apache反向代理配置如下：
I want to embed Grafana into my web application using AngularJS. The goal is, when user is in my application, she should be able to click on a button and load the Grafana UI. In itself, this is an easy task. To do this, I have apache proxying Grafana and returning any necessary CORS headers. The apache reverse proxy config is as follows:
Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, Authorization, accept, client-security-token"
RewriteEngine on
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
RewriteCond %{REQUEST_METHOD} OPTIONS
ProxyPass / http://localhost:3000/
当不涉及任何安全问题时，所有工作都完美无缺。以下代码是一个简单的HTML / Javascript，显示我正在做的事情：
All works perfectly fine when no security is involved. The following code is a simple HTML/Javascript that shows what I am doing:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.11/minified/require.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<body >
<script>
var app = angular.module('myApp', []);
app.controller('MainCtrl', function ($scope, $http, $sce) {
$scope.trustSrc = function(src) {
console.log(src);
return $sce.trustAsHtml(src);
}
$http({
method : 'GET',
url : 'http://grafana-host.com',
}).success(function(response) {
$("#test").attr('src', 'http://grafana-host.com')
$("#test").contents().find('html').html(response);
}).error(function(error) {
console.log(error);
});
});
</script>
<div ng-app="myApp" ng-controller="MainCtrl">
<iframe id="test" style="position: absolute; top: 50px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden;"></iframe>
现在的挑战是，一旦登录我的应用程序，用户就不必登录Grafana再次。
The challenge now is that once logged in into my application, user should not have to log in into Grafana again.
要解决此问题，我将Grafana设置为使用Basic Auth。我的目标是让我的网络应用程序通过浏览器将基本身份验证传递给Grafana。基本上，当用户点击按钮打开Grafana时，我会通过AngularJS发出请求。此请求将包括加载Grafana所需的Authorization标头。为此，我在url字段后用http博客扩充上面的代码段：
To resolve this issue, I set up Grafana to use Basic Auth. My goal is for my web app to pass basic auth to Grafana via the browser. Basically, when the user clicks on the button to open Grafana, I would issue a request via AngularJS. This request would include the required Authorization header to load Grafana. To do this, I augment the above code segment with the http blog after the url field:
headers : {
'Authorization' : 'Basic YWRtaW46YWRtaW4='
}
此外，在成功回调函数中，我将第一条指令替换为：
Also, in the success callback function, I replace the first instruction with:
$("#test").attr('src',"data:text/html;charset=utf-8," + escape(response))
不幸的是，我不知道似乎能够让这个工作。
Unfortunately, I do not seem to be able to get this to work.
我知道这应该有效，因为我可以使用Chrome浏览器的ModHeader扩展模拟这种行为。如果我在ModHeader中放置以下标题：授权：基本YWRtaW46YWRtaW4 =，它将加载Grafana而无需登录。如果我删除了Authorization标头，系统会再次提示我输入登录名和密码。
I know this should work because I can simulate this behavior with ModHeader extension of Chrome browser. If I put the following header in ModHeader: Authorization: Basic YWRtaW46YWRtaW4=, it loads Grafana from without need to log in. And if I remove the Authorization header, I am prompted for login name and password again.
grafana更改非常简单：
The grafana changes are pretty simple:
[auth.basic]
enabled = true
我缺少什么？我猜这是一个AngularJS / Javascript的东西。
What am I missing? My guess is this is an AngularJS/Javascript thing.
推荐答案
在编写问题时不知道这是否是一个选项，但我们做得非常成功通过注入API令牌进行授权（）。
Don't know if this is an option at the time the question was written, but we're doing this quite successfully by injecting an API token for authorization (http://docs.grafana.org/http_api/auth/).
这篇关于将安全的Grafana嵌入到Web应用程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！