Skip to content

基于iframe页面嵌套的Thingsboard二次开发方案

Jump to bottom
codeHui edited this page Apr 3, 2024 · 16 revisions

一期：通過Iframe嵌套二次开发系统的web页面

该方案没有改动Thingsboard源码（如果用收费版，是无法修改源码的，但是可以自己新建一个服务去访问thingsboard数据库），所以想到了通过html的iframe进行页面嵌套。 下面看效果，简直无缝衔接 image

配置如下，iframe的url拼接了一个静态token（可手动轮换，这里映射了一个customerId，所以可以给不同customer创建不同的dashboard），该token就是thingsboard到二次开发系统的customer凭证 image

.card {
    font-weight: bold;
    font-size: 32px;
    color: #999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

二期優化：安全校驗增強

上面一个静态url可以一直访问一个网站（如果没轮换token的话），其实不符合最佳安全实践，可以拼接上Thingsboard的jwt token进行校验，如下面代码

  • HTML Card image 
 <script type="text/javascript">
    var jwtToken = localStorage.getItem('jwt_token');//或者localStorage.getItem('refresh_token')
    var iFrameBlock =  `<iframe src="https:/xxxxxxxxxxxxxxx?jwtToken=${jwtToken}" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; overflow:hidden; z-index:999999;" >
    </iframe>`
    
    document.getElementById('card').innerHTML = iFrameBlock;
</script>
<div class='card' id="card">
</div>
  • 如果不用HTML Card，而是用更复杂的Customized widgets，也都可以在代码中获取Thingsboard的jwtToken image

如下图的web页面，大家可以看到url成功拼接到了Thingsboard的动态jwt token，那么二次开发的系统就可以对该动态token进行进一步的安全校验（1，jwt是否有效期内, 2，用户权限校验） image

Clone this wiki locally