OpenID Connect Authentication and OAuth 2.0 Authorization in Web Application

15 min readDec 31, 2021

Introduction

Recently, it has been observed a sudden spike in web based applications development due to Covid-19 situation. Every one wants to run their business from home either it is eCommerce, Banking, Food delivery, Pharmacy & Health Consultancy and so on. Since, people are spending more time at home so it also increase load on social media. These need increased users of web application and demanded more-and-more web applications for human life sustenance.

As user grows, complexity of application increased, security concern deepen therefore, application developers moved to new design pattern to cater the new level of scalability and complexity and hence design pattern like micro-service and nano-service is getting popular.

As we follow new design pattern, it enables to keep the cross-cutting concerns separately and focus on business logic development. Also there number products which provides software products common cross-cutting concerns like Authentication, Authorization, Logging etc. Hence, the Identity and Access Management (IAM) solutions are also increased.

Additionally, each web application needs user management, access management as per their specific business need therefore it increased the number of user account for each web application. For example, if we consider daily life needs: to pay electricity bill, we need to have user account on bill payment web application; for social media, we need to have another account on social media. This creates a major problem for users to have multiple username and password for each website. To overcome from this problem, we need to move the Single-Sign-On (SSO) technology where user logins once and can visit each linked web application without login again-and-again.

These basic needs related to authentication & authorization open need to implement sophisticated and simple authentication & authorization mechanism thus we are discussion about OpenID Connect and OAuth 2.0 implementation.

Business Needs

If we develop any web application, it is required to develop the mechanism for user authentication & authorization. There are various authentication & authorization mechanism available for web applications, we need to evaluate and choose one the option which best fits with business need.

Let’s consider few business needs:

Web application development is following modern application design pattern like micro-services or nano-services where complex user authentication & authorization mechanism cannot be implemented with each service hence this authentication portion developed separately
Application requires to have Single-Sign-On (SSO) where user logins once and can traverse in multiple related web applications without login again-and-again
Authentication mechanism requires Multi-Factor Authentication (MFA) like OTP, Device Authorization, RSA token etc.
Authentication & authorization must be simple, reliable, highly secure and scalable

Based on above listed business need we can choose OpenID Connect and OAuth 2.0 for implementation. It is technology agnostic therefore can be used with different technical stacks as well.

Terminologies

Federation — An organization users/services group in hierarchal structure
Principal — A user identity for any entity, it could be human, machine or service
Claim — A significance which principal claims to have, e.g. username, expiry date etc.
Authentication — A process where user/principal identity is verified what he claims to be. Normally, it verifies with username/userid & password combination but can be verified by using MFA as well.
Multi-Factor Authentication — When principal is verified with multiple ways e.g. username & password + One Time Password (OTP), username & password + RSA token, username & password + device approval etc.
Authorization — A process to verify if the user is authorized for requested access or not.
Identity Provider (idP) — A system entity that creates, maintains and manages identity information for principals and also provides authentication services to reply applications within federation or distributed network.
Identity and Access Management (IAM) — A framework of policies and technologies that ensure that right users have the appropriate access to technological resources. idP is subset of IAM solutions.
Resource Server — A resource server is exposing a protected resource which user request for. E.g. get balance from user account endpoint.
Front-end Resource — A front-end resource is responsible for drawing screens on users browser. In monolithic applications, front-end and backend resources are part of same running instance of application but in micro-services, normally front-ends are hosted separately.
JWT- JSON Web Token (JWT) is used to delegate or share identity and claim about a principal between two parties. OAuth 2.0 uses JWT for identity and claim sharing between authentication server to resource server.

Technical Stack

To implement Authentication and Authorization in Web Application based upon OpenID Connect and OAuth 2.0, any web based programming language can be used as it’s related technology and libraries are available in most of the web based programming languages e.g. .Net, Java etc.

Although, specification of OpenID Connect and OAuth 2.0 is followed by different vendors but may be minor difference in screens for user management and integration and hence each vendor provides their own implementation documentation like:

Auth0 Implementation — https://auth0.com/docs/authorization/protocols/openid-connect-protocol

Google Implementation — https://developers.google.com/identity/protocols/oauth2/openid-connect

OneLogin Implementation — https://developers.onelogin.com/openid-connect

