Explore OIDC flows

Introduction

Refer to our OIDC guide to know more about OpenID Connect.

This guide provides an overview of how OpenID Connect works with a custom application like the sample app.

After successful login to the Angular - Java sample app, use the API + OIDC card to start with OIDC flows.

API + OIDC card in the login protocols screenAPI + OIDC card in the login protocols screen

API + OIDC card in the login protocols screen

After clicking on the Continue button, OIDC three flows will be shown.

  • Authorization
  • Implicit
  • Hybrid

Each flow explanation as follows.

Authorization code flow

When configuring public applications, such as mobile apps or single-page apps, where the client secret is not secure, this flow helps removes the use of client secret making it more secure.

Following section provides more details about Authorization code flow in Angular Java Sample App.

  1. Select Authorization from the drop down and click Build Authorize URL.
Authorization code flow after build authorization URLAuthorization code flow after build authorization URL

Authorization code flow after build authorization URL

  1. The generated authorization URL is hit on click of Authorize after taking access permissions of the scopes requested (which were setup in the settings page).
  2. The authorization code is sent along with a preview of the Token Endpoint API.
Auth code along with token endpoint API requestAuth code along with token endpoint API request

Auth code along with token endpoint API request

  1. On click of Proceed, Token set, Claims and User Info is fetched using the access_token.
Auth code flow Token setAuth code flow Token set

Auth code flow Token set

Auth code flow ClaimsAuth code flow Claims

Auth code flow Claims

Auth code flow User infoAuth code flow User info

Auth code flow User info

  1. Try Another Flow performs the logout against the user and navigates to respective page of the sample app.

Implicit flow

This flow is the simplest and is typically used by JavaScript applications running in a browser. The access token under this flow is assumed to be used temporarily, by default id_token is selected as response_type and if token is also selected the response contains access_token along with id_token.

Following section provides more details about Implicit code flow in Angular Java Sample App.

  1. Select Implicit from the drop down and check token box to get it as the response.
  2. Click the Build Authorize URL to get the URL as in the previous flow with the response types.
Implicit flow with authorize URLImplicit flow with authorize URL

Implicit flow with authorize URL

  1. On click of Authorize, the authorize response is returned with the access_token.
Implicit flow authorize responseImplicit flow authorize response

Implicit flow authorize response

  1. On click of Proceed, we get the Claims and User Info information.
  2. Try Another Flow performs the logout against the user and navigates to respective page of the sample app.

Hybrid flow

Hybrid flow is the combination of Authorization code and Implicit flow.

Following section provides more details about Hybrid code flow in Angular Java Sample App.

  1. Select Hybrid from the dropdown and choose the response types for additional information in the response and click on Build Authorize URL.
Hybrid flow with authorization URLHybrid flow with authorization URL

Hybrid flow with authorization URL

  1. On Authorize action, we get the Authorize Response and the preview of the Token Endpoint.
Hybrid flow with authorize response and token endpoint previewHybrid flow with authorize response and token endpoint preview

Hybrid flow with authorize response and token endpoint preview

  1. On Proceed button click, we get similar response as the Authorization code flow with Token set, Claims and User Info.
  2. Try Another Flow performs the logout against the user and navigates to respective page of the sample app.