Hoppscotch 增加SSO登陆

参考 https://blog.peos.cn/2025/08/27/hoppscotch-sso.html

=============================================================================

正文：

虽然 hoppscotch 开源，但是完全是为商业产品开发的。很多功能需要商业化才能使用。

但，好在可以私有化部署，但部署后，如果放公网，所有人都可以使用，有没有办法加一个登陆之后才能使用呢？

如果直接在Nginx上加basic auth，会有很多问题。于是 增加JS逻辑，定时检查是否登陆，检查 登陆用户是否是指定用户，如果不是，调用 退出并刷新页面。

参考以下代码修改（增加到index.html）：

 <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.4.2/jquery.min.js" ></script>
    
<script>
document.addEventListener("DOMContentLoaded", () =>{
    
    let login_state = localStorage.getItem('login_state');
    
    console.log('login state:', login_state);
    
    var login_box = false;
    
    //定时任务随时检查用户登陆状态及登陆用户是否符合要求
    window.timer = setInterval(()=>{
    	
        login_state = JSON.parse(localStorage.getItem('login_state'));
        
        //console.log("check login_state:" + login_state);
        
    	if(!login_state){
    		
            login_box = $("#hoppscotch-modal-portal");
            
            if(login_box.length>0 && $("#hoppscotch-modal-portal").find("button").length>0){
                return;
            }
            
            if($(".tippy-box").length>0){
                logout();
                return;
            }
            
    		let btn = $("header").find("button").last();
    		 
    		if(btn.length>0){
            	btn.click();  
    		}
        }
        
        if(login_state && login_state.email){
           $.get("/auth",(res)=>{
                if(res.email!=login_state.email){   
                    logout();
                    
                }
                
           }); 	
        }
        
       
    },1000); 
  
  
    function logout(){
        //这里可以直接判断localstorage字段值，也可以 修改caddy，增加一个auth api
        $.get("/backend/v1/auth/logout",res2=>{
            localStorage.removeItem("login_state");  
            window.location.reload();
        });
    }
});
</script>
<style>
button.inline-flex.items-center.justify-center.font-semibold.transition.whitespace-nowrap.focus\:outline-none.text-secondary.hover\:text-secondaryDark.focus-visible\:text-secondaryDark.p-2{
display:none;
}
</style>