Azure API Management: Authorization Level Based Content in the Developer Portal

When developing API-software in an API-first world, the user experience is important. When developing APIs and leveraging the API ecosystem, you will see that providing a great developer experience and great documentation is key to running a successful API. Azure API Management comes with a dedicated Developer Portal out-of-the-box. With the Developer Portal, app developers and other end users can see documentation, play with your API, manage subscriptions, and much more.

In my last blog post, I talked about how to shield the Developer Portal from anonymous users. In this blog post, I will go a step further and show you how to customize the Developer Portal even more: step 1 will show how to tailor individual widgets in the Developer Portal to authenticated users. In step 2, I will show how to show customized content to unauthorized/anonymous users

Step 1: show customized widgets to authorized users

Often, you want to show different content to authorized and unauthorized users. For instance, you want to display information about the user signup process, subscription benefits, etc to unauthorized users. Authorized users, on the other hand, would benefit from other types of information (like uptime updates). But how do you do this?

The layout of widgets in the Developer Portal is managed via the Publisher Portal. So let’s take a look at how to show a special banner widget to authorized users:

1. Open the Azure API Management blade in the Azure Portal and click on “Publisher portal” at the top.
   • 
2. In the “Publisher Portal”, click on “Widgets” (1) and then “Add new Layer” (2)
   • 
3. In the “Add Layer” page, fill out a “Name” (1) and “Description” (2).
   • On the “Layer Rule” box write “authenticated” (3). “authenticated” is a special Layer Rule expression stating that this particular layer is only shown to authenticated users.
   • Finally, click “Save” (4).
   • 
4. Now that a new layer is created, make sure to activate it in the “Widget” editor. This is done by selecting the new layer in the drop-down (1) and thereafter click “Show” (2).
   • 
5. Now we want to create a banner widget that displays some special text to authenticated users. This is done by scrolling down to the “Featured” section and click “Add” (1)
   • 
6. In the Add/Edit Widget form we fill out the fields as shown in steps (1), (2), (3), (4) and (5) below. Click “Save” (6) to save your newly created widget.
   • 
7. Go back to the “API Management” blade and click on the Developer Portal this time.
   • 
8. Our newly created banner widget will now be shown – but only for authenticated users.
   • 

Step 2: show customized widgets to anonymous/unauthorized users

Now that we know how to show specialized content to authorized users, we want to take it a step further and show specialized content to anonymous (unauthorized) users:

1. We start again at the Azure API Management blade in the Azure Portal and, again, we click on “Publisher Portal” at the top.
   • 
2. In the “Publisher Portal”, click on “Widgets” (1) and then “Add new Layer” (2)
   • 
3. In the “Add/Edit Layer” page, fill out a Name (1) and Description (2).
   • On the “Layer Rule” box write “not authenticated” (3). “not authenticated” is a special Layer Rule expression stating that this particular layer is only shown to anonymous (not-authenticated) users.
   • Finally, click “Save” (4).
   • 
4. Just like in the previous section, we make sure to activate our new layer by selecting it in the drop-down (1) and then click “Show” (2).
   • 
5. Now we want to create a banner widget that displays some special text to anonymous users. This is done by scrolling down to the “Featured” section and click add (1)
   • 
6. In the “Add/Edit Widget” form we fill out the fields as shown in steps (1), (2), (3), (4) and (5) below. Click “Save” (6) to save your newly created widget.
   • 
7. Let’s verify the result by going back to the  “API Management” blade and click on the “Developer Portal“.
   • 
8. To show our newly created banner we first need to sign out of the developer portal (to appear anonymous):
   • 
9. And finally, we see that our newly created banner is only shown for anonymous/unauthenticated users!
   • 

Conclusion

In this blog post, I’ve shown how to individualize content widgets in the Developer Portal to authorized and anonymous users respectively. This was done via the Publisher Portal and using the “authorized” and “not authorized” Layer Rules.

Let me know in the comments how you customize the Developer Portal in Azure API Management.