With this article, we have provided source code for implementation and we used Open Source IAM solution Keycloak as authorization server and developed backend services with Java & Spring Boot. For front-end, we used angular application. Therefore below technical stacks are touched:

Java as programming language
Spring Boot with Tomcat, Spring Web and Spring Web Security
Maven as build tool
Keycloak as IAM solution
NodeJS and Angular for frontend development

Please follow the GitHub section for detailed information about setup on local environment.

GitHub Link: https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm

Audience

This article covers the Authentication & Authorization implementation in Web Application using OpenID Connect and OAuth 2.0. And talks about how can be used third-party IAM solution and integration. This will give insight of mentioned technologies from design and implementation perspective so it will be very useful for developers, architects and product owners.

Problem

In every web application, authentication and authorization is essential part which need to be developed from functional requirement perspective and also for the application security which is a non-functional requirement for application.

There are various technique and methodologies available for authorization and authentication, now question is which one to be used. Below are some base requirement criteria for application:

Application is being developed with modern design pattern like micro-service where authentication & authorization will be a separate concern
Complex and changeable authentication & authorization policy which need to be upgraded based upon different scenarios
Need to have Single-Sign-On (SSO)
Must be simple, secure and proven technology which provides easy implementation
There are multiple user federation / source
Multi-tenancy need to be implemented based upon user realm
Third-party Identity Providers (idPs) to be supported
Scalable IAM solution needed to support millions of users
User could be from same or multiple domain

Solution

User Management, application security, authentication & authorization is common need for application and there are various way to handle it e.g.:

Basic Auth — Conventional technique
JWT / Bearer token
API Key
OpenID Connect & OAuth 2.0
Certificate based Authentication
SAML based Authentication
Kerberos based Authentication
NTLM based Authentication

Based upon the criteria defined in ‘Problem’ section, the best approach is OpenID Connect and OAuth 2.0 implementation. We will discuss why but reaching to why, let’s understand what is OpenID Connect and OAuth 2.0.

OpenID Connect is simple protocol defined for authentication where it identifies the end-user identity and get basic details. As we are aware of increasing social media applications e.g. Facebook, Instagram, Twitter etc. as applications are growing, and these application had separate and distinct user management and authentication mechanism they need separate set of username & password combination for same end-user. Consider the scenario, An end-user ‘A’ has a Facebook account and Instagram account, and if users are managed separately, ‘A’ must have to maintain and remember two username and password (it may be possible to have same username and password, but having same username is less possible as the same username in other application may have been utilized. Also, keeping same password is bad idea from security perspective).

To overcome from multiple account and login, major technology organization (Google, Microsoft, Oracle etc.) collaborate together and formed a group OpenID Foundation and formed a suit of Protocols for authentication, authorization and SSO called ‘OpenID Connect Protocol Suit’. Below is diagram depicting OpenID Connect Protocol Suit:

Figure 1: OpenID Connect Protocol Suit — Protocol arrangements in suit

OpenID Connect is mainly responsible for defining protocol for user authentication nothing else. It is based on REST based endpoint calling and support authentication for web, mobile and javascript based clients.

As we seen OpenID Connect Protocol Suit, as core structure it has, Core, Discovery and Dynamic Client Registration. Additionally, session management and form post response mode. Apart from the core structure, it also included other protocol and technologies like OAuth 2.0, JWT and so on to support Authorization and other aspects.

OAuth 2.0 is additional layer with OpenID Connect uses JWT based Bearer token based authorization where JWT is used for principal claim storage format and sharing.

Both OpenID Connect and OAuth 2.0, defines protocols for Authentication and Authorization along with additional features like JWT support, encryption, claim and security assertion and so on.

The major tech organizations designed their IAM solution by following the OpenID Connect Protocol Suit thus, they are very interoperable, a user can create account with Google and can login with other websites without having separate account and password and without login again-and-again.

Now, let’s validate the criteria defined in ‘Problem’ section:

