eirikb/msal-domdom.html

## msal-domdom.html
<!DOCTYPE html>
<body>
<script src="https://unpkg.com/@eirikb/domdom@1.0.7"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.2/js/msal.min.js"></script>

<script type="text/babel">
  const azureAdAppClientId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
  const sharePointUrl = 'https://xxxxxx.sharepoint.com';

  const dd = domdom();

  const config = {
    auth: {clientId: azureAdAppClientId},
    cache: {cacheLocation: 'localStorage'}
  };
  const msal = new Msal.UserAgentApplication(config);
  const scopes = [`${sharePointUrl}/Sites.Read.All`];

  (async () => {
    if (msal.isCallback(window.location.hash)) {
      console.log('callback, quit...');
      return;
    }

    document.body.appendChild(dd.render(
      ({text, when}) => <div>
        <p> {text('info')}</p>
        {when('login', [
          true, () => <button onClick={() => login()}>Login</button>]
        )}
      </div>
    ));

    msal.handleRedirectCallback((error) => {
      if (error) {
        dd.set('info', `Error: ${error}`);
      } else {
        start();
      }
    });

    if (!msal.getAccount()) {
      dd.set('login', true);
    } else {
      start();
    }

    async function login() {
      dd.set('info', 'Logging in...');
      dd.set('login', false);
      msal.loginRedirect({scopes});
    }

    async function start() {
      dd.set('info', 'Loading token...');
      const token = (await msal.acquireTokenSilent({scopes})).accessToken;
      console.log(token);
      dd.set('info', 'Loading web...');
      const web = await fetch(`${sharePointUrl}/_api/Web`, {
        headers: {
          accept: 'application/json',
          authorization: `Bearer ${token}`
        }
      }).then(res => res.json());
      console.log(web);
      dd.set('info', web.Title);
    }
  })();
</script>
</body>
	<!DOCTYPE html>
	<body>
	<script src="https://unpkg.com/@eirikb/domdom@1.0.7"></script>
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.2/js/msal.min.js"></script>

	<script type="text/babel">
	const azureAdAppClientId = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
	const sharePointUrl = 'https://xxxxxx.sharepoint.com';

	const dd = domdom();

	const config = {
	auth: {clientId: azureAdAppClientId},
	cache: {cacheLocation: 'localStorage'}
	};
	const msal = new Msal.UserAgentApplication(config);
	const scopes = [`${sharePointUrl}/Sites.Read.All`];

	(async () => {
	if (msal.isCallback(window.location.hash)) {
	console.log('callback, quit...');
	return;
	}

	document.body.appendChild(dd.render(
	({text, when}) => <div>
	<p> {text('info')}</p>
	{when('login', [
	true, () => <button onClick={() => login()}>Login</button>]
	)}
	</div>
	));

	msal.handleRedirectCallback((error) => {
	if (error) {
	dd.set('info', `Error: ${error}`);
	} else {
	start();
	}
	});

	if (!msal.getAccount()) {
	dd.set('login', true);
	} else {
	start();
	}

	async function login() {
	dd.set('info', 'Logging in...');
	dd.set('login', false);
	msal.loginRedirect({scopes});
	}

	async function start() {
	dd.set('info', 'Loading token...');
	const token = (await msal.acquireTokenSilent({scopes})).accessToken;
	console.log(token);
	dd.set('info', 'Loading web...');
	const web = await fetch(`${sharePointUrl}/_api/Web`, {
	headers: {
	accept: 'application/json',
	authorization: `Bearer ${token}`
	}
	}).then(res => res.json());
	console.log(web);
	dd.set('info', web.Title);
	}
	})();
	</script>
	</body>