Skip to main content

OpenID Connect Playground

One of the best ways to learn the OIDC flow is to see it in action. This is also an excellent resource to troubleshoot issues with OIDC integrations - it allows you to see the tokens flowing between the browser, the relying party, and the identity provider right in your browser. This tutorial leverages the OpenID Connect Playground debugging tool provided by Auth0 / Okta (they may be competition, but they have great resources for developers!)

Screenshot of the OpenID Connect Playground header

The whole setup can be completed in under 10 minutes, and we think you will find it is well worth the time investment.

Part 1 - BlokSec Setup​

Create the Application​

  1. In BlokSec, Add Application -> Create Custom
  2. Select SSO Type "OpenID Connect"
  3. Enter a name (e.g., "OIDC Playground")
  4. Enter https://openidconnect.net/callback as the Redirect URI
  5. Add any other configuration settings you would like to test such as Attributes
    Screenshot of application configuration
  6. Click Submit to save the application

Copy the Application ID and Secret​

The Application ID and Secret will be used when configuring our OpenID Connect relying party - the playground app. In many OIDC settings these are referred to as the client ID and client secret respectively.

  1. Make note of the Application ID
  2. Click Generate App Secret and make note of the generated Application Secret Screenshot of the application ID and secret configuration

Register a Test Account​

  1. In the application, from the 'gear' menu, select Create Account
  2. Create an account for yourself to test with
    1. The registration link will be sent to the Email provided
    2. You may choose any Account Name but we suggest using your email address for the account name as well (best practice)
  3. Complete the registration on your yuID mobile authenticator app

Part 2 - Using the Playground Tool​

  1. Navigate to Auth0's OpenID Connect Playground
  2. Click Configuration and complete as follows:

    Server Template: Custom
    Discovery Document URL: https://api.bloksec.io/oidc/.well-known/openid-configuration
    (*Click Use Discovery Document*)
    OIDC Client ID: (Application ID from BlokSec)
    OIDC Secret: (Application Secret from BlokSec)
    Scope: openid profile email > Screenshot of OpenID Connect Playground configuration

  3. Click the Start button to begin the OIDC flow
  4. You will be redirected to BlokSec - login with your test account
  5. Once login is successful, you will be redirected back to the OpenID Connect Playground with an authorization code
    tip

    Open your browser's Network tab under Developer Tools to see the HTTP requests and responses!

  6. Click Exchange to have the OpenID Connect Playground server send the authentication code to BlokSec in exchange for an access_token and id_token
  7. Click Next to begin the token verification process
  8. Click Verify to have the OpenID Connect Playground server verify the signature on the id_token and decode the payload
    info

    You can use this resource to check that any custom attributes are configured correctly by inspecting exactly what is being sent to a relying part during an OIDC exchange.