This guide will integrate SRAM with an Azure App Service. Instead of building SRAM in into an application we will use SRAM and Azure App Services to put a very simple basic website behind authentication.
To achieve this we create a basic node.js web site using react, we deploy to an Azure App Service and configure SRAM as an authentication layer.
Keep in mind this only puts authentication on the app and only brings limited knowledge of the user in the app. In case that you need more user information like roles etc, you might want to consider using an implementation in the code of your app. This is especially the case if you need access to attributes that are in typical SRAM scopes.
We start by creating a very minimal web-app using react.js, but you can use your preferred language that is supported on Azure App Services (.Net, Node, Python, PHP, Ruby, Java, Go). If you already have created awebsite and deployed it to an Azure App Service you can skip this and the next paragraph and go directly to
Setting the authentication in Azure.
npx create-react-app sram—azure |
after a while the app is ready we can start it via
cd sram—azure npm start |
We modify the code in /sram-azure/src/app.js a bit so we see our own message
Within the Azure portal (https://portal.azure.com) we create a Resource Group that serves as a container for the application. In our case we call it rgSRAM. We create a Web App under App services and set the engine tonode.js. Notice that we used the name sram-test, you have to pick your own unique name.
With creation of the app services we also need to create or choose an App Service Plan. We create one and choose to run it on Linux. It goes too far to explain App Service Plans in this manual, please refer to this Microsoft website if you are not familiar with it and with the corresponding Pricing Plans.
After creation of the app service our website technically exists but has no content. Let’s deploy our react website from within Visual Studio Code to the newly created website. This can be achieved quickly by installing the AzureApp Service for Visual Studio Code extension in VS Code.
Right click the folder of your app (sram-azure in our case) and choose Deploy to Web App and follow the instructions to deploy the app to our newly created App Service. Our app is deployed and looks like this.
Note: Azure App Service Authentication does not work if your SRAM applicatoin requires the PKCE protocol. This isenabled by default, so make sure you request the SRAM Support desk to disable it on your application. There are ways to use PKCE with Azure but you possibly need to use an Azure B2C tenant and do manual configuration in the manifest file, so we recommend you use the implicit flow by turning of PKCE until Azure fully supports it in its interface.
We can manually enter everything, but luckily we can import most of the settings via the OpenID configuration page that Surf provided at https://proxy.sram.surf.nl/.well-known/openid-configuration. This manual has been written with the acceptance version for SRAM so we have used https://proxy.acc.sram.eduteams.org/.well-known/openid-configuration.
In Azure Authentication you cannot set scopes, it requires however the scope [openid], [profile] and [email]. These can be requested from the SRAM application.
If you enable the Token Store, Azure will send the authentication information in a token in the headers to your application. Azure App Service Authentication typically handles the storage and management of authentication tokens internally, and it might not expose a direct way for you to read or manipulate the token store directly.
However, you can access and use the authentication tokens in your application code to perform various tasks, suchas making authenticated requests to APIs. This way you can get information about the user using it to get user information from SRAM (the user_endpoint which can be found in .well-known/openid-configuration). However it only brings in the data within the three scopes [openid], [profile] and [email].
When a user authenticates through Azure App Service Authentication, the authentication token is oftenmade available in the request headers or cookies. The exact location of the token may depend on theauthentication provider and the configuration of your Azure App Service.
Azure App Services Authentication uses a standard pattern for the redirect URL. Azure will assume you have registered your callback URL at
https://[website url]/.auth/login/[OpenID provider name]/callback
So, in our example it is https://sram-test.azurewebsites.net/.auth/login/SRAM/callback and we need to register that via the Surf SRAM Support desk.
However, if you prefer an alternative URL you can change that by going again to Authentication blade and press Edit.
Here you can specify an alternative URL on the bottom of the screen.
After you set everything, we might have to wait a few minutes or a bit more, and might even need to restart the Azure App. After a while you will see that when you go to your website, it redirects to SRAM, asks you to sign inand redirects to your application again.
If you need to set more scopes, or need more control on how the user flows are implemented you can also use App registrations to authenticate your app. However, since you use SRAM, you cannot use a standard Appregistration on Microsoft Entra (previously known as Active Directory). You’ll have to switch to an Azure B2C tenant. This is because only Azure B2C supports non-Microsoft providers as SRAM. Within Azure B2C you cansetup the SRAM Open Identity Provider and create an App Registration that uses the SRAM Open IdentityProvider. Documentation states that you can even use it with PKCE, but we have not tested that yet, since most users have no Azure B2C tenant.
Adding Authentication on your application with SRAM is pretty straightforward with Microsoft Azure. It doesn’t matter which code base or platform you use. Keep in mind that you only can get authorization information of the user within your application if you have a platform that supports analyzing the headers. This is however great ifyou just want to make your application quickly available to a selected set of users.