Using Delegation to integrate the Azure API Management Developer Portal with your own website

At May 11th-13th was again INTEGRATE in the ExCeL Exhibition Center in London. It’s the premier integration conference for anyone who is working in Microsoft Integration space. The last couple of years it was already a very big event but this year the event was even bigger with more speakers and more visitors.
I also gave a presentation at the event and that was about “Implementing a real life scenario for the API Economy”. In the presentation I first talked about how you can create a website in Azure with a Web Apps  and then I showed how you can integrate the API Management Developer Portal with your own website.
This can be important because what if you already have a website where people can login and create users? Or you want to add Payment in the Developer Portal because you want to charge money for your APIs? In that case the functionality in API Management that you get out of the box is not enough and you need also other functionality in Azure.


Using Delegation and REST API in API Management

What Delegation enables you to do is that a 3rd party site performs all the user authentication and optionally also product subscription.

- First you have to publish your website to a Web App.
- To authenticate and to store the users you need an Azure SQL database.
    - You can also use something else but Azure SQL database makes it easy for you.
- And of course you need API Management to secure your web-api and create policies on top of it.

Use a 3rd party site to perform user authentication and product subscription

When the user arrives on the Developer Portal they can click on the Login link. This atomically forwards them to the delegation page that you have to setup on your existing website. The delegation page forwards the user to the correct action based on the request being made. For example when a user tries to login it goes to the login page and when the user does not have a login but is creating a new account. In that case you also have to use the API Management REST API to create a corresponding account in API Management. Basically you create a linked account where you use the same id in both the existing website and the Developer Portal to ensure that the accounts match. When this completes the Login page forwards back to the delegation page. Which can now issue a Single Sign On link. So when the user is forwarded back to the Azure Portal they already logged in.

Delegation Overview
Enabling REST API in API Management

In the API Management Portal click in the menu on Security and click on the API tab.
Here you can enable the API Management REST API. That allows you to programmatically perform all operation that a user also can perform manually on the developer and publisher portal.
When you call the REST API It needs a special token in the request Authorization header.

Enabling REST API in API Management
Enabling Delegation in API Management
You need to configure special delegation endpoint that must act on your web site as the entry point for any request initiated from the Developer Portal.You also can generate a validation key so that you can verify that the request really comes from the Developer Portal.
Enabling REST API in API Management
Register and a Login from the Web App

If you create a website with the MVC template in Visual Studio it generates also a Register and a Login page and the only thing you have to do is to modify it a bit and for example add bootstrap to it.
When you look at the documentation from Microsoft you start at the Developer Portal and then you are delegated back to the website if you want to login. But it is also possible to start from the website because you normally don’t start from the Developer Portal when you are a new user and first have to register.

Register and a Login from the Web App
Modify the Register action in the Account Controller

Here you see the Register action in the Account Controller in Visual Studio and this action is also generated for you. When the user on the website clicks on the Register button it goes to back to register action. The only thing that you have to add is to call the API Management REST API to create the user also in API Management. Note that you have to use the same User.ID so that you can create a linked account.

Modify the Register action in the Account Controller
Product page on 3rd party site

When the user is registered it is forwarded to the Product page. Here you can also add your payment process if you want to charge money for the API.
If you are delegated back from Developer Portal when you subscribe to a product you also get a ProductId in the request but in our case we need to provide it our self because this is new user that wasn’t Developer Portal before.

Product page on 3rd party site
Get an overview of all products with the REST API
To get an overview of all products and their id’s you can call the API Management REST API with a tool like PostMan. That is necessary because the ProductId is not showed on the Publisher Portal and you need the ProductId if you want to subscribe to a product from your own website.
Get an overview of all products with REST API
Modify the Product action in the Account Controller
And here you see the Product action in the Account Controller. When a user subscribes to a product and optionally also has paid you then have to call the REST API to subscribe to the product. It needs also a UserId and a ProductId. Next is the REST API called to get the SSO token and to redirect the user to the Developer Portal.
Modify the Product action in the Account Controller
API Management Developer Portal
When the page is redirected to the API Management Developer Portal the user is automatically logged in and it has subscribed to a product!
API Management Developer Portal


Wrap Up

If you want to learn more about Delegation in API Management see also How to delegate user registration and product subscription. There is also an API Management Delegation sample on GitHub with a Web App that you can use and modify if you want to use Delegation for user authentication and product subscription. If you want to see how Delegation works with a custom website you can also try this out yourself on my sample website

About the author

Tomasso Groenendijk lives in Netherlands and is a Solution Architect at Insight. He has over 20 years experience in software development and software design. Tomasso is specialized in application integration with a strong interest in the Windows Azure cloud platform. From 2014, Tomasso has been awarded six times with the Microsoft Azure MVP award. He is an active contributor to the integration community through his work on his blog, GitHub samples, TechNet Wiki and speaking on events. Furthermore he is an official board member of the Dutch Microsoft Integration User Group.

MVP profile Tomasso Groenendijk
Sentinet Product Specialist
BizTalk360 Product Specialist

Month List