EasyNVR摄像机网页H5全平台无插件直播流媒体播放服务二次开发之接口鉴权示例讲解

EasyNVR

发布于 2020-04-23 15:24:27

5810

发布于 2020-04-23 15:24:27

文章被收录于专栏：EasyNVREasyNVR

背景需求

EasyNVR的使用者应该都清楚的了解到，EasyNVR一个强大的功能就是可以进行全平台的无插件直播。主要原因在于rtsp协议的视频流（默认是需要插件才可以播放的）经由EasyNVR处理可以满足无插件的全平台直播。经由EasyNVR处理会获取到RTMP、HLS、HTTP-FLV视频流，这就完美解决了插件直播的问题，只要终端设备支持H5就可以完美的播放EasyNVR分发出的视频流，这也是EasyNVR成为众多互联网直播用户首选的原因。

考虑到用户使用的安全性，EasyNVR软件提供接口鉴权和视频流播放鉴权，客户端通过用户名密码登录成功后,服务端返回认证token的cookie, 后续的接口访问, 服务端从cookie读取token进行校验。在使用EasyNVR进行二次开发集成时，是完全能满足用户安全性能的需求。如果用户进行二次开发调取接口，那就要调取接口自己来实现鉴权功能，此时该如何合理的使用呢？

取消软件鉴权机制

1.把软件包下easynvr.ini文件内的 api_auth改成等于0

2.和软件界面下基础配置取消直播页面鉴权

这两个修改之后再调取软件服务的任何接口都不需要鉴权了。（注：如果考虑到安全问题，可以不考虑第一种。）

调取接口实现鉴权

1.使用到的接口

登录接口需要带上两个参数，用户名和密码，密码需要经过MD5加密。
例：http://127.0.0.1:10800/api/v1/login?username=admin&password=e10adc3949ba59abbe56e057f20f883e

登出接口
例：http://127.0.0.1:10800/api/v1/logout

测试接口使用的是获取通道信息接口，需要带上两必带参数
例：http://127.0.0.1:10800/api/v1/getchannels?start=0&limit=2

新建一个 index.html demo

2.index.html内容文件如下

javascript
<!DOCTYPE HTML>
<html>
<head>
    <title>EasyNVR</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
</head>
<body>     
    <button id="btn1">登录</button>
    <button id="btn2">退出</button>
    <button id="btn3">测试鉴权</button>
    <p id="data"></p>
</body>
    <!-- 引入jquery插件 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 引入md5加密插件 -->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
<script>
    //定义变量来存放软件服务的IP和端口
    var httpStr = "http://127.0.0.1:10800"
    $(document).ready(function(){
        var userName = 'admin',             //用户名
            passWord = 'admin'              //原始密码
            passWordHash = md5(passWord);   //加密后密码
            
        //当点击登录会向服务端发送登录请求
        $("#btn1").click(function(){
            //请求登录接口带上用户名和加密后的密码
            $.get(httpStr + "/api/v1/login?username="+userName+"&password="+passWordHash,function(data,status){
                if(data.EasyDarwin.Header.ErrorNum === "200"){
                    $("#data").text('鉴权成功！服务端返回的token为：'+data.EasyDarwin.Body.Token + " 过期时间为："+data.EasyDarwin.Body.TokenTimeout)
                }else {
                    $("#data").text('鉴权失败！状态码为：'+data.EasyDarwin.Header.ErrorNum)
                }
            });
        });
        //当点击退出会向服务端发送登录请求
        $("#btn2").click(function(){
            $.get(httpStr + "/api/v1/logout",function(data,status){
                if(data.EasyDarwin.Header.ErrorNum === "200"){
                    $("#data").text('退出成功！')
                }
            });
        });
        //当登录成功后点击测试按钮是否鉴权成功
        $("#btn3").click(function(){
            $.get(httpStr + "/api/v1/getchannels",function(data,status){
                if(data.EasyDarwin.Header.ErrorNum === "200"){
                    $("#data").text("通道名称:"+data.EasyDarwin.Body.Channels[0].Name)
                }else{
                    $("#data").text('鉴权失败'+data)
                }
            });
        });

    });
</script>
  </html>