OpenID Connect Hybrid Flow for calling resource API (OIDC Part 4)

Share on facebook
Share on google
Share on twitter
Share on linkedin

In the last post we created an authorization code client, enabling the client to get the user claims from the id token, exchanged for the post-login authorization code. That way we were able to display the user roles on an authorized MVC view. This time, instead of getting the user roles from the userInfo endpoint directly with an access token from AppClient, we are going to get it from the resource API, using an access token.

Note: This could also have been implemented with authentication code client since we are only using an MVC client in this part. Using the hybrid client here is just for learning purpose, enabling you later to use the hybrid client both from a browser and an MVC app simultaneously.

The OpenID connect with IdentityServer4 and Angular series

This series is learning you OpenID connect with Angular with these parts:

AuthorizationServer – Setting up the hybrid client

Compared to part 3 of the OIDC series, the only thing we need to do to the AuthorizationServer is to add a hybrid client:

// OpenID Connect hybrid flow client (MVC) new Client { ClientId = "mvc", ClientName = "MVC
Client", AllowedGrantTypes = GrantTypes.Hybrid,
ClientSecrets =
    new Secret("secret".Sha256())

RedirectUris = { "http://localhost:5002/signin-oidc" },
PostLogoutRedirectUris = { "http://localhost:5002/signout-callback-oidc" },
AllowedScopes =
AllowOfflineAccess = true

The only difference between this and the previous authorization code client is that browsers are here allowed to get the id token on first roundtrip. We could also get the access token on the first roundtrip if we enabled that here. With authorization code flow, they needed to exchange their authorization code for an id token.

ClientApp – Calling the resource API with access token

In part 3 we already set the AppClient up for using hybrid flow by adding the ClientSecret in the Startup authentication middleware. The only difference is here we are requesting the id_token as well as the authorization code on first request:

ClientApp/Startup.cs options.ResponseType = "code id_token";

After the user has been authenticated, the HTTPContext is going to contain an access token as well as the id token. We use this in a method for calling the resource API’s authenticated identity endpoint:

 private async Task CallApiUsingUserAccessToken() { 
    var accessToken = await HttpContext.GetTokenAsync("access_token");

var client = new HttpClient();

return await client.GetAsync("http://localhost:5001/api/identity");

This gets the access_token from the HttpContext, which is provided by the authentication cookie that got set on successful user authentication. After that, the access token is set and send as a bearer token. This method is used by the IdentityController.Index action:

[Authorize] public async Task Index() { 
var userClaimsVM = new UserClaimsVM(); var userClaimsWithClientCredentials = await
userClaimsVM.UserClaimsWithClientCredentials =
userClaimsWithClientCredentials.IsSuccessStatusCode ? await
userClaimsWithClientCredentials.Content.ReadAsStringAsync() :

var userClaimsWithAccessToken = await CallApiUsingUserAccessToken();
userClaimsVM.UserClaimsWithAccessToken = userClaimsWithAccessToken.IsSuccessStatusCode ? await userClaimsWithAccessToken.Content.ReadAsStringAsync() : userClaimsWithAccessToken.StatusCode.ToString();

return View(userClaimsVM);

The user claims from the resource are stored in the userClaimsVM and the Identity/Index.cshtml should now look like this:

@model ClientApp.Models.UserClaimsVM;
    ViewData["Title"] = "Index";



User claims:
    @foreach (var claim in User.Claims)

<form asp-controller="Identity" asp-action="Logout" method="post">
    <button type="submit">Logout</button>

Now the view is also showing user claims from the resource API using access token.

No change is needed for the resource api, so we are now ready to run the servers together.

Running the app

When running the three servers all together we should be able to get an access token using the: HttpContext.GetTokenAsync("access_token").

By going to, this JWT can easily be decoded.

OpenId access token

We see that the scope is containing resourceApi as well as the audience property, allowing the user to access the ResourceApi.

When going to http://localhost:5002/identity we should now be prompted for login and consent for which we are gonna use one of the hard coded test users. Here after we are gonna be redirected to our identity view, now containing the user claims, fetched from the ResourceAPI:


That sums up part 4! We accomplished to setup an hybrid flow client in the Authorization Server that can return both a authorization code as well as id token and access token, if requested. Using this we obtained an access token containing the resource api as scope, which enabled our ClientApp to fetch and display authorized identity information by requesting the resource API.

Next time we are gonna make the setup more realistic by enabling user registration using ASP.NET identity.
The code for this part can be found on my Github.

Do you want to become an Angular architect? Check out Angular Architect Accelerator.

Related Posts and Comments

Build a Course Platform with SPARTAN Stack

Build a Course Platform with the SPARTAN Stack​ Step by Step Guide giving you a full production ready setup with industry best practices. <p style=”text-align: center;”><b>Press for sound.</b><b></b></p> <h2>Here’s what’s inside…</h2> <p >Section 1</p> <h2>Designing the course portal (Figma)</h2> <p style=”text-align: left;”>We will cover the fundaments of designing a brand new site in Figma including

Read More »


Develop Real Projects With Industry Best Practices Join our community of expert developers and get the industry level best practices, step-by-step, from real projects. Hi, I’m Christian Lüdemann I’m a web developer from Denmark and the creator of this blog. You are here to learn how to code like the best companies and learn

Read More »

Debugging Angular apps (with Sentry) and workflow

In this video, we cover the topic of debugging Angular apps and provide an overview of various tools and approaches that can be used. I highlight the use of Sentry as a tool for error logging and performance monitoring. I also cover my scientific approach to fixing hard-to-debug bugs. Do you want to become an

Read More »