ADFS Sample + E2E

samples/VanillaJSTestApp/app/adfs/Readme.md

@@ -0,0 +1,7 @@
+# ADFS Support
+
+MSAL.js supports connecting to Azure AD, which signs in managed-users (users managed in Azure AD) or federated users (users managed by another identity provider such as ADFS). MSAL.js does not differentiate between these two types of users. As far as it’s concerned, it talks to Azure AD. The authority that you would pass in this case is the normal Azure AD Authority: `https://login.microsoftonline.com/{Enter_the_Tenant_Info_Here}`
+
+MSAL.js also supports directly connecting to ADFS 2019, which is Open ID Connect compliant and has support for scopes and PKCE. This support requires that a service pack [KB 4490481](https://support.microsoft.com/en-us/help/4490481/windows-10-update-kb4490481) is applied to Windows Server. When connecting directly to ADFS, the authority you'll want to use to build your application will be of form `https://mysite.contoso.com/adfs/`
+
+Currently, there are no plans to support a direct connection to ADFS 16 or ADFS v2. ADFS 16 does not support scopes, and ADFS v2 is not OIDC compliant.

samples/VanillaJSTestApp/app/adfs/auth.js

@@ -0,0 +1,93 @@
+// Browser check variables
+// If you support IE, our recommendation is that you sign-in using Redirect APIs
+// If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
+const ua = window.navigator.userAgent;
+const msie = ua.indexOf("MSIE ");
+const msie11 = ua.indexOf("Trident/");
+const msedge = ua.indexOf("Edge/");
+const isIE = msie > 0 || msie11 > 0;
+const isEdge = msedge > 0;
+
+let signInType;
+
+// Create the main myMSALObj instance
+// configuration parameters are located at authConfig.js
+const myMSALObj = new Msal.UserAgentApplication(msalConfig);
+
+// Register Callbacks for Redirect flow
+myMSALObj.handleRedirectCallback(authRedirectCallBack);
+
+function authRedirectCallBack(error, response) {
+    if (error) {
+        console.log(error);
+    } else {
+        if (response.tokenType === "id_token" && myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+            console.log('id_token acquired at: ' + new Date().toString());
+            showWelcomeMessage(myMSALObj.getAccount());
+        } else if (response.tokenType === "access_token") {
+            console.log('access_token acquired at: ' + new Date().toString());
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        } else {
+            console.log("token type is:" + response.tokenType);
+        }
+    }
+}
+
+// Redirect: once login is successful and redirects with tokens, call Graph API
+if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+    // avoid duplicate code execution on page load in case of iframe and Popup window.
+    showWelcomeMessage(myMSALObj.getAccount());
+}
+
+function signIn(method) {
+    signInType = isIE ? "loginRedirect" : method;
+    if (signInType === "loginPopup") {
+        myMSALObj.loginPopup(loginRequest)
+            .then(loginResponse => {
+            console.log(loginResponse);
+            if (myMSALObj.getAccount()) {
+                showWelcomeMessage(myMSALObj.getAccount());
+            }
+        }).catch(function (error) {
+            console.log(error);
+        });
+    } else if (signInType === "loginRedirect") {
+        myMSALObj.loginRedirect(loginRequest)
+    }
+}
+
+function signOut() {
+    myMSALObj.logout();
+}
+
+function getAccessTokenPopup() {
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenPopup(loginRequest).then(response => {
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        }).catch(error => {
+            console.log(error);
+        });
+    }
+}
+
+function getAccessTokenRedirect() {
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenRedirect(loginRequest);
+    }
+}
+
+function getAccessTokenSilent() {
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenSilent(loginRequest).then(response => {
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        }).catch(error => {
+            console.log(error);
+        })
+    }
+}

samples/VanillaJSTestApp/app/adfs/authConfig.js

@@ -0,0 +1,18 @@
+// Config object to be passed to Msal on creation
+const msalConfig = {
+    auth: {
+        clientId: "57448aa1-9515-4176-a106-5cb9be8550e1",
+        authority: "https://fs.msidlab8.com/adfs/",
+        knownAuthorities: ["fs.msidlab8.com"]
+    },
+    cache: {
+        cacheLocation: "localStorage", // This configures where your cache will be stored
+        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
+    }
+};
+
+// Add here scopes for id token to be used at MS Identity Platform endpoints.
+const loginRequest = {
+    scopes: ["openid", "profile"],
+    forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
+};

samples/VanillaJSTestApp/app/adfs/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Quickstart | MSAL.JS with ADFS 2019 Vanilla JavaScript SPA</title>
+
+    <!-- IE support: add promises polyfill before msal.js  -->    
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js"></script>
+    <script src="./dist/msal.js"></script>
+
+    <!-- adding Bootstrap 4 for UI components  -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+      <a class="navbar-brand" href="/">MS Identity Platform</a>
+      <div class="btn-group ml-auto dropleft">
+          <button type="button" id="SignIn" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Sign In
+          </button>
+          <div class="dropdown-menu">
+            <button class="dropdown-item" id="loginPopup" onclick="signIn(this.id)">Sign in using Popup</button>
+            <button class="dropdown-item" id="loginRedirect" onclick="signIn(this.id)">Sign in using Redirect</button>
+          </div>
+      </div>
+    </nav>
+    <br>
+    <h5 class="card-header text-center">Vanilla JavaScript SPA calling MS Graph API with MSAL.JS</h5>
+    <br>
+    <div class="row" style="margin:auto" >
+    <div id="card-div" class="col-md-3" style="display:none">
+    <div class="card text-center">
+      <div class="card-body">
+        <h5 class="card-title" id="WelcomeMessage">Please sign-in to see your profile and read your mails</h5>
+        <div id="profile-div"></div>
+        <br>
+        <br>
+        <button class="btn btn-primary" id="getAccessTokenRedirect" onclick="getAccessTokenRedirect()">Get Access Token (Redirect)</button>
+        <br>
+        <br>
+        <button class="btn btn-primary" id="getAccessTokenPopup" onclick="getAccessTokenPopup()">Get Access Token (Popup)</button>
+        <br>
+        <br>
+        <button class="btn btn-primary" id="getAccessTokenSilent" onclick="getAccessTokenSilent()">Get Access Token (Silent)</button>
+      </div>
+    </div>
+    </div>
+    <br>
+    <br>
+      <div class="col-md-4">
+        <div class="list-group" id="list-tab" role="tablist">
+        </div>
+      </div>
+      <div class="col-md-5">
+        <div class="tab-content" id="nav-tabContent">
+        </div>
+      </div>
+    </div>
+    <br>
+    <br>
+
+    <!-- importing bootstrap.js and supporting js libraries -->
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>  
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <!-- importing app scripts | load order is important -->
+    <script type="text/javascript" src="./authConfig.js"></script>
+    <script type="text/javascript" src="./ui.js"></script> 
+    <script type="text/javascript" src="./auth.js"></script>
+  </body>
+</html>