如果没有 angular，则无法使用 adal.js 进行身份验证

Question

我的项目由一个 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' 时，我收到错误消息：“需要用户登录”并且 user 为空。

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

有人知道会发生什么吗？

Answer 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();
});

如果没有 angular，则无法使用 adal.js 进行身份验证

Can't authenticate with adal.js without angular

azure-active-directory

adal.js