apiauthenticationgetgrafanagrafana-api

Automatic Authentication using Grafana API

In my web application, I want to provide the ability to pass authenticated users from my dashboard across to Grafana.

Once a user logged in my dashboard using credentials, a link to Grafana Dashboard will be displayed on my application. When user clicks that link, he/she will be redirected to Grafana page and automatically log in without displaying the Grafana login page. I don't want my users must encounter a second login screen, where they will be confused as to what username/password to enter.

I've followed Automatic login to grafana from web application, Auto login to grafana dashboard, Auto login to grafana from Web application using credentials or token and Automatic login by token url, but no luck. I couldn't find appropriate & clean solution.

I'm using Grafana v6.2.5 installed on Ubuntu Server 18.04.

How can I implement it? Any help would be appreciated.

Server Details: Ubuntu Server 18.04, Apache 2.4.29

Solution

  • After some digging, I've found a workaround using Grafana's Generic OAuth Authentication.

    Step 1: Create files with the following code in it.

    GrafanaOAuth.php:

    <?php

declare(strict_types=1);

class GrafanaOAuth
{
    protected $user;

    /**
     * Create a new GrafanaOAuth instance.
     * @param array $user
     * @return void
     */
    public function __construct(array $user)
    {
        $this->user = $user;
    }

    /**
     * Redirect to authentication URL.
     * @param string $state
     * @return void
     */
    public function auth(string $state): void
    {
        $state = urlencode($state);
        $url = "http://localhost:3000/login/generic_oauth?state={$state}&code=cc536d98d27750394a87ab9d057016e636a8ac31";
        header("Location: {$url}");
    }

    /**
     * User access token.
     * @return void
     */
    public function token(): void
    {
        $token = [
            'access_token' => $this->user['access_token'],
            'token_type' => 'Bearer',
            'expiry_in' => '1566172800', // 20.08.2019
            'refresh_token' => $this->user['refresh_token']
        ];

        echo json_encode($token);
    }

    /**
     * User credentials.
     * @return void
     */
    public function user(): void
    {
        $user = [
            'username' => $this->user['username'],
            'email' => $this->user['email']
        ];

        echo json_encode($user);
    }
}

    oauth/auth.php:

    <?php

declare(strict_types=1);

require __DIR__ . '/../GrafanaOAuth.php';

/**
 * Fetch the details of Grafana user from your database.
 */
$user = [
    'username' => 'nbayramberdiyev',
    'email' => 'nbayramberdiyev@outlook.com',
    'dasboard_id' => 'oNNhAtdWz',
    'access_token' => md5(uniqid('nbayramberdiyev', true)),
    'refresh_token' => md5(uniqid('nbayramberdiyev', true))
];

(new GrafanaOAuth($user))->auth($_GET['state']);

    oauth/token.php:

    <?php

declare(strict_types=1);

header('Content-Type: application/json');

require __DIR__ . '/../GrafanaOAuth.php';

/**
 * Fetch the details of Grafana user from your database.
 */
$user = [
    'username' => 'nbayramberdiyev',
    'email' => 'nbayramberdiyev@outlook.com',
    'dasboard_id' => 'oNNhAtdWz',
    'access_token' => md5(uniqid('nbayramberdiyev', true)),
    'refresh_token' => md5(uniqid('nbayramberdiyev', true))
];

(new GrafanaOAuth($user))->token();

    oauth/user.php:

    <?php

declare(strict_types=1);

header('Content-Type: application/json');

require __DIR__ . '/../GrafanaOAuth.php';

/**
 * Fetch the details of Grafana user from your database.
 */
$user = [
    'username' => 'nbayramberdiyev',
    'email' => 'nbayramberdiyev@outlook.com',
    'dasboard_id' => 'oNNhAtdWz',
    'access_token' => md5(uniqid('nbayramberdiyev', true)),
    'refresh_token' => md5(uniqid('nbayramberdiyev', true))
];

(new GrafanaOAuth($user))->user();

    custom.js:

    $(function() {
    'use strict';

    if (location.pathname === '/login') {
        location.href = $('a.btn-service--oauth').attr('href');
    }
});

    Step 2: Edit Grafana configuration file which is located at /etc/grafana/grafana.ini on Ubuntu / Debian, /usr/local/etc/grafana/grafana.ini on MAC, <GRAFANA_PROJECT_FOLDER>/conf/custom.ini on Windows.

    Uncomment these lines and enter your client_id, client_secret, auth_url, token_url, api_url:

    #################################### Generic OAuth ##########################
[auth.generic_oauth]
;enabled = true
;name = OAuth
;allow_sign_up = false
;client_id = some_id
;client_secret = some_secret
;scopes = user:email,read:org
;auth_url =
;token_url =
;api_url =

    Like so:

    #################################### Generic OAuth ##########################
[auth.generic_oauth]
enabled = true
name = OAuth
allow_sign_up = false
client_id = YOUR_APP_CLIENT_ID
client_secret = YOUR_APP_CLIENT_SECRET
scopes = user:email,read:org
auth_url = http://foo.bar/oauth/auth.php
token_url = http://foo.bar/oauth/token.php
api_url = http://foo.bar/oauth/user.php

    Step 3: Place custom.js in /usr/share/grafana/public/build/index.html file (Ubuntu / Debian) at the bottom of <body> tag.

    Step 4: Restart Grafana server.

    For the example and detailed explanation, have a look at my Github repo.