This separate out the authentication & authorization mechanism and suggest to form a separate IAM solution so can be used with modern application design pattern along with conventional application design
Since IAM solution is separate, the authentication and authorization policies managed separately and can be made more complex based upon organizational security policy
It support SSO with various third-parties
Since it uses a proven technologies with established encryption and hashing algorithm so it is highly secure and reliable
Support of multiple federation and user repository support along with third-party integration
Realm based multi-tenancy support with IAM solution can easily be developed
Protocol provides a way to create inherent support of multiple idPs
Since, IAM solution can be completely separate, it can be scaled at any level based upon available infrastructure
If we design IAM solution on OpenID Connect, multi-domain user support can also be build very easily

Let’s understand OpenID Connect flow for Authentication with below diagram:

Figure 2: OpenID Connect Authentication Flow

As we are aware OpenID Connect provides authentication so next is required the authorization with each call with application. For this, OAuth 2.0 works as additional layer with OpenID Connect and provides authorization. Let’s understand this with below diagram:

Here,

Authorization server, is a IAM solution which provides OpenID Connect based authentication mechanism along with OAuth 2.0 support.

Resource Applications, it has two parts, front-end and back-end. Front-end is for drawing users screens and backend are the business logic to be performed for business.

If we simplify the authentication and authorization workflow with OpenID Connect and OAuth 2.0, it would be like:

User opens the resource application URL’s home page or any other page
Request goes to backend to check if valid authorization OAuth Bearer header available or not
If not, then redirect to Authorization sever for authentication, here user provided username and password and click on login button
Once, authentication passed, it again redirect back to resource application with either authorization code / JWT bearer token
Now, resource front-end use same toke to make call to resource backend and backend validates received Bearer token for user request claims and authorize for the requested resource

In additional to straight flow, some application may implement OAuth 2.0 authorization with authorization code where access token is provided in two steps. Let’s understand this with below diagram:

Figure 3: OAuth 2.0 Authorization with grant type authorization code

Details:

User request for application resource, application resource validates user bearer token, if it is valid then user is redirected to Authorization server for authorization code, where authorization server shows a popup ‘ABC website requested for access, please confirm access to be provided’ if user consent is positive, an authorization code provide with response to application resource
If user does not have token or token is not valid, then also user is redirected to authorization server where user identity is verified and and asked to provide consent about that ABC website has requested for access of your profile, if user consent is positive then access code provided to application resource
In both cases (above), application resource receives a authorization code, using the same code, application resource makes a call to authorization server again to get the JWT token and additional details (additional details may be User’s First Name, Last Name, Age and other demographic detail as per need and application policy). Once, Authorization server receives valid authorization code, it generates a JWT token and provide to application resource.
Once, application resource receives the JWT token which contains user data and claim, it normally used for authorization at application resource side

We can demonstrate, OpenID Connect and OAuth 2.0 implementation with help of third-parities like GitHub, Google, LinkedIn, Microsoft by following their standard developer guideline.

Here, we have used Keycloak which is open source IAM solution which acts as authorization server, it support OpenID Connect, OAuth 2.0, SAML, User Federation and a lot more feature.

Please follow the GitHub works sections for the complete setup on local.

Conclusion

In web applications, OpenID Connect and OAuth 2.0 can be used to implement Authentication and Authorization very easily. As we discussed in earlier sections, the feature of OpenID Connect and OAuth 2.0, what are the features and benefit can be achieved.

OpenID Connect and OAuth 2.0 is getting more popularity as major software companies has designed their IAM solutions by following the OpenID Connect Protocol Suit which provides very easy integrated idP integrations with different relay parties (resource applications who uses the IAM solution for authentication and authorization). User does not have to maintain separate credentials for each website and user can use Single-Sign-On (SSO) while traversing multiple websites.

If we talk about from the security perspective, most of the IAM solution vendor provides MFA support, easy security policy definition with help of user interface and easy customization of IAM aspects. Major IAM solution also provides integration with multiple user federation, realm based multi-tenancy, integration with various identity providers, audit and monitoring features which makes the product owners life easy from user and identity management perspective.

If we talk about system to system integration one system communicates with another system without having human involvement, the authentication and authorization can also be implemented with these protocols very easily.

OpenID Connect Protocol Suit also opens gateway to support mobile devices, web application and javascript based authentication which can be utilized for a number of use cases.

Links of Work on GitHub

This article covers the OpenID Connect and OAuth 2.0 implementation with Web application to demonstrate Authentication with OpenID Connect and Authorization with OAuth 2.0. It can also demonstrate Single-Sign-On (SSO) based upon third-party Identity Provider (idP).

