/
index.html
94 lines (84 loc) · 3.39 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
<!doctype html>
<html>
<head>
<title>Dropbox JavaScript SDK</title>
<link rel="stylesheet" href="/styles.css">
<script src="/__build__/Dropbox-sdk.min.js"></script>
<script src="/utils.js"></script>
</head>
<body>
<!-- Example layout boilerplate -->
<header class="page-header">
<div class="container">
<nav>
<a href="/">
<h1>
<img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
JavaScript SDK Examples
</h1>
</a>
<a href="https://github.com/dropbox/dropbox-sdk-js/tree/master/examples" class="view-source">View Source</a>
</nav>
<h2 class="code">
<a href="/">examples</a> / authentication
</h2>
</div>
</header>
<div class="container main">
<div id="pre-auth-section" style="display:none;">
<p>This example takes the user through Dropbox's API OAuth flow using <code>Dropbox.getAuthenticationUrl()</code> method [<a href="http://dropbox.github.io/dropbox-sdk-js/Dropbox.html#getAuthenticationUrl">docs</a>] and then uses the generated access token to list the contents of their root directory.</p>
<a href="" id="authlink" class="button">Authenticate</a>
<p class="info">Once authenticated, it will use the access token to list the files in your root directory.</p>
</div>
<div id="authed-section" style="display:none;">
<p>You have successfully authenticated. Below are the contents of your root directory. They were fetched using the SDK and access token.</p>
<ul id="files"></ul>
</div>
</div>
<script>
var CLIENT_ID = '42zjexze6mfpf7x';
// Parses the url and gets the access token if it is in the urls hash
function getAccessTokenFromUrl() {
return utils.parseQueryString(window.location.hash).access_token;
}
// If the user was just redirected from authenticating, the urls hash will
// contain the access token.
function isAuthenticated() {
return !!getAccessTokenFromUrl();
}
// Render a list of items to #files
function renderItems(items) {
var filesContainer = document.getElementById('files');
items.forEach(function(item) {
var li = document.createElement('li');
li.innerHTML = item.name;
filesContainer.appendChild(li);
});
}
// This example keeps both the authenticate and non-authenticated setions
// in the DOM and uses this function to show/hide the correct section.
function showPageSection(elementId) {
document.getElementById(elementId).style.display = 'block';
}
if (isAuthenticated()) {
showPageSection('authed-section');
// Create an instance of Dropbox with the access token and use it to
// fetch and render the files in the users root directory.
var dbx = new Dropbox({ accessToken: getAccessTokenFromUrl() });
dbx.filesListFolder({path: ''})
.then(function(response) {
renderItems(response.entries);
})
.catch(function(error) {
console.error(error);
});
} else {
showPageSection('pre-auth-section');
// Set the login anchors href using dbx.getAuthenticationUrl()
var dbx = new Dropbox({ clientId: CLIENT_ID });
var authUrl = dbx.getAuthenticationUrl('http://localhost:8080/auth');
document.getElementById('authlink').href = authUrl;
}
</script>
</body>
</html>