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"
启动之后，先dremio 创建一个账户，之后就可以通过自定义的web 入口登陆了http://localhost/sso/
- 效果
输入dremio 创建的用户密码，就可以直接看到dremio 的界面了
说明
此方法是一种比较简单的集成方法， 但是因为没有修改dremio 内部的处理，所以依然还会有一些问题，如果还是不想修改，可以通过nginx 对于部分接口进行特定访问限定，这样只有统一入口可以操作了,示例代码我已经放github 了可以参考（特别简单，实际还是需要不少调整的）