For this, Identity and Access Management (IAM) solution required. There are various IAM solutions are available from different software vendors example, Okta, Google, Azure etc. Here, we are using an Enterprises Open Source IAM solution named Keycloak. With this example, we are using embedded Keycloak with Spring Boot based project.

To demonstrate we need below projects from GitHub. Checkout these projects and follow the build and deployment steps given in GitHub page for each project:

A. Authorization Server — https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm/tree/main/oauth-authorization-server

To perform Authentication on OpenID Connect, we need an Authorization server. There are multiple third-party Authorization server available from different software vendors like Google, Facebook, Twitter etc. Here for demonstration purpose, embedded Keycloak has been used.

B. Resource Server — https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm/tree/main/oauth-resource-server

To demonstrate the OAuth 2.0 based authorization, a resource is required which must be protected. This project contains a Spring Boot based web application which contains endpoint resource protected with Spring Web Security and can only be access using correct token.

C. Front-End Angular Application — https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm/tree/main/oauth-ui-authorization-code-angular

This is a Spring Boot based web application which contains user screens developed into Angular and after build, it will be wrapped in Boot based project as static resources. It runs and provide user interface from where user can tries to access resource, then it redirects to Authorization server, once user provides userid and password, it again redirects to application and access the protected resource.

Below two projects are optional for demonstration:

D. Front-End Angular Application with Zuul — https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm/tree/main/oauth-ui-authorization-code-angular-zuul

This is again a Spring Boot based web application which contains user screens developed into Angular and after build, it will be wrapped in Boot based project as static resources. It runs and provide user interface from where user can tries to access resource, then it redirects to Authorization server, once user provides userid and password, it again redirects to application and access the protected resource.

Additionally, this contains Zuul which is a Gateway component and provides routing based upon the configuration in application.yaml. It enhance the front-end and allow to be on single URL in from front end side to prevent CORS based restrictions.

E. Custom User Provider for Keycloak — https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm/tree/main/custom-user-provider

This project can be used to create a custom user provider for Keycloak. It can be used to show users stored in database.

[Note: Build of Frontend project may take longer time as it will install nodejs and ng cli internally to compile typescript so please bear patiently]

Pre-Requisite Steps:

Checkout code, build and start projects A, B and C or D
Once project started, open browser and open URL: http://localhost:8083/auth/, it will open console page of Keycloak

Now click on ‘Administration Console’, it will open login page (use ‘sk-admin’ as user, and ‘pass’ as password)

Click on User and click on view all users

There must be edit button for each user, click on Edit, it will open user details, now go in Credential tab

Provide new password in ‘Password’ and ‘Password Confirmation’ input box and switch off temporary flag and click on reset password. It will open a popup for confirmation. Please confirm.

The above steps reset the password for the user and need to perform as prerequisite.

Now, let’s demonstrate actual authentication and authorization with D frontend:

Open URL http://localhost:8089/ and click on login

It will redirect to Authorization server for authentication with username and password

Provide the user name and password (for which we just reset the password in prerequisite stage) and click on ‘Log In’ button
It will perform authentication with OpenID Connect and redirect to application again

To verify OAuth 2.0, click on ‘New Foo’ button which makes call to application resource with JWT bearer token in Authorization header and does authorization at resource server and get response

[Note: While doing testing on local, browser‘s Network tab from developer mode can be opened to see what communication is going on what are the header / cookies are being created and passed to understand complete flow of OpenID Connect and OAuth 2.0]

References

GitHub Source Ref — https://github.com/siddhivinayak-sk/jwt-openid-oauth2.0-keycloak-kerberos-ntlm
OpenID Connect — https://openid.net/connect/
OpenID Connect — https://connect2id.com/learn/openid-connect
OAuth 2.0 — https://oauth.net/2/

About the Author

Sandeep Kumar holds Master of Computer Application degree working as Java developer having 10+ years of working experience. He has experience design and development of enterprises applications in domains like education, content, laboratory, and banking; got various appreciation for his solutions including spot appreciation for Glassfish to JBoss migration project. He secured Google Cloud Developer certificate and participated into OCI trainings. He is a part of HCL-ERS platform as Sr. Lead developer.