WrathOfZombies/app.js

## app.js
(function ($) {
  $('document').ready(function () {
    // Determine if we are running inside of an authentication dialog
    // If so then just terminate the running function
    if (OfficeHelpers.Authenticator.isAuthDialog()) {
      // Adding code here isn't guaranteed to run as we need to close the dialog
      // Currently we have no realistic way of determining when the dialog is completely
      // closed.
      return;
    }

    // Create a new instance of Authenticator
    let authenticator = new OfficeHelpers.Authenticator();

    // Register our providers accordingly
    authenticator.endpoints.registerMicrosoftAuth('f59e8034-6e3c-4ba6-9fb5-1342d27d0123');
    authenticator.endpoints.registerDropboxAuth('tkvf431lh8d9hci');

    // Get the output pre
    let output = $('#output');

    // Add event handlers to the buttons
    $('.login').click(function () {
      let provider = $(this).data('provider');
      output.text('Authenticating with ' + provider + '...');

      // Authenticate with the chosen provider
      authenticator.authenticate(provider, true /* setting the force to true, always re-authenticates. This is just for demo purposes */)
        .then(function (token) {
          // Consume the acess token
          output.text(prettify(token));
        })
        .catch(function (error) {
          // Handle the error
          output.text(prettify(error));
        });
    });
  });

  // Just a random helper to prettify json
  function prettify(data) {
    let json = JSON.stringify(data);
    json = json.replace(/{/g, '{\n\n\t');
    json = json.replace(/,/g, ',\n\t');
    json = json.replace(/}/g, ',\n\n}');
    return json;
  }
})(jQuery);

## index.html
<!doctype html>

<html lang="en">

<head>
  <title>Office Helpers</title>

  <!-- Fabric for button styles -->
  <link rel="stylesheet"
        href="https://unpkg.com/office-ui-fabric-js@1.4.0/dist/css/fabric.min.css" />
  <link rel="stylesheet"
        href="https://unpkg.com/office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css" />

  <!-- CSS styling -->
  <style type="text/css">
    #login-list {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .login {
      margin: 15px 4px;
      width: 200px;
    }

    #output {
      white-space: pre-line;
      word-break: break-all;
      width: calc(100% - 40px);
      min-height: 150px;
      background-color: #333;
      color: #EFEFEF;
      padding: 20px;
    }
  </style>
</head>

<body class="ms-font-m">
  <h1 class="ms-font-su">Demo</h1>
  <div id="login-list">
    <h3 class="ms-font-l ms-fontWeight-semibold">Providers:</h3>

    <!-- Login buttons-->
    <button class="login ms-Button"
            data-provider="Dropbox">
      <span class="ms-Button-label">Sign into Dropbox</span>
    </button>
    <button class="login ms-Button"
            data-provider="Microsoft">
      <span class="ms-Button-label">Sign into Microsoft</span>
    </button>

    <!-- Output PRE -->
    <h3 class="ms-font-l ms-fontWeight-semibold">Output:</h3>
    <pre id="output"></pre>
  </div>

  <!-- JQuery library -->
  <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.js"></script>

  <!-- SHIM library required by Office Helpers -->
  <script src="https://unpkg.com/core-js@2.5.1/client/core.js"></script>

  <!-- Office Helpers -->
  <!-- Use local reference or latest version -->
  <!-- <script src="node_modules/@microsoft/office-js-helpers/dist/office.helpers.js"></script> -->
  <script src="https://unpkg.com/@microsoft/office-js-helpers/dist/office.helpers.js"></script>

  <!-- Application Script -->
  <script src="app.js"></script>
</body>

</html>
	(function ($) {
	$('document').ready(function () {
	// Determine if we are running inside of an authentication dialog
	// If so then just terminate the running function
	if (OfficeHelpers.Authenticator.isAuthDialog()) {
	// Adding code here isn't guaranteed to run as we need to close the dialog
	// Currently we have no realistic way of determining when the dialog is completely
	// closed.
	return;
	}

	// Create a new instance of Authenticator
	let authenticator = new OfficeHelpers.Authenticator();

	// Register our providers accordingly
	authenticator.endpoints.registerMicrosoftAuth('f59e8034-6e3c-4ba6-9fb5-1342d27d0123');
	authenticator.endpoints.registerDropboxAuth('tkvf431lh8d9hci');

	// Get the output pre
	let output = $('#output');

	// Add event handlers to the buttons
	$('.login').click(function () {
	let provider = $(this).data('provider');
	output.text('Authenticating with ' + provider + '...');

	// Authenticate with the chosen provider
	authenticator.authenticate(provider, true /* setting the force to true, always re-authenticates. This is just for demo purposes */)
	.then(function (token) {
	// Consume the acess token
	output.text(prettify(token));
	})
	.catch(function (error) {
	// Handle the error
	output.text(prettify(error));
	});
	});
	});

	// Just a random helper to prettify json
	function prettify(data) {
	let json = JSON.stringify(data);
	json = json.replace(/{/g, '{\n\n\t');
	json = json.replace(/,/g, ',\n\t');
	json = json.replace(/}/g, ',\n\n}');
	return json;
	}
	})(jQuery);
	<!doctype html>

	<html lang="en">

	<head>
	<title>Office Helpers</title>

	<!-- Fabric for button styles -->
	<link rel="stylesheet"
	href="https://unpkg.com/office-ui-fabric-js@1.4.0/dist/css/fabric.min.css" />
	<link rel="stylesheet"
	href="https://unpkg.com/office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css" />

	<!-- CSS styling -->
	<style type="text/css">
	#login-list {
	display: flex;
	flex-direction: column;
	width: 100%;
	}

	.login {
	margin: 15px 4px;
	width: 200px;
	}

	#output {
	white-space: pre-line;
	word-break: break-all;
	width: calc(100% - 40px);
	min-height: 150px;
	background-color: #333;
	color: #EFEFEF;
	padding: 20px;
	}
	</style>
	</head>

	<body class="ms-font-m">
	<h1 class="ms-font-su">Demo</h1>
	<div id="login-list">
	<h3 class="ms-font-l ms-fontWeight-semibold">Providers:</h3>

	<!-- Login buttons-->
	<button class="login ms-Button"
	data-provider="Dropbox">
	<span class="ms-Button-label">Sign into Dropbox</span>
	</button>
	<button class="login ms-Button"
	data-provider="Microsoft">
	<span class="ms-Button-label">Sign into Microsoft</span>
	</button>

	<!-- Output PRE -->
	<h3 class="ms-font-l ms-fontWeight-semibold">Output:</h3>
	<pre id="output"></pre>
	</div>

	<!-- JQuery library -->
	<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.js"></script>

	<!-- SHIM library required by Office Helpers -->
	<script src="https://unpkg.com/core-js@2.5.1/client/core.js"></script>

	<!-- Office Helpers -->
	<!-- Use local reference or latest version -->
	<!-- <script src="node_modules/@microsoft/office-js-helpers/dist/office.helpers.js"></script> -->
	<script src="https://unpkg.com/@microsoft/office-js-helpers/dist/office.helpers.js"></script>

	<!-- Application Script -->
	<script src="app.js"></script>
	</body>

	</html>