无法在没有角度的情况下使用adal.js进行身份验证

时间:2017-04-17 16:36:30

标签: azure-active-directory adal.js

我的项目由webapi和SPA应用程序组成。

我尝试使用Adal.js实现身份验证。 这是我的javascript代码:

$(function () {
    var endpoints = {
        "https://demowebapi2017.azurewebsites.net/api/values/7": "WEB API ID"
    };
    window.config = {
        tenant: '7dda5c2-2fb6-4f82-...',
        clientId: 'CLIENT ID',
        endpoints: endpoints
    };
    window.authContext = new AuthenticationContext(config);


    $("#login").click(function () {
        window.authContext.login();
    });

    $("#logout").click(function () {
        window.authContext.logOut();
    });

    $("#clickMe").click(function () {
        var user = window.authContext.getCachedUser();
        console.log(user);

        window.authContext.acquireToken('https://demowebapi2017.azurewebsites.net', function (error, token) {
            console.log(error);
            console.log(token);
        }
            );
    });
});

登录工作正常,我可以看到登录IFRAME输入我的凭据。 当我点击“clickMe”时,我收到错误消息:“需要用户登录”且用户为空。

使用Angular和Adal-angular.js一切正常,所以我认为Azure配置都很好。

有没有人知道发生了什么?

1 个答案:

答案 0 :(得分:1)

登录后,应用程序需要初始化用户解析哈希中的id_token。以下是供您参考的演示代码:

$(function () {
    var endpoints = {
        "https://graph.windows.net": "https://graph.windows.net"
};
window.config = {
    tenant: 'xxxx.onmicrosoft.com',
    clientId: 'aac92cf9-32ab-4004-aeab-1046389dff79',
    endpoints: endpoints
};
window.authContext = new AuthenticationContext(config);


$("#login").click(function () {
    window.authContext.login();
});

$("#logout").click(function () {
    window.authContext.logOut();
});

$("#clickMe").click(function () {
    var user = window.authContext.getCachedUser();
    console.log(user);

    window.authContext.acquireToken('https://graph.windows.net', function (error, token) {
        console.log(error);
        console.log(token);
    }
        );
});

function init(){
    if(window.location.hash!="")
        window.authContext.handleWindowCallback(window.location.hash);
}

init();
});