Skip to content

Commit b12edeb

Browse files
mrin9mrin9
committed
Added OAuth Example
1 parent 03b53f3 commit b12edeb

File tree

8 files changed

+186
-392
lines changed

8 files changed

+186
-392
lines changed

‎docs/examples/oauth-bitbucket.html‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎docs/images/oauth-auth-code.png‎

45 KB
Loading

‎docs/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ h1,h2,h3 { font-weight:300; }
2828
.dark-gray { color:#444; }
2929
.light-gray { color:#aaa; }
3030
.blue { color:steelblue; }
31+
.orange { color:orangered; }
3132
.small-font {font-size:12px;}
3233
.table-title { margin: 12px 0 5px 0; font-weight:bold; }
3334
.descr {

‎docs/list.html‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,10 @@
6666
</div>
6767
<div style="display:flex; width:100%; flex-wrap:wrap; justify-content:center;">
6868
<div class = "container" >
69-
<a href="./examples/example1.html"> Basic Usage </a>
69+
Petstore
7070
<img style="width:32px" src="./images/dog.png"/>
71-
<div class = "c-description" >
72-
Petstore
73-
</div>
71+
<a href="./examples/example1.html"> Basic Petstore </a>
72+
<a href="./examples/petstore-extended.html"> Extended Petstore </a>
7473
</div>
7574

7675
<div class = "container" >
@@ -119,9 +118,9 @@
119118
</div>
120119

121120
<div class = "container" >
122-
<a href="./examples/default-schema-tab.html"> Schema View </a>
121+
<a href="./examples/schema-tab-default.html"> Schema View </a>
123122
<div class = "c-description" >
124-
Set the default tab in Schema to EXAMPLE insted on MODEL
123+
Set the default tab in Schema to EXAMPLE instead on MODEL
125124
</div>
126125
</div>
127126

@@ -173,6 +172,13 @@
173172
<a href="./examples/dynamic-form-params.html"> Form Parameters - Dynamic </a>
174173
</div>
175174

175+
<div class = "container">
176+
<div> OAUTH</div>
177+
<img style="width:32px" src="./images/oauth.png"/>
178+
<a href="./oauth_instructions.html"> OAuth Instructions</a>
179+
<a href="./examples/oauth.html"> OAuth Demo </a>
180+
181+
</div>
176182

177183
<div class = "container">
178184
<a href="./examples/additional-props.html"> Additional Properties </a>

‎docs/oauth_example.html‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎docs/oauth_instructions.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!doctype html>
2+
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag() { dataLayer.push(arguments); }
9+
gtag('js', new Date());
10+
11+
gtag('config', 'UA-132775238-1');
12+
</script>
13+
14+
<meta charset="utf-8">
15+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
16+
<meta name="description"
17+
content="RapiDoc is Web Component based Swagger & OpenAPI Spec Viewer. Alternate for SwaggerUI or Redoc. It is fast, small and made with lit-element">
18+
<meta name="keywords" content="RapiDoc,ReDoc,Swagger,SwaggerUI,Custom Element,Web Component,OpenAPI,REST">
19+
20+
<link rel="shortcut icon" type="image/png" href="./images/logo.png" />
21+
22+
<!-- Fonts -->
23+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
24+
<link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
25+
26+
<link rel="stylesheet" href="./index.css">
27+
<link rel="stylesheet" href="table.css">
28+
29+
<!-- Code Highlight -->
30+
<link rel="stylesheet" href="./highlight/styles/zenburn.css">
31+
<script src="./highlight/highlight.pack.js"></script>
32+
<script>hljs.initHighlightingOnLoad();</script>
33+
34+
<title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
35+
<style>
36+
.m-table {
37+
width: 100%;
38+
}
39+
40+
#main-img {
41+
width: 740px;
42+
}
43+
44+
.container {
45+
border: 1px solid #555;
46+
border-radius: 2px;
47+
margin: 5px;
48+
padding: 8px;
49+
width: 200px;
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
}
54+
55+
</style>
56+
</head>
57+
58+
<body>
59+
<div class='topbar'>
60+
<div class="header">
61+
<a class="menu-item" data-action="url" href="./index.html">
62+
<img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;"
63+
href="./index.html" />
64+
</a>
65+
<div class="product-name">RapiDoc - OAuth Example</div>
66+
<div class="menu" style="flex:1"></div>
67+
<nav class="menu" onclick="goToSection(event)">
68+
<a class="menu-item" data-action="url" href="./index.html"> Home </a>
69+
<a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
70+
<a class="menu-item" data-action="url" href="./api.html"> API </a>
71+
<a class="menu-item hide-in-mobile" data-action="url" href="https://mrin9.github.io/RapiPdf/"> RapiPDF </a>
72+
<a class="menu-item" data-action="url" href="https://github.com/mrin9/RapiDoc"> GitHub </a>
73+
</nav>
74+
</div>
75+
</div>
76+
<div style="margin:24px 48px; max-width:730px; width:850px">
77+
<h1> Setting up OAuth with RapiDoc</h1>
78+
<h2> Demo </h2>
79+
<ul>
80+
<li> Here is a minimal sample spec containing OAuth Authentication schemes (<a href="https://github.com/mrin9/RapiDoc/blob/master/docs/specs/oauth.yaml" target="_blank"> view </a> )</li>
81+
<li> Here is how it is rendered in RapiDoc (<a href="./examples/oauth.html"> view </a>)</li>
82+
</ul>
83+
<h2> Short Version </h2>
84+
<ul>
85+
<li> Register your app with an Authorization Provider such as https://bitbucket.org </li>
86+
<li> Create <span class='mono orange'> index.html </span>containing <span class='mono orange'> &lt;rapi-doc&gt;</span> element (<a href="#index-html"> view </a>)</li>
87+
<li> Create another html and name it <span class='mono orange'> oauth-receiver.html </span> containing <span class='mono orange'> &lt;oauth-receiver&gt;</span> element (<a href="#auth-receiver-html"> view </a>)</li>
88+
</ul>
89+
You are all set !!!
90+
<h2> The Long story </h2>
91+
92+
<h3> Overall flow (Authorization Code)</h3>
93+
<img style="width:720px" src="./images/oauth-auth-code.png" />
94+
95+
<h3>Register client with Authorization Server</h3>
96+
<p>
97+
<ul>
98+
<li>
99+
For this demo I am going to use <b>BitBucket</b> as the OAuth provider, so SignUp with https://bitbucket.org/ if you dont have an account
100+
</li>
101+
<li>
102+
<b>Register OAuth Client in Bitbucket: </b> In my case the client is https://mrin9.github.io. <br/>
103+
In your case it could be localhost:{port} or the domain from where you are hosting your html containing RapiDoc element
104+
<ul>
105+
<li>
106+
While registering provide the <span class="blue">Redirect URL</span> as the url of <span class="blue mono"> oauth-receiver.html </span> that you created above
107+
</li>
108+
<li>
109+
Upon successful registration, you should be provided with a client_id and client_secret
110+
</li>
111+
</ul>
112+
</li>
113+
</ul>
114+
</p>
115+
116+
<h3> Setup Client </h3>
117+
<b>Client: </b> This is the app's domain that host the html containing <span class='mono'> &lt;rapi-doc&gt;</span>
118+
element.<br/>
119+
In case of RapiDoc OAuth demo, since we host it from Github pages, it is https://mrin9.github.io<br/><br/>
120+
Below are the two files that our server must have<br/><br/>
121+
122+
<a id='index-html' class="blue mono">index.html</a> (This is our main file that contains the <span class='mono'> &lt;rapi-doc&gt;</span> element )
123+
<pre><code class="shadow3 code-block">&lt;!doctype html&gt;
124+
&lt;head&gt;
125+
&lt;script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
126+
&lt;/head&gt;
127+
&lt;body&gt;
128+
&lt;rapi-doc spec-url = "https://mrin9.github.io/RapiDoc/specs/oauth.yaml" &gt;
129+
&lt;/rapi-doc&gt;
130+
&lt;/body&gt;
131+
</code></pre>
132+
<br/>
133+
134+
<a id='auth-receiver-html' class="blue mono"> oauth-receiver.html </a><br/>
135+
the <span class='mono orange'> &lt;oauth-receiver&gt;</span> custom element in this file,
136+
requests for an Authorization Code from Authorization Server by providing client_id and redirect URL.
137+
Upon receiving a valid auth-code, it passes to <span class='mono orange'> &lt;rapi-doc&gt;</span> element.
138+
RapiDoc, then uses this Auth-Code to request for the <span class="orange">Access Token </span>.
139+
<pre><code class="shadow3 code-block">&lt;!doctype html&gt;
140+
&lt;head&gt;
141+
&lt;script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
142+
&lt;/head&gt;
143+
144+
&lt;body&gt;
145+
&lt;oauth-receiver&gt; &lt;/oauth-receiver&gt;
146+
&lt;/body&gt;
147+
</code></pre>
148+
</p>
149+
</div>
150+
</body>
151+
152+
</html>

‎docs/specs/oauth.json‎

Lines changed: 0 additions & 83 deletions
This file was deleted.

0 commit comments

Comments
 (0)