Acquiring access token using AuthenticationContext of ADAL

Question

I am using ADAL.js for acquiring token for Azure Resources.

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js"></script>

I have written the following code in order to do so:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.15/js/adal.min.js"></script>
    <script>
        var endpoints = {
            "https://management.core.windows.net": "https://management.core.windows.net"
        };
        var config = {
            clientId: 'e333d3fe-a73a-4476-8121-8a57f9a972ca',
            endpoints: endpoints,
        };
        var authContext = new AuthenticationContext(config);
        authContext.handleWindowCallback();

        function login() {
            authContext.popUp = true;
            authContext.login();
           // authContext.handleWindowCallback();
            var user = authContext.getCachedUser();
            console.log(user);
        };

        function clickme() {
            var user = authContext.getCachedUser();
            console.log(user);

            authContext.acquireToken('https://management.core.windows.net', function (error, token) {
                console.log(error);
                console.log(token);
                ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
                if (!!error) {
                    console.log(error.indexOf("interaction_required"));
                    authContext.acquireTokenPopup(
                        'https://management.core.windows.net/',
                        null,
                        null,
                        function (error, token, msg) {
                            console.log(error);
                            console.log(token);
                        }
                    )
                }
                +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
            });
        };

        function logout () {
            authContext.logout();
        };

    </script>
    <input id="Button1" type="button" value="clickme" onclick="clickme()" />
    <input id="Button3" type="button" value="login" onclick="login()" />
    <input id="Button2" type="button" value="logout" onclick="logout()" />

    // These are the text-boxes whose value I want to retain.
    First name:<br>
    <input id=fname" type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input id="lname" type="text" name="lastname" value="Mouse">
</body>
</html>

There are two issues with the above code:

When I call authContext.acquireToken(): The following error came : AADSTS50079: The user is required to use multi-factor authentication. authContext.login() function only asks for credentials once and didn't ask for multi factor authentication. How can I handle this ?
When we click on logout, the value for the fname textbox and lname textbox is lost as page got refreshed. How can I avoid the reload of the page?
I have updated the code according to the answer, But got the following error message: Popup Window is null. This can happen if you are using IE. Have I done anything wrong here?? I am using chrome. The following issue is coming as the pop-up was blocked in the chrome. After allowing the pop-up, the code is working fine.

For the logout, the request has to be made to the AAD endpoint which will handle the clearing of the appropriate session cookies. I don't think the page refresh can be avoided unless there is a way to avoid it by making the request from a hidden iframe. — Navya Canumalla

Daniel Dobalian Daniel Dobalian · Accepted Answer · 2017-09-01T20:33:16

The error AADSTS50079: The user is required to use multi-factor authentication means that particular end user must perform or enroll in multi-factor auth in order to get an access token. acquireToken() is a silent request, so it's unable to show the MFA UI to the end user. Calling login() doesn't resolve this because you're not requesting access to anything in a login call.

The workaround is to catch this error:

if (error.indexOf("interaction_required") !== -1)

Then, your app can use either acquireTokenPopup() or acquireTokenRedirect() which are interactive requests on the same resource. This will then prompt your end user to fulfill the MFA request and you'll get your access token.

Acquiring access token using AuthenticationContext of ADAL

1 Answers