prabirshrestha/aad outlook graph api.html

## aad outlook graph api.html
<!DOCTYPE html>
<html>
<head>
    <title>AAD Login</title>
</head>
<body>
    <button id="login-button">Login</button>
    <!-- https://apps.dev.microsoft.com/#/appList
         https://dev.outlook.com/AppRegistration
         https://account.live.com/consent/Manage
         https://azure.microsoft.com/en-us/documentation/articles/active-directory-v2-protocols-implicit/ -->
    <script>
        (function (globals) {
            var AAD = {};

            AAD.getLoginUrl = function (options) {
                options = options || {};
                if (!options.clientId) throw new Error('clientId required for AAD');
                if (!options.redirectUri) {
                    options.redirectUri = window.location.origin;
                }

                var loginUrl = 'https://login.microsoftonline.com/' +
                    (options.tenantId || 'common') +
                    (options.resource ? '/oauth2/authorize' : '/oauth2/v2.0/authorize') +
                    '?client_id=' + encodeURIComponent(options.clientId) +
                    '&response_type=' + (options.responseType || ['token']).join('+') + // for id_token scope=['openid'] is required
                    '&redirect_uri=' + encodeURIComponent(options.redirectUri || window.location.href) +
                    '&state=' + Date.now() +
                    '&nonce=' + Date.now() +
                    '&response_mode=fragment';

                if (options.resource) {
                    loginUrl += '&resource=' + encodeURIComponent(options.resource);
                }

                if (options.scope) {
                    loginUrl += '&scope=' + encodeURIComponent(options.scope.join(' '));
                }

                if (options.prompt) {
                    // options.prompt = 'login' | 'none' | 'consent'
                    loginUrl += '&prompt=' + encodeURIComponent(options.prompt);
                }

                return loginUrl;
            };

            AAD.login = function (options) {
                clear();
                window.location = AAD.getLoginUrl(options);
            };

            AAD.handleLoginCallback = function () {
                var result = parseHash(window.location.hash);

                if (result.access_token || result.error) {
                    set(result);
                    window.location.replace(window.location.href.split('#')[0]);
                }
            };

            AAD.getCachedLoginInfo = function () {
                return get() || null;
            };

            function get() {
                return JSON.parse(localStorage.getItem('AAD.AUTH'));
            };

            function set(value) {
                localStorage.setItem('AAD.AUTH', JSON.stringify(value));
            };

            function clear() {
                localStorage.removeItem('AAD.AUTH');
            };

            function parseHash(hash) {
                var result = {},
                    segments,
                    kvp;

                if (hash.indexOf('#') === 0) {
                    hash = hash.substring(1);
                }

                if (hash.length > 0) {
                    segments = hash.split('&');
                    for(var i = 0, length = segments.length; i < length; ++i) {
                        kvp = segments[i].split('=');
                        result[kvp[0]] = kvp[1];
                    }
                }

                return result;
            }

            globals.AAD = AAD;
        })(this);
    </script>
    <script>
        AAD.handleLoginCallback();
        var loginInfo = AAD.getCachedLoginInfo();

        if(loginInfo) {
            if (loginInfo.error) {
                console.error('login failed', loginInfo);
            } else {
                fetch('https://graph.microsoft.com/v1.0/me/messages', { headers: { authorization: 'Bearer ' + loginInfo.access_token } })
                    .then(res => res.json())
                    .then(body => console.log(body));
            }
        }

        window.addEventListener('DOMContentLoaded', function () {
            $loginButton = document.getElementById('login-button');

            $loginButton.addEventListener('click', function (e) {
                e.preventDefault();

                // get access to Azure Resource Management Token (arm)
                // AAD.login({
                //     clientId: '',
                //     responseType: [ 'id_token', 'token'],
                //     resource: 'https://management.core.windows.net/',
                //     scope: ['openid', 'profile']
                // });

                // get access to Outlook graph api
                AAD.login({
                    clientId: '',
                    responseType: [ 'id_token', 'token'],
                    scope: ['openid', 'profile', 'offline_access', 'https://graph.microsoft.com/mail.read', 'https://graph.microsoft.com/mail.send']
                });
            });
        });

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>AAD Login</title>
	</head>
	<body>
	<button id="login-button">Login</button>
	<!-- https://apps.dev.microsoft.com/#/appList
	https://dev.outlook.com/AppRegistration
	https://account.live.com/consent/Manage
	https://azure.microsoft.com/en-us/documentation/articles/active-directory-v2-protocols-implicit/ -->
	<script>
	(function (globals) {
	var AAD = {};

	AAD.getLoginUrl = function (options) {
	options = options \|\| {};
	if (!options.clientId) throw new Error('clientId required for AAD');
	if (!options.redirectUri) {
	options.redirectUri = window.location.origin;
	}

	var loginUrl = 'https://login.microsoftonline.com/' +
	(options.tenantId \|\| 'common') +
	(options.resource ? '/oauth2/authorize' : '/oauth2/v2.0/authorize') +
	'?client_id=' + encodeURIComponent(options.clientId) +
	'&response_type=' + (options.responseType \|\| ['token']).join('+') + // for id_token scope=['openid'] is required
	'&redirect_uri=' + encodeURIComponent(options.redirectUri \|\| window.location.href) +
	'&state=' + Date.now() +
	'&nonce=' + Date.now() +
	'&response_mode=fragment';

	if (options.resource) {
	loginUrl += '&resource=' + encodeURIComponent(options.resource);
	}

	if (options.scope) {
	loginUrl += '&scope=' + encodeURIComponent(options.scope.join(' '));
	}

	if (options.prompt) {
	// options.prompt = 'login' \| 'none' \| 'consent'
	loginUrl += '&prompt=' + encodeURIComponent(options.prompt);
	}

	return loginUrl;
	};

	AAD.login = function (options) {
	clear();
	window.location = AAD.getLoginUrl(options);
	};

	AAD.handleLoginCallback = function () {
	var result = parseHash(window.location.hash);

	if (result.access_token \|\| result.error) {
	set(result);
	window.location.replace(window.location.href.split('#')[0]);
	}
	};

	AAD.getCachedLoginInfo = function () {
	return get() \|\| null;
	};

	function get() {
	return JSON.parse(localStorage.getItem('AAD.AUTH'));
	};

	function set(value) {
	localStorage.setItem('AAD.AUTH', JSON.stringify(value));
	};

	function clear() {
	localStorage.removeItem('AAD.AUTH');
	};

	function parseHash(hash) {
	var result = {},
	segments,
	kvp;

	if (hash.indexOf('#') === 0) {
	hash = hash.substring(1);
	}

	if (hash.length > 0) {
	segments = hash.split('&');
	for(var i = 0, length = segments.length; i < length; ++i) {
	kvp = segments[i].split('=');
	result[kvp[0]] = kvp[1];
	}
	}

	return result;
	}

	globals.AAD = AAD;
	})(this);
	</script>
	<script>
	AAD.handleLoginCallback();
	var loginInfo = AAD.getCachedLoginInfo();

	if(loginInfo) {
	if (loginInfo.error) {
	console.error('login failed', loginInfo);
	} else {
	fetch('https://graph.microsoft.com/v1.0/me/messages', { headers: { authorization: 'Bearer ' + loginInfo.access_token } })
	.then(res => res.json())
	.then(body => console.log(body));
	}
	}

	window.addEventListener('DOMContentLoaded', function () {
	$loginButton = document.getElementById('login-button');

	$loginButton.addEventListener('click', function (e) {
	e.preventDefault();

	// get access to Azure Resource Management Token (arm)
	// AAD.login({
	// clientId: '',
	// responseType: [ 'id_token', 'token'],
	// resource: 'https://management.core.windows.net/',
	// scope: ['openid', 'profile']
	// });

	// get access to Outlook graph api
	AAD.login({
	clientId: '',
	responseType: [ 'id_token', 'token'],
	scope: ['openid', 'profile', 'offline_access', 'https://graph.microsoft.com/mail.read', 'https://graph.microsoft.com/mail.send']
	});
	});
	});

	</script>
	</body>
	</html>