Javascript ADAL JS在调用WebApi时未附加用户令牌

我正在使用

ADAL JS

根据Azure AD对用户进行身份验证。由于我是

ADAL JS

新手，我开始阅读以下文章，我发现这些文章内容非常丰富：

阅读了这些文章后，我的印象是，

adaljs

截取服务调用，如果服务url在

AuthenticationContext

配置中注册为端点之一，它会附加JWT令牌作为身份验证承载信息

然而，我发现我的情况并非如此。经过一番挖掘，我觉得只有在使用了

adal angular

计数器部分的情况下才有可能，而我目前没有使用计数器部分，因为我的web应用程序不是基于angular的

请让我知道我的理解是否正确。如果我需要明确地添加承载信息，同样可以这样做，但我更关心的是我是否缺少一些现成的功能

其他详细信息：我当前的配置如下所示：

private endpoints: any = {
    "https://myhost/api": "here_goes_client_id"
}
...
private config: any;
private authContext: any = undefined;
....
this.config = {
    tenant: "my_tenant.onmicrosoft.com",
    clientId: "client_id_of_app_in_tenant_ad",
    postLogoutRedirectUri: window.location.origin,
    cacheLocation: "sessionStorage",
    endpoints: this.endpoints
};
this.authContext = new (window["AuthenticationContext"])(this.config);

同样在服务器端（WebApi），身份验证配置（Startup.Auth）如下所示：

public void ConfigureOAuth(IAppBuilder app, HttpConfiguration httpConfig)
{
    app.UseWindowsAzureActiveDirectoryBearerAuthentication(
        new WindowsAzureActiveDirectoryBearerAuthenticationOptions
        {
            Tenant = "my_tenant.onmicrosoft.com",
            TokenValidationParameters = new TokenValidationParameters
            {
                ValidAudience = "client_id_of_app_in_tenant_ad"
            }
         });
}

但是，

请求.Headers中的
授权
始终为空

更新：似乎自动更新代币也是如此；当与
adal angular
一起使用时，令牌的更新可以通过在引擎盖下调用
AuthenticationContext.acquireToken（资源，回调）
无缝工作。如果我错了，请纠正我

在阅读了这些文章之后，我的印象是ADAL JS截获了服务调用，如果服务url在AuthenticationContext配置中注册为端点之一，它会附加JWT令牌作为身份验证承载信息

只有当应用程序基于角度时，这才有效。正如你提到的，这种逻辑存在于adal angular

但是，如果您想坚持使用纯JS，您将无法获得自动的“获取访问令牌并将其附加到标头”支持。您可以使用acquireToken（resource，callback

api）来获取端点的令牌。但是您必须在向api发送请求的控制器中执行一些工作

这可能会让您有所了解：。此示例不使用角度

在阅读了这些文章之后，我的印象是ADAL JS截获了服务调用，如果服务url在AuthenticationContext配置中注册为端点之一，它会附加JWT令牌作为身份验证承载信息

只有当你的应用程序是基于angular的时候，这才有效。正如你提到的，这个逻辑存在于adal angular中

但是，如果您想坚持使用纯JS，您将无法获得自动的“获取访问令牌并将其附加到标头”支持。您可以使用

acquireToken（资源，回调
api）来获取端点的令牌。但是，您必须在向api发送请求的控制器中进行一些工作

这可能会给您一些想法：。此示例不使用angular。
ADAL.JS与v2.0隐式流不兼容。我无法使其工作，因为我最近设置了我的项目，并且不认为项目向后兼容

这非常令人困惑，我花了很长时间才发现我混淆了版本，无法将ADAL.JS与v2.0一起使用。一旦我删除了它，事情就变得更加顺利了，只需执行几个XHR请求和一个弹出窗口，实际上不需要任何魔法

下面是v2的代码：

