-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
143 lines (141 loc) · 4.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Octauthent Demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://octauthent.com/img/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="https://octauthent.com/img/favicon/favicon-16x16.png"
/>
<link
rel="icon"
type="image/x-icon"
href="https://octauthent.com/img/favicon/favicon.ico"
/>
<style>
html {
background: #fafafa;
}
.container {
max-width: 960px !important;
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<div class="content">
<div class="box">
<div class="block mt-3">
<h1 class="title">Octauthent Demo</h1>
</div>
<div class="block">
<p>Hi there 👋</p>
<p>Welcome the the Octauthent demo!</p>
<p>This simple website is composed of 2 pages:</p>
<ul>
<li>
The <a href="/">home page</a>, which you are currently
reading, accessible to everyone 🔓
</li>
<li>
A <a href="/private">private page</a>, protected by Octauthent
🔒
</li>
</ul>
</div>
<h2 class="title is-size-4">Credentials</h2>
<div class="block">
If you want to access the <a href="/private">private page</a>,
you'll need the following credentials:
</div>
<div class="block">
<div><b>username</b>: <code>demo</code></div>
<div><b>password</b>: <code>octauthent</code></div>
</div>
<div class="block">
<h2 class="title is-size-4">How it works</h2>
<p>
This website is <b>nothing more than 2 HTML files</b> hosted on
GitHub Pages!
<br />
<span class="is-size-7"
>You can read the source code
<a
href="https://github.com/octauthent/octauthent-demo"
target="_blank"
>on GitHub</a
>
if you want!</span
>
</p>
<p>
There is absolutely no code related to authentication, so
everybody could (normally) access the private page
</p>
<p>
However, thanks to
<a href="https://octauthent.com" target="_blank">Octauthent</a>,
here is what happens when you access
<code>demo.octauthent.com/private</code> from your browser:
</p>
<ol>
<li>
A DNS server recognizes the domain and responds with
<b>a Cloudflare IP</b>
</li>
<li>
Your browser <b>asks for the page</b> to the Cloudflare IP it
received
</li>
<li>
Cloudflare <b>runs the Octauthent code</b> to know what to do
</li>
<li>
If Octauthent decides that
<b class="has-text-danger">you are not allowed</b>, Cloudflare
<b>responds with a customized login form</b>
</li>
<li>
If Octauthent decides that
<b class="has-text-success">the page can be accessed</b>:
<ol>
<li>
Cloudflare <b>asks Github Pages</b> for the content of
<code>demo.octauthent.com/private</code>
</li>
<li>
Github recognizes the address and<b>
responds with the page content</b
>
</li>
<li>
Cloudflare <b>sends the response</b> back to your browser
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
</body>
</html>