dremio 自定义登陆以及简单sso

一个简单的dremio 集成自己外部登陆的，处理方法是通过nginx 进行proxy 同时开发自己的login 服务，此服务调用的dremio login api
对于自己的登陆页面调用自己开发的login api，然后将登陆信息写入到localstorage 中，之后进行一个dremio nginx 访问地址的重定向
因为dremio 默认web 登陆是判断localstorage user 信息的同时我们是同域的，dremio web site （通过nginx proxy 的入口）可以获取到
localstorage 信息，这样就实现了web的简单自定义sso 登陆了

参考实现

架构

简单说明
我们需要自己包装一个dremio login api 调用，如果不想处理可以直接使用dremio 的login 地址（基于nginx proxy 的）

参考实例

nginx.conf

worker_processes  1;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    gzip  on;

    real_ip_header     X-Forwarded-For;

    real_ip_recursive on;

    server {

        listen       80;

        server_name  localhost;

        charset utf-8;

        location / {

            proxy_set_header Host $http_host;

            set $cip $remote_addr;

            if ($http_x_forwarded_for != "") {

                set $cip $http_x_forwarded_for;

            }

            proxy_http_version 1.1;
            proxy_set_header X-Forwarded-For $cip;

            proxy_set_header Upgrade $http_upgrade;

            proxy_set_header Connection upgrade;

             proxy_pass http://dremio:9047;

        }

        location /login {

            return 301 /sso/;

        }

        location /sso/ {

            root html;

            index index.html;

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    }

}

自定义登陆web 页面
比较简单的实例

 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>sso Login Page</title>

    <style>

        body {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            margin: 0;

            background-color: #f0f0f0;

            font-family: Arial, sans-serif;

        }

        form {

            background: #fff;

            padding: 20px;

            border-radius: 5px;

            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);

        }

        input[type="text"], input[type="password"] {

            width: 100%;

            padding: 10px;

            font-size: 16px;

            margin: 10px 0;

            border: 1px solid #ddd;

            border-radius: 5px;

            box-sizing: border-box; /* Add this line */

        }

        button {

            background-color: #4CAF50;

            color: white;

            padding: 10px 20px;

            margin: 10px 0;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }

        button:hover {

            background-color: #45a049;

        }

    </style>

</head>

<body>

    <div>

        <h2>Login</h2>

        <form id="loginForm">

            <label for="username">Username:</label><br>

            <input type="text" id="username" name="username"><br>

            <label for="password">Password:</label><br>

            <input type="password" id="password" name="password"><br>

            <button type="button" onclick="submitForm()">Login</button>

        </form>

    </div>
 
    <script>

        function submitForm() {

            const userName = document.getElementById('username').value;

            const password = document.getElementById('password').value;
 
            fetch('http://localhost/apiv2/login', {

                method: 'POST',

                headers: {

                    'Content-Type': 'application/json',

                },

                body: JSON.stringify({ userName, password })

            })

            .then(response =>  response.json())

            .then(data => {

                console.log('Success:', data);

                window.localStorage.setItem('user', JSON.stringify(data));

                window.location.href = 'http://localhost';

            })

            .catch((error) => {

              console.error('Error:', error);

            });

        }

    </script>

</body>

</html>

测试

version: "3"

services:

  web:

    image: openresty/openresty:1.25.3.1-2-alpine-fat

    volumes:

      - ./nginx.conf:/usr/local/openresty/nginx/conf/nginx.conf

      - ./web:/usr/local/openresty/nginx/html/sso/

    ports:

      - "80:80"

  dremio:

    image: dremio/dremio-oss:24.3.2

    ports:

      - "9047:9047"

      - "31010:31010"

      - "32010:32010"