Setting up OAuth with RapiDoc

Demo

Short Version

You are all set !!!

The Long story

Overall flow (Authorization Code)

Register client with Authorization Server

Setup RapiDoc

Below are the two files that you need to have

index.html (This is our main file that contains the <rapi-doc> element )
      
        <!doctype html>
        <head>
          <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
        </head>
        <body>
          <rapi-doc spec-url = "https://mrin9.github.io/RapiDoc/specs/oauth.yaml" > 
          </rapi-doc>
        </body>
      
    

oauth-receiver.html
the <oauth-receiver> custom element in this file, requests for an Authorization Code from Authorization Server by providing client_id and redirect URL. Upon receiving a valid auth-code, it passes to <rapi-doc> element. RapiDoc, then uses this Auth-Code to request for the Access Token .
      
        <!doctype html>
        <head>
          <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
        </head>

        <body>
          <oauth-receiver> </oauth-receiver>
        </body>
      
    

The OpenAPI spec

Our demo Identity server provides few sample APIs for testing.
Below is the OpenAPI spec which contains couple of APIs protected with identity server. You can check out how these are rendered through RapiDoc and how rapidoc exchanges oAuth tokens with the demo IdentityServer | Demo
      
        openapi: 3.0.0
        info:
          title: Identity 4 Server
          description: Test case for oAuth flows
          version: "1.0"
        servers:
        - url:  https://demo.duendesoftware.com
        paths:
          /api/test:
            get:
              summary: Test API
              security:
                - short-lived-oauth:
                - long-lived-oauth:
              responses:
                '200':
                  description: Successful operation
          /connect/userinfo:
            get:
              summary: Get User Info
              security:
                - short-lived-oauth:
                  - openid
                  - email
                  - profile
                - long-lived-oauth:
                  - openid
                  - email
                  - profile
              responses:
                '200':
                  description: Successful operation
        components:
          securitySchemes:
            short-lived-oauth:
              type: oauth2
              description: Provides OAuth token valid for short duration ~75 seconds
              
              # pre filling client-id, secret and scopes for (ALL flows)
              x-client-id: interactive.confidential.short
              x-client-secret: secret
              x-default-scopes:
                openid

              flows:
                authorizationCode:
                  authorizationUrl: https://demo.duendesoftware.com/connect/authorize
                  tokenUrl: https://demo.identityserver.io/connect/token
                  scopes:
                    openid: OpenID
                    email: Email 
                    profile: Profile 
            long-lived-oauth:
              type: oauth2
              description: Provides an OAuth token thats valid for long durations
              flows:
                authorizationCode:
                  authorizationUrl: https://demo.duendesoftware.com/connect/authorize
                  tokenUrl: https://demo.identityserver.io/connect/token
                  scopes:
                    openid: OpenID
                    email: Email 
                    profile: Profile 

                  # pre filling client-id, secret and scopes for (SPECIFIC flow)
                  x-client-id: interactive.confidential
                  x-client-secret: secret
                  x-default-scopes:
                    openid
                  # when x-pkce-only=true, it will not allow to provide or send client_secret through the UI  
                  x-pkce-only: true