Secure your Spring Backend with Azure AD, and allowing secure access of backend from UI

Updated: Dec 26, 2020

securing backend and UI with azure ad

In this blog, we will learn about Securing your Single Page Application, and how to fetch an OAuth token for your backend Application. This is only step by step tutorial to create azure ad apps, for usage check out this blog.


Here we will be using Implicit Grant type authentication.

Learn more about Azure AD:


To enable Azure AD Security in your Single Page App, and allowing it to access your backend securely, we need to create two Azure AD App.

  • App Securing the Backend, we will can it as a server_app

  • App securing the frontend and fetching the token from server_app, to allow secure access to the backend, we will call it as client_app.

During Authentication, client_app is going to request oauth token for server_app, on behalf of user from Azure AD.
During Authorization, server_app will check if user has appropriate role or not.

We will first create server_app, then client_app.

Create server_app

  • Step 1: Create an Azure AD App from Azure Portal using App Registration Section in Azure Active Directory.

Create server_app
Azure App Registration
  • Step 2: Save the Application Id (Client Id); we need to use it later. And also copy directory Id, we also need this.

Copy Application Id and Directory Id
Azure AD Application Id
  • Step 3: Create Client Secret, and copy it.

Create Client Secret
  • Step 4: If you want to create different scope within you server_app, that will restrict the consent process( who can allow the access of resource protected by this azure ad app). As of now, ether Admin and User, or Admin only can grant the access.

Scope URI will be needed by UI (Angular or React), if you are using OpenId Connect.
You will see it in action in client_app, when we are going to select server_app api, so that client_app can request the token for server_app
Azure AD scope

  • Step 5: Copy the Application ID URI

Application ID URI will be the resource for which client_app is going to request a token from Azure AD. Copy this will value
application id uri (resource)

Now you are done with server_app.

Client Id, tenant Id, and client secret, that you have copied, will be used in application.yaml file

Application Id URI will be used as resource, in UI. (check client_app section for further details.)

For detailed step, of how to enable security in Spring Boot app using Azure AD, checkout this blog.

Now if you want allow secure access of backend from UI, we need to create one client_app.

Create client_app

  • Step 1: Create Azure AD app, and redirect URI

Redirect URI, can be any URL where you want user to be redirected, when they login. There can be multple redirect URL

client app
  • Step 2: Copy Application Id.

Copy Application Id of client_app

  • Step 3: Select your server_app, under API Permission Section.

Do not remove the Microsoft graph API.

Select server_app API

Remember we talked about scope in server_app. Here you will see it in action. Since we selected Admin and User, so both of them can consent. If we would have selected Admin only, then only Admin will be able to Grant access.

grant permission

You need to use below values in UI to allow secure of access of Backend.

  • issuer:<tenant_id>

  • resource: value that we copied in Step 5 of server_app.

  • client Id: Application Id for client_app ( we copied it in Step 2, of client_app )

  • redirectUri: It is the same URL, that we selected in Step 1 of client_app.

I hope this implementation will help you in enabling azure ad security for your backend, and allowing secure access from UI.

Comments and feedback are most welcomed.

Please follow me on Linkedin, Github, and join our newsletter to keep yourself updated.

Thanks for reading. Happy Learning 😊


Recent Posts

See All