data-driven-docs

Selft training repo

Project maintained by ggranados Hosted on GitHub Pages — Theme by mattgraham

OpenID Connect (OIDC)

Table of Contents

OpenID Connect (OIDC) is an authentication and authorization protocol built on top of the OAuth 2.0 framework. It’s designed to provide a standardized and secure way for web applications, mobile apps, and other clients to authenticate users and obtain their basic profile information while ensuring their privacy and security.

The primary purpose of OpenID Connect is to enable Single Sign-On (SSO) and identity federation across different services and applications. It allows a user to authenticate once with an Identity Provider (IDP), often using their existing credentials (like those from a social media account or an organization’s directory service), and then use that authenticated session to access multiple applications without needing to log in separately for each one.

img.png

Back to top

Components and Functionality

Back to top

Basic OIDC AuthN Flow

Basic flow of how the OpenID Connect (OIDC) authentication process works:

img.png

It’s important to note that during the flow, there can be additional steps to handle scenarios like obtaining user consent, handling token expiration and renewal, and dealing with errors. The specific implementation might vary depending on the OIDC provider and the RP’s requirements.

Also, keep in mind that OIDC is built on top of OAuth 2.0, so the flow involves OAuth 2.0 concepts like authorization codes, access tokens, refresh tokens, and more. The OIDC layer adds the ID Token and user authentication aspects to the OAuth 2.0 framework.

Back to top

OIDC Flows

The choice of OpenID Connect flow depends on the type of application and its security requirements. There are three common flows:

Back to top

Example

Simplified example of how you might implement the OpenID Connect (OIDC) authentication flow in a web application using a JavaScript client and a mock Identity Provider (IDP) using the Implicit Flow. In this example, we’ll use a fictional IDP called “MockIDP.”

<!DOCTYPE html>
<html>
<head>
  <title>OIDC Authentication Example</title>
</head>
<body>
  <button onclick="login()">Login</button>
  <div id="profile" style="display: none;">
    <h2>Welcome, <span id="username"></span>!</h2>
    <img id="profile-picture" src="" alt="Profile Picture">
  </div>

  <script>
    function login() {
      // Construct OIDC authorization URL
      const clientId = 'your_client_id';
      const redirectUri = 'http://localhost:3000/callback'; // Replace with your callback URL
      const authorizationUrl = `https://mockidp.com/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=token&scope=openid%20profile&nonce=12345`;

      // Redirect to IDP for login
      window.location.href = authorizationUrl;
    }

    function handleCallback() {
      // Parse hash fragment from URL
      const hashParams = window.location.hash.substr(1).split('&').reduce((result, item) => {
        const parts = item.split('=');
        result[parts[0]] = parts[1];
        return result;
      }, {});

      if (hashParams.access_token) {
        // Display user profile
        document.getElementById('username').textContent = hashParams.name;
        document.getElementById('profile-picture').src = hashParams.picture;
        document.getElementById('profile').style.display = 'block';
      }
    }

    // Call the callback handler when the page loads
    window.onload = handleCallback;
  </script>
</body>
</html>

Remember that this example uses a simplified mock IDP and Implicit Flow for demonstration purposes. In a real-world scenario, you’d use a proper OIDC library or framework and follow best practices to ensure the security and reliability of the authentication process.

Back to top

OIDC Providers

Here are some of the commonly used and recommended OIDC providers:

These providers vary in terms of features, pricing, ease of integration, and target audience. When choosing an OIDC provider, consider factors such as the specific requirements of your application, security features, scalability, and developer experience. It’s also a good practice to review the latest documentation and user reviews to make an informed decision.

Back to top

Ref.

Get Started | Web Services and API Design