首页 > 其他分享 >dremio 自定义登陆以及简单sso

dremio 自定义登陆以及简单sso

时间:2024-03-20 12:33:24浏览次数:27  
标签:web dremio http 自定义 nginx sso proxy

一个简单的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;
        # proxy dremio web 服务
        location / {
            proxy_set_header Host api.openai.com;
            set $cip $remote_addr;
            if ($http_x_forwarded_for != "") {
                set $cip $http_x_forwarded_for;
            }
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection upgrade;
             proxy_pass http://dremio:9047;
        }
       # 自定义登陆
        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 了可以参考(特别简单,实际还是需要不少调整的)

参考资料

https://github.com/rongfengliang/dremio-login

标签:web,dremio,http,自定义,nginx,sso,proxy
From: https://www.cnblogs.com/rongfengliang/p/18084956

相关文章

  • WPS打印文件如何自定义纸张和设置
    这两天遇到个需求,就是打印机平时都打印A4纸和内容财务使用的财务凭证纸是特殊的140*240mm的纸,打印时选择A5B5等纸张后打印机都无反应捣鼓了一个小时,终于弄明白了怎么操作1.新增自定义纸张打印界面执行:属性->纸张/质量->自定义->起好名字+设置长宽   2.第三方软件选......
  • Flink 自定义 ClickHouse Table Connector 的简单实现
    本次实现基于Flink1.18版本,具体的对象之间的关系可以先参考官网的图:先拿官网上的Socket示例来说一下实现过程:首先编写SocketDynamicTableFactory实现DynamicTableSourceFactory接口。在SocketDynamicTableFactory中会返回SocketDynamicTableSource,同时返回实现......
  • C语言 自定义类型:结构体
    目录前言一、结构体类型1.1结构体的声明1.2 结构体变量的创建和初始化1.3结构体的特殊声明1.4结构体的自引用二、结构体的对齐2.1对齐规则2.2内存对齐的原因2.3修改默认对齐数2.4 结构体传参三、结构体实现位段3.1 位段的内存分配3.2 段的跨平台问......
  • lesson7单引号+双括号布尔盲注或一句话木马+蚁剑
    lesson7单引号+双括号布尔盲注或一句话木马+蚁剑1.验证注入点从下面的注入测试来看,只有两种输出结果如果sql执行了,就会输出“Youarein…Useoutfile…”,反之输入“YouhaveanerrorinyourSQLsyntax”?id=1--+--Youarein....Useoutfile......?id=1'--+--......
  • Java自定义注解实现参数校验
    1、定义注解内    自定义如下,本例子以校验手机号码为例需要校验手机号码标上此注解即可。其中Mobilelidator类则是实现自定义校验ConstraintValidator类的接口实现类2、ConstraintValidator 定义接口实现  ConstraintValidator 自定义接口实现如下图......
  • Maven Archetype自定义工程模板(Eclipse中,其他IDE同理)
    1.问题在Eclipse中,我们想创建一个web项目,使用web-app脚手架进行创建,但是里面的模板并不是我们想要的比如我想自定义pom.xml里面的内容,设定jdk版本,groupID等等,配置Web项目基本依赖以及我想要设置一个基本的index.jsp(符合基本模板的)和web.xml中设置web-app的版本为3.1......
  • Spring Data Elasticsearch 自定义检索字段比重,计算得分
    BoolQueryBuilderfuzzyQuery=QueryBuilders.boolQuery();String[]matchFieldNames={"itemName","categoryNames","baseCategoryName","materialNameAilas","materialName",......
  • Vue2(五):收集表单数据、过滤器、自定义指令、Vue的生命周期
    一、收集表单数据爱好:学习<inputtype="checkbox"value="study"v-model="hobby">打游戏<inputtype="checkbox"value="games"v-model="hobby">吃饭<inputtype="checkbo......
  • EasyExcel实现文件上传下载(百万级数据、单元格自定义样式)
    文章目录一、EasyExcel介绍二、写Excel1、最简单的写2、列宽、行高、背景颜色、字体大小颜色、对齐方式2.1、编码方式2.2、注解方式3、复杂头与修改列顺序4、日期、数字类型和自定义格式化5、设置单元格下拉6、重复多次写入(百万数据)7、导出指定列8、动态生成表头9、模......
  • 微信小程序自定义组件
    微信小程序中的自定义组件是指在微信小程序中创建的可重用的、可复用的组件,它可以被多个页面使用。自定义组件可以帮助我们提高开发效率,提高代码的可维护性和可重用性。以下是微信小程序中自定义组件的使用方法:一.创建自定义组件首先,我们需要在微信小程序中创建一个自定......