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.

14181418

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.
14171417

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.
14201420

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.
14201420

Auth code flow Token set

14181418

Auth code flow Claims

14191419

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.
14181418

Implicit flow with authorize URL

  1. On click of Authorize, the authorize response is returned with the access_token.
14191419

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.
14151415

Hybrid flow with authorization URL

  1. On Authorize action, we get the Authorize Response and the preview of the Token Endpoint.
14211421

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.

What’s Next