Ad

by dshilkret

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>A SPA sample demonstrating Azure AD and ADAL JS</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/App/Content/app.css">
</head>

<body role="document">

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="app-user navbar-text"></li>
                    <li>
                        <a href="javascript:;" class="app-logout">Logout</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="app-login">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <br />
    <div class="container" role="main">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1" style="background-color:azure">
                <div class="page-header">
                    <h1>ADAL JS with jQuery Upload Session Example</h1>
                </div>
                <p>This sample demonstrates how to take advantage of ADAL JS for adding Azure AD authentication to your JavaScript
                    apps built with jQuery.</p>
                <p>This sample also demonstrates how to use createUploadSession which is required to upload files larger...

CSS

.app-error {
    color: red; 
} 

input[type=file] {
    display: block; 
    width: 500px; 
}

JavaScript

// If your account is 'yourdomain.onmicrosoft.com', this value should be 'yourdomain'.
var tenant = 'yourTenantName';

// Get this value from the Configure tab of your application page in Azure Management Portal.
var clientId = '<<your-azureAD-Application-xxxx-xxxxxxxx>>';
var main = function () {

    var baseEndpoint = "https://graph.microsoft.com";
    var filesResource = "https://" + tenant + "-my.sharepoint.com";
    var endpoints =  {
        filesResource:filesResource}; 

    // Enter Global Config Values & Instantiate ADAL AuthenticationContext
    window.config =  {
        tenant:tenant + ".onmicrosoft.com",
        clientId:clientId,
        postLogoutRedirectUri:window.location.origin,
        endpoints:endpoints,
        cacheLocation:"localStorage"// enable this for IE, as sessionStorage does not work for localhost.
    };
    var authContext = new AuthenticationContext(config); 

    var fileToUpload;

    // Get UI jQuery Objects
    var $filesPanel = $(".files-panel-body"); 
    var $userDisplay = $(".app-user"); 
    var $signInButton = $(".app-login"); 
    var $signOutButton = $(".app-logout"); 
    var $errorMessage = $(".app-error"); 
    var $fileControl = $("#trigger");
    var $btnUpload = $("#btnUpload");
    var $dataContainer = $(".data-container");
    var $dataLoadingCtl = $(".data-loading");

    // Check For & Handle Redirect From AAD After Login
    var isCallback = authContext.isCallback(window.location.hash); 
    authContext.handleWindowCallback(); 
    $errorMessage.html(authContext.getLoginError()); 

    if (isCallback &&  ! authContext.getLoginError()) {
        window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST); 
    }

    // Check Login Status, Update UI
    var user = authContext.getCachedUser(); 
    if (user) {
        $userDisplay.html(user.userName); 
        $userDisplay.show(); 
        $signInButton.hide(); 
        $signOutButton.show(); 
    }else {
       ...