title: How to implement OAuth 2.0 Authorization Code Grant from Single-Page Application?
body: <p>We have an Angular SPA backed by an ASP.NET Web API that uses the OAuth 2.0 <a href="https://www.rfc-editor.org/rfc/rfc6749#section-4.3" rel="nofollow noreferrer">Resource Owner Password Credentials Grant</a> with a Bearer Token for authorisation. The API uses Microsoft.Owin.Security.OAuth to implement OAuth.</p>
  <p>We're trying to integrate with a third-party application that will use the <a href="https://www.rfc-editor.org/rfc/rfc6749#section-4.1" rel="nofollow noreferrer">Authorization Code Grant</a> so users can authorise it to access our application on their behalf.</p>
  <p>We want the authorisation page to be a part of the SPA, but I'm having trouble figuring out how to submit the authorisation request from the SPA to the API and have it redirect back to the third-party application.</p>
  <p>I've tried using both AJAX (like all the other API requests in the SPA) and a regular HTML form (so that redirect responses redirect the page).</p>
  <p>We were originally sending back a JSON response from the API and letting the SPA do the redirection itself, but OWIN will automatically send a redirect response if there's some error; so there doesn't appear to be any way to avoid redirect responses.</p>
  <p>If I send the request via AJAX, the browser will automatically follow the redirect responses sent by the server by sending another AJAX request instead of redirecting the page.</p>
  <p>If I use a regular HTML form to send the request, there doesn't seem to be any way to send the required <code>Authorization</code> header with the Bearer Token.</p>