使用 ADAL 的 AuthenticationContext 获取访问令牌

Acquiring access token using AuthenticationContext of ADAL

我正在使用 ADAL.js 获取 Azure 资源的令牌。

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

我为此编写了以下代码:

<!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>

上面的代码有两个问题:

  1. 当我调用 authContext.acquireToken() 时:出现以下错误:AADSTS50079:用户需要使用多重身份验证。 authContext.login() 函数只要求提供一次凭据,不要求进行多重身份验证。我该如何处理?
  2. 当我们点击注销时,fname 文本框和 lname 文本框的值会随着页面刷新而丢失。如何避免重新加载页面?
  3. 我已经根据答案更新了代码,但是得到以下错误消息:Popup Window is null。如果您使用 IE,就会发生这种情况。我在这里做错了什么吗?我正在使用 chrome。 由于弹出窗口在 chrome 中被阻止,因此出现了以下问题。允许弹出窗口后,代码运行正常。

错误 AADSTS50079:用户需要使用多重身份验证 意味着特定的最终用户必须执行或注册多重身份验证-factor auth 以获得访问令牌。 acquireToken() 是静默请求,因此无法向最终用户显示 MFA UI。调用 login() 无法解决此问题,因为您没有在登录调用中请求访问任何内容。

解决方法是捕获此错误:

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

然后,您的应用可以使用 acquireTokenPopup() or acquireTokenRedirect() 中的任一种,它们是对同一资源的交互式请求。然后,这将提示您的最终用户完成 MFA 请求,您将获得访问令牌。