How to authenticate HTML-5 upload request on web API / Asp.Net ID?

Question

I need streaming audio from my web API. In standard HTML-5 audio, the src attribute is set to the audio URI from the WebAPI.

The problem is this: the web API protected by the Asp.Net identifier requires that the token be passed in the headers, however the HTML AUDIO TAG does not allow us to do so. I finally left two alternatives:

Approach 1. Download HTML using an XHR request and play locally.

Approach 2. Pass the headers through the query string. So that we can token in the OWIN pipeline during request processing.

The first approach mentioned above is not viable, because if we download audio locally, we will skip the streaming functions provided by the web API.

Could you help with approach-2, i.e. so that on the Web API side, we can read the token from the URL and then initiate Asp.Net authentication?

Answer 1

Create this provider class

public class QueryStringOAuthBearerProvider : OAuthBearerAuthenticationProvider { public override Task RequestToken(OAuthRequestTokenContext context) { var value = context.Request.Query.Get("access_token"); if (!string.IsNullOrEmpty(value)) { context.Token = value; } return Task.FromResult<object>(null); } } 

Use it in Startup.cs

 OAuthOptions = new OAuthAuthorizationServerOptions { TokenEndpointPath = new PathString("/Token"), Provider = new ApplicationOAuthProvider(PublicClientId), AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"), AccessTokenExpireTimeSpan = TimeSpan.FromDays(14), // In production mode set AllowInsecureHttp = false AllowInsecureHttp = true }; // Enable the application to use bearer tokens to authenticate users //app.UseOAuthBearerTokens(OAuthOptions); // old line app.UseOAuthAuthorizationServer(OAuthOptions); // new line // Enable the application to retrieve tokens from query string to authenticate users app.UseOAuthBearerAuthentication(new OAuthBearerAuthenticationOptions() { Provider = new QueryStringOAuthBearerProvider() }); 

Now it will receive the token from the url ".... /? Access_token = xxxxxxx" and try checking it.