Как сделать видео тег HTML 5, аутентифицированный на предъявителя с помощью WebAPI? - PullRequest
Новая
       7

Как сделать видео тег HTML 5, аутентифицированный на предъявителя с помощью WebAPI?

0 голосов
/ 11 сентября 2018

У меня есть видео тег HTML 5, указывающий на мой ASP.NET WebAPI, который требует аутентификации на носителе, большинство моих запросов к моему API выглядят так: 

GET http://localhost:29080/api/v1/users/me HTTP/1.1
Host: localhost:29080
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://localhost:4200
Authorization: Bearer c66b36fe-fcc1-49da-9b42-dac783768a06
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
Referer: http://localhost:4200/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,fr;q=0.8

Поскольку приложение размещено на другом порту (и, в конечном итоге, на другом адресе), к нему применяется CORS. Я уже настроил свой WebAPI на соответствие: 

config.EnableCors(new EnableCorsAttribute("*", "*", "*"));

К сожалению, мой видео тег HTML 5, похоже, не работает с этой настройкой. 

<video 
      crossorigin="use-credentials"
      src="http://localhost:29080/api/v1/entities/470/presentation-video">

Я получаю: 

Failed to load http://localhost:29080/api/v1/entities/470/presentation-video: 
The value of the 'Access-Control-Allow-Origin' header in the response must 
not be the wildcard '*' when the request's credentials mode is 'include'. 
Origin 'http://localhost:4200' is therefore not allowed access.

В дополнение к: 

GET http://localhost:29080/api/v1/entities/470/presentation-video 401 (Unauthorized)

Я действительно не знаю, о чем думать, я где-то читал, что канал-носитель может быть передан в виде строки запроса, как

Но мне не удалось заставить его работать ...

Есть идеи?

1 Ответ

0 голосов
/ 11 сентября 2018

Хорошо, поэтому решение для меня было:

В моем клиентском приложении: 

<video controls crossorigin="anonymous" src="..." </video>

и настройте src моего видео, например (пример): http://localhost:29080/api/v1/entities/470/presentation-video?access_token=c66b36fe-fcc1-49da-9b42-dac783768a06

Поскольку WebAPI на самом деле не проверяет параметры запроса (даже если они должны ...), нам нужен способ преобразования access_token в заголовок при его получении, как описано в этом ответе здесь: https://stackoverflow.com/a/25525470/4636721

public void ConfigureAuth(IAppBuilder app)
{
    app.Use(async (context, next) =>
    {
        if (context.Request.QueryString.HasValue)
        {
            if (string.IsNullOrWhiteSpace(context.Request.Headers.Get("Authorization")))
            {
                var queryString = HttpUtility.ParseQueryString(context.Request.QueryString.Value);
                string token = queryString.Get("access_token");

                if (!string.IsNullOrWhiteSpace(token))
                {
                    context.Request.Headers.Add("Authorization", new[] { string.Format("Bearer {0}", token) });
                }
            }
        }

        await next.Invoke();
    });
    // Enable the application to use bearer tokens to authenticate users
    app.UseOAuthBearerTokens(OAuthOptions);
}
...