function testNoADAL() {
    var clientId = "..guid..";
    var redirectUrl = "..your one.."
    var authServer = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize?";
    var responseType = "token";
    var stateParam = Math.random() * new Date().getTime();

    var authUrl = authServer +
                                "response_type=" + encodeURI(responseType) +
                                "&client_id=" + encodeURI(clientId) +
                                "&scope=" + encodeURI("https://outlook.office.com/Mail.ReadWrite") +
                                "&redirect_uri=" + encodeURI(redirectUrl) +
                                "&state=" + stateParam;

    var popupWindow = window.open(authUrl, "Login", 'width=' + 300 + ', height=' + 600 + ', top=' + 10 + ', left=' + 10 + ',location=no,toolbar=yes');
    if (popupWindow.focus) {
        popupWindow.focus();
    }
}

注意：重定向URL将出现在弹出窗口中，需要在其中包含代码才能传递位置哈希，例如：

window.opener.processMicrosoftAuthResultUrl（location.hash）；window.close（）；

函数进程MicrosoftAuthResultUrl（哈希）{
if（hash.indexOf（“#”）==0）{
hash=hash.substr（1）；
}
var obj=getUrlParameters（哈希）；
if（对象错误）{
if（obj.error==“无效的资源”）{
errorDialog（“您的Office 365需要配置为允许访问Outlook邮件。”）；
}否则{
错误对话框（“ADAL:+obj.错误描述”）；
}
}否则{
if（对象访问令牌）{
log（“ADAL获得了访问令牌！”）；
var token=obj.access\u token；
变量url=”https://outlook.office.com/api/v2.0/me/MailFolders/Inbox/messages";
$.ajax({
键入：“获取”，
url:url，
标题：{
“授权”：“持票人”+代币，
},
}).完成（功能（数据）{
log（“获取数据！”，数据）；
var message=“您的最新电子邮件是：“+data.value[0].Subject+”来自“+data.value[0]。来自“+df_FmtDateTime”（新日期（data.value[0].ReceivedDateTime））上的.EmailAddress.Name+”；
警报对话框（消息）；
}).fail（函数（）{
console.error（'获取待办事项列表数据时出错'）
});
}
}
}
函数getUrlParameters（url）{
//获取querystring并将其转换为对象
if（！url）返回{}；
if（url.indexOf（“？”>-1）{
url=url.split（“？”[1]；
}
如果（url.indexOf（“#”）大于-1）{
url=url.split（“#”）[0]；
}
if（！url）返回{}；
url=url.split（“&”）
var b={}；
对于（变量i=0；i
ADAL.JS与v2.0隐式流不兼容。由于我最近设置了我的项目，因此无法使其工作，并且认为项目不向后兼容

这让我很困惑，我看了一眼
function processMicrosoftAuthResultUrl(hash) {
    if (hash.indexOf("#") == 0) {
        hash = hash.substr(1);
    }
    var obj = getUrlParameters(hash);
    if (obj.error) {
        if (obj.error == "invalid_resource") {
            errorDialog("Your Office 365 needs to be configured to enable access to Outlook Mail.");
        } else {
            errorDialog("ADAL: " + obj.error_description);
        }
    } else {
        if (obj.access_token) {
            console.log("ADAL got access token!");
            var token = obj.access_token;
            var url = "https://outlook.office.com/api/v2.0/me/MailFolders/Inbox/messages";
            $.ajax({
                type: "GET",
                url: url,
                headers: {
                    'Authorization': 'Bearer ' + token,
                },
            }).done(function (data) {
                console.log("got data!", data);
                var message = "Your latest email is: " + data.value[0].Subject + " from " + data.value[0].From.EmailAddress.Name+ " on " + df_FmtDateTime(new Date(data.value[0].ReceivedDateTime));
                alertDialog(message);

            }).fail(function () {
                console.error('Error getting todo list data')
            });
        }
    }
}

function getUrlParameters(url) {
    // get querystring and turn it into an object
    if (!url) return {};
    if (url.indexOf("?") > -1) {
        url = url.split("?")[1];
    }
    if (url.indexOf("#") > -1) {
        url = url.split("#")[0];
    }
    if (!url) return {};
    url = url.split('&')
    var b = {};
    for (var i = 0; i < url.length; ++i) {
        var p = url[i].split('=', 2);
        if (p.length == 1) {
            b[p[0]] = "";
        } else {
            b[decodeURIComponent(p[0])] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
    }
    return b;
}