examples/javascript/auth/index.html

<!doctype html>
<html>
<head>
  <title>Dropbox JavaScript SDK</title>
  <link rel="stylesheet" href="/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@7/dist/polyfill.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
  <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/main/examples/javascript" 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.Dropbox({ accessToken: getAccessTokenFromUrl() });
      dbx.filesListFolder({path: ''})
        .then(function(response) {
          renderItems(response.result.entries);
        })
        .catch(function(error) {
          console.error(error.error || error);
        });
    } else {
      showPageSection('pre-auth-section');

      // Set the login anchors href using dbx.getAuthenticationUrl()
      var dbx = new Dropbox.Dropbox({ clientId: CLIENT_ID });
      var authUrl = dbx.auth.getAuthenticationUrl('http://localhost:8080/auth')
        .then((authUrl) => {
          document.getElementById('authlink').href = authUrl;
        })
    }
  </script>
</body>
</html>