-
Notifications
You must be signed in to change notification settings - Fork 7
基于iframe页面嵌套的Thingsboard二次开发方案
codeHui edited this page Apr 3, 2024
·
16 revisions
该方案没有改动Thingsboard源码(如果用收费版,是无法修改源码的,但是可以自己新建一个服务去访问thingsboard数据库),所以想到了通过html的iframe进行页面嵌套。 下面看效果,简直无缝衔接
配置如下,iframe的url拼接了一个静态token(可手动轮换,这里映射了一个customerId,所以可以给不同customer创建不同的dashboard),该token就是thingsboard到二次开发系统的customer凭证
.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
<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
如下图的web页面,大家可以看到url成功拼接到了Thingsboard的动态jwt token,那么二次开发的系统就可以对该动态token进行进一步的安全校验(1,jwt是否有效期内, 2,用户权限校验)