通过身份验证从动态内容提供程序加载html5音频

Posted 2023-02-04

假设我们在这里有一个内容提供者端点myuri.org/api/auth/sources/id，它返回由id标识的音乐文件。

路线/api/auth/需要身份验证。在这种情况下，这是通过在请求标头中传递的JWT完成的，就像Authentication: Bearer <token>一样。

如果身份验证不存在，我可以加载一个html5音频组件，其中包含id为37的虚构音乐文件的来源，如此

<audio controls>
  <source src="myuri.org/api/sources/37" type="audio/mp3">
</audio>

但是因为我需要认证;这怎么样？并提供任何可能的解决方案;寻求/跳过仍然有效吗？

答案

..我花了一些时间寻找其他答案，找到了this post。我想这不可能这样。

替代方案

以下代码是遵循所描述的逻辑的概念证明。但它不使用html5音频组件，而是使用Web Audio Api。

let url = "myuri.org/auth/sources/37";

// create context
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create source
let source = audioCtx.createBufferSource();

// route source
source.connect(audioCtx.destination);

// prepare request
let request = new XMLHttpRequest();
request.open('GET', url, true /* async */ );
request.responseType = 'arraybuffer';

request.onload = function () 
    // on load callback

    // get audio data
    let audioData = request.response;

    // try to decode audio data
    audioCtx.decodeAudioData(audioData,
        function (buffer) 
            // on success callback
            console.log("Successfully decoded");

            // set source
            source.buffer = buffer;

            // .. do whatever you want with the source
            // e.g. play it
            source.start(0);
            // or stop
            source.stop();
        ,
        function (e) 
            // on error callback
            console.log("An error occurred");
            console.log(e);
        );
;

request.setRequestHeader("Authorization", `Bearer $authenticationToken`);
request.send();

我希望这可以帮助别人。

另一答案

1

或者，如果您可以更改后端，则可以从查询字符串中读取jwt：

https://myuri.org/api/sources/37?jwt=jwt

就我而言，它是Django（Rest Framework）

# auth.py
from rest_framework_jwt.authentication import JSONWebTokenAuthentication

class QSJSONWebTokenAuthentication(JSONWebTokenAuthentication):
    def get_jwt_value(self, request):
        return request.query_params.get('jwt', '')

# views.py
class AudioView(generics.RetrieveAPIView):
    authentication_classes = (QSJSONWebTokenAuthentication,)

    def retrieve(self, request: Request, *args, **kwargs):
        pass

2

另一种策略还取决于您是否可以控制后端：

发送请求到服务器并要求临时文件的URL，在<audio>中使用该URL。存储提供商（如Google Storage或S3）具有api，允许生成网址，每个人都可以在短时间内访问该文件。您也可以使用JWT实现类似的东西（第一个请求中有一个令牌，第二个令牌用于文件访问验证）