将身份验证令牌添加到 AJAX 调用以使用 Azure Active Directory 身份验证保护 Web API

Question

我有一个基于普通 JavaScript 的网页。我需要在 https://XYZ.azurewebsites.net 调用我的网站 API，它使用 Azure Active Directory 身份验证进行保护。

为此，我已将 ADAL.js 添加到我的网站，并在 AAD 中将我的 website/webapp 注册为本机客户端。我不确定静默获取身份验证令牌所需的最少代码量。

在 vanilla 中获取身份验证令牌需要执行的最少步骤是什么 JavaScript？

注意：我已经在 GitHub 上查看了大量有关 Azure AD 身份验证的示例。但他们都建议克隆 repo 并替换 Audience、Tenants 等的值。我需要的只是一个简单的 vanilla JS 函数来执行相同的操作，而无需这些示例中的所有膨胀代码。

Answer 1

一种直接使用 ADAL.JS（和香草 JavaScript）的方法：

配置AuthenticationContext的实例。
使用 AuthenticationContext.login() 登录。
使用 AuthenticationContext.handleWindowCallback() 处理令牌请求响应。
使用AuthenticationContext.acquireToken()获取访问令牌。
使用收到的访问令牌发出您的 API 请求。

这是一个完整的最小示例，它获取 Microsoft Graph API 的访问令牌（受 Azure AD 保护的 API 的示例）并使用它进行 AJAX 调用检索登录用户的个人资料。评论中的数字与上述步骤相对应。

（我也发布了 a Gist with a slightly more complete version which you can try out live。）

<html>
    <head>
        <title>Minimal sample using ADAL.JS</title>
        <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script>
    </head>
    <body>
        <p>
            <!-- #2: Use ADAL's login() to sign in -->
            <a href="#" onclick="authContext.login(); return false;">Log in</a> |
            <a href="#" onclick="authContext.logOut(); return false;">Log out</a>
        </p>

        <script type="text/javascript">

            // #1: Set up ADAL
            var authContext = new AuthenticationContext({
                clientId: 'c24f035c-1ff6-4dfa-b76d-c75a29ad2c3c',
                postLogoutRedirectUri: window.location
            });

            // #3: Handle redirect after token requests
            if (authContext.isCallback(window.location.hash)) {

                authContext.handleWindowCallback();
                var err = authContext.getLoginError();
                if (err) {
                    // TODO: Handle errors signing in and getting tokens
                }

            } else {

                // If logged in, get access token and make an API request
                var user = authContext.getCachedUser();
                if (user) {

                    console.log('Signed in as: ' + user.userName);

                    // #4: Get an access token to the Microsoft Graph API
                    authContext.acquireToken(
                        'https://graph.microsoft.com',
                        function (error, token) {

                            // TODO: Handle error obtaining access token
                            if (error || !token) { return; }

                            // #5: Use the access token to make an AJAX call
                            var xhr = new XMLHttpRequest();
                            xhr.open('GET', 'https://graph.microsoft.com/v1.0/me', true);
                            xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                            xhr.onreadystatechange = function () {
                                if (xhr.readyState === 4 && xhr.status === 200) {
                                    // TODO: Do something with the response
                                    console.log(xhr.responseText);
                                } else {
                                    // TODO: Do something with the error 
                                    // (or other non-200 responses)
                                }
                            };
                            xhr.send();
                        }
                    );
                } else {

                    console.log('Not signed in.')
                }
            }
        </script>
    </body>
</html>

将身份验证令牌添加到 AJAX 调用以使用 Azure Active Directory 身份验证保护 Web API

Add authentication token to AJAX call for a Web API secured using Azure Active Directory authentication

javascript

active-directory

azure-active-directory

adal

adal.js