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 https://bitbucket.org
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 BitBucket as the OAuth provider, so SignUp with https://bitbucket.org/ if you dont have an account
Register OAuth Client in Bitbucket: In my case the client is https://mrin9.github.io.
In your case it could be localhost:{port} or the domain from where you are hosting your html containing RapiDoc element
- While registering provide the Redirect URL as the url of oauth-receiver.html that you created above
- Upon successful registration, you should be provided with a client_id and client_secret

Setup Client

Client: This is the app's domain that host the html containing <rapi-doc> element.
In case of RapiDoc OAuth demo, since we host it from Github pages, it is https://mrin9.github.io

Below are the two files that our server must 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>