Question

我们假设我们在这里有一个内容提供者端点myuri.org/api/auth/sources/{id} 返回由id。

标识的音乐文件

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

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

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

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

Answer 1

..我花了一些时间寻找其他答案并找到了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();

我希望这有助于某人。

Answer 2

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，该API允许生成url，每个人都可以在短时间内访问该文件。您还可以使用JWT实现自己的类似操作（第一个请求中的一个令牌用于auth，第二个令牌中的一个令牌用于文件访问验证）

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

2 个答案:

替代解决方案

1

2