-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
81 lines (81 loc) · 4.88 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="ROBOTS" content="INDEX, FOLLOW" />
<meta name="VIEWPORT" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://saxobank.github.io/openapi-samples-js/assets/css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="https://saxobank.github.io/openapi-samples-js/favicon.ico">
<script type="text/javascript" src="../../assets/js/boilerplate.js" defer></script>
<script type="text/javascript" src="demo.js" defer></script>
<title>Get a token using the code flow</title>
</head>
<body>
<section class="page-header">
<h1 class="project-name">OAuth2 Code Flow (step 1)</h1>
<h2 class="project-tagline">Setup URL for the Authorization Code Flow</h2>
<a href="https://saxobank.github.io/openapi-samples-js" class="btn">← Back to main page</a>
<a href="https://github.com/SaxoBank/openapi-samples-js/tree/main/authentication/oauth2-code-flow" class="btn">View on GitHub</a>
</section>
<section class="main-content">
<h1>OAuth2 Code Flow Sample</h1>
This is a demo on how to get a token using the authorization code flow.<br />
The code flow is the preferred flow, because it allows refreshing the token, so your app can use the API for a long time.
<br />
This page redirects you to the login website, to authenticate and retrieve a code.<br />
<br />
The code flow requires a backend, so the app secret remains secret. This example contains two flavours, PHP and NodeJs.
<br />
<h3>Steps for PHP</h3>
<ol>
<li>Setup a web server running PHP.</li>
<li>Copy files from <a href="https://github.com/SaxoBank/openapi-samples-js/tree/main/authentication/oauth2-code-flow/redirect/" target="_blank">Github</a> to "http://localhost/openapi-samples-js/authentication/oauth2-code-flow/redirect/".</li>
<li>The redirect URL is now "http://localhost/openapi-samples-js/authentication/oauth2-code-flow/redirect/". Add this as redirect below.</li>
<li>Optional: Create <a href="https://www.developer.saxo/openapi/appmanagement" target="_blank">your own app</a> with the redirect URL of your choice.</li>
<li>Optional: If you've created your own app: modify server-config.php, so it contains the correct app key, secret and redirect URL.</li>
</ol>
See the <a href="https://github.com/saxobank/openapi-samples-php">PHP Repository of Saxobank</a> for more samples with PHP.
<h3>Steps for NodeJs</h3>
<ol>
<li>Clone <a href="https://github.com/SaxoBank/openapi-samples-js" target="_blank">this repository</a> and navigate to \openapi-samples-js\authentication\oauth2-code-flow\redirect\backend-js\</li>
<li>Get the required modules using "npm install".</li>
<li>Launch the express web server with "node server.js".</li>
<li>The redirect URL is now "http://localhost:1337/". Add this as redirect below.</li>
<li>Optional: Create <a href="https://www.developer.saxo/openapi/appmanagement" target="_blank">your own app</a> with the redirect URL of your choice.</li>
<li>Optional: If you've created your own app: modify server.js, so it contains the correct app key, secret and redirect URL.</li>
</ol>
<br />
<br />
<label>App Key: <input type="text" class="text-field" id="idEdtAppKey" value="faf2acbb48754413a043676b9c2c2bd5" placeholder="Paste App Key.." /> (Find your App Key <a href="https://www.developer.saxo/openapi/appmanagement" target="_blank">here</a>)</label><br />
<label>Redirect URL: <input type="text" class="text-field" id="idEdtRedirectUrl" value="http://localhost/openapi-samples-js/authentication/oauth2-code-flow/redirect/" placeholder="Paste redirect URL.." list="redirectOptions" /></label>
<datalist id="redirectOptions">
<option value="http://localhost/openapi-samples-js/authentication/oauth2-code-flow/redirect/">
<option value="http://localhost:1337/">
</datalist><br />
<label>Optional data to use after login: <input type="text" class="text-field" id="idEdtState" value="This data is communicated via the 'state' parameter" /></label><br />
<label>
Login page language:
<select class="selector" id="idCbxCulture">
<option value="-">Default - last active</option>
<option value="en">English</option>
<option value="nl">Dutch</option>
<option value="fr">French</option>
<option value="it">Italian</option>
<option value="da">Danish</option>
</select>
</label>
<br />
<br />
<input type="button" class="action-button" value="Test redirect URL" id="idBtnTestRedirectUrl" />
<input type="button" class="action-button" value="Test OpenAPI" id="idBtnTestOpenApi" />
<input type="button" class="action-button" value="Generate link" id="idBtnGenerateLink" />
<br />
<br />
<br />
Response: <pre class="highlight" id="idResponse">Click button to launch function.</pre>
<br />
JS code: <pre class="code-block" id="idJavaScript">Click button to show code.</pre>
<footer class="site-footer"><span class="site-footer-credits" id="idFooter"></span></footer>
</section>
</body>
</html>