OpenId Connect, best approach to getting a bearer token client side to call WebApi after MVC signin?

Question

I am hoping someone can advise me on this please.

I have been following a modified form of this tutorial Getting started with thinktecture Identity server to try to setup a site with OpenId Connect authentication.

I have this set up:

An Asp.NET MVC project acting as the Identity Server

An Asp.NET MVC project acting as the secured website

This above setup is working perfectly. When someone attempts to access a controller with the [Authorise] attribute in the secured website, they are redirected to the Identity server to login, and then redirected back to the secured website after successful login.

I would now like to add a web api into the mix. I have created a WebApi project, but unlike in the tutorial where it is called server side using a 'service account', I would like to call it client side (JQuery) from the secured website with the identity of the currently logged in user.

I understand that I need to use a bearer token in the authentication header.

My question is: How do I get the bearer token for the currently logged in user on the client side so I can set the header? (The user is already logged in.)

Many thanks in advance for your help

Answer 1

If you are using .Net Framework 4.5.1 in your Identity Server app, you may already have the TokenEndpointPath defined as "/Token". Look in your Startup.Auth.cs file in the App_Start folder.

A calling client may retrieve a bearer Token from the /Token endpoint by POST-ing a valid username / password to the endpoint. I created a simple codepen to experiment with my own ASP.NET Web Api 2 project using the new Windows Identity Foundation infrastructure. You might find something useful in it:

http://codepen.io/randomfactor/pen/bNpBoP?editors=101

    # THIS IS CoffeeScript (because we are not barbarians)
    # start by trying to get an access token
    $.ajax {
      type: 'POST'
      url: "#{appUrl}/Token"
      contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
      data: {
        grant_type: 'password'
        username: $('#login-name').val()
        password: $('#password').val()
      }
    }
    .then (data) ->

Be warned that, by definition, the codepen is making a Cross Origin Resource Sharing request to your Identity Server project. To make that work, you will need to modify your Identity Server project to support CORS as described in the comments on the codepen.

If you are willing to combine your Identity Server with the secured website and the Web Api project under .Net 4.5.1 (highly recommended!), it will simplify some things and you won't need the CORS modifications.

Answer 2

I guess you can inject them into a DOM in _Layout.cshtml. Better by initializing some OidcClient and AJAX before send. What do you think, @PinpointTownes?