Setting up OAuth with RapiDoc

Demo

Here is a minimal sample spec containing OAuth Authentication schemes ( view )
Here is how it is rendered in RapiDoc ( view )

Short Version

Register your app with an Authorization Provider such as Microsoft Active Directory
Create index.html containing <rapi-doc> element ( view )
Create another html and name it oauth-receiver.html containing <oauth-receiver> element ( view )

You are all set !!!

The Long story

Overall flow (Authorization Code)

Register client with Authorization Server

For this demo I am going to use IdentityServer as the OAuth provider. This is a demo Identity provider which is pre-configured with some users and supports various oAuth authentication flows
Register OAuth Client with identity Provider: Normally you need to register your client application with the Identity provider which will provide you with a client-id and client-secret but in our case we donot need to do so because our demo identity server is pre-configured with some sample client-id and secret

Setup RapiDoc

Below are the two files that you need to have

index.html (I am using the name index.html but you are free to use any name, it is the html that contain <rapi-doc> element)
oauth-receiver.html (It is important that you name this file exactly as oauth-receiver.html and place in the same location where the above file is)

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: Works only on `http://localhost...`
          version: "1.0"
        servers:
        - url:  https://demo.identityserver.io
        paths:
          /api/test:
            get:
              summary: Test API
              security:
                - short-lived-oauth:
                  - api
                - long-lived-oauth:
                  - api
                - client-credential-oauth:
                  - api
              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
                - client-credential-oauth:
                  - openid
                  - email
                  - profile
                - basic: []
                - api-key1: []
              responses:
                '200':
                  description: Successful operation
        components:
          securitySchemes:
            short-lived-oauth:
              type: oauth2
              description: Provides OAuth token valid for short duration ~75 seconds
              # vendor-extension x-client-id and x-client-secret to prefill data
              x-client-id: interactive.confidential.short
              x-client-secret: secret
              flows:
                authorizationCode:
                  authorizationUrl: https://demo.identityserver.io/connect/authorize
                  tokenUrl: https://demo.identityserver.io/connect/token
                  scopes:
                    openid: OpenID
                    email: Email 
                    profile: Profile 
                    api: API 
            long-lived-oauth:
              type: oauth2
              description: Provides an OAuth token thats valid for long durations
              x-client-id: interactive.confidential
              x-client-secret: secret
              flows:
                authorizationCode:
                  authorizationUrl: https://demo.identityserver.io/connect/authorize
                  tokenUrl: https://demo.identityserver.io/connect/token
                  scopes:
                    openid: OpenID
                    email: Email 
                    profile: Profile 
                    api: API 
            client-credential-oauth:
              type: oauth2
              description: Provides an OAuth token thats valid for long duration
              x-client-id: m2m
              x-client-secret: secret
              flows:
                clientCredentials:
                  tokenUrl: https://demo.identityserver.io/connect/token
                  scopes:
                    openid: OpenID
                    email: Email 
                    profile: Profile 
                    api: API