angularjs - 使用 Angular 和 ADAL 的 Cordova 应用程序

Question

我正在使用 Cordova 构建我的第一个移动应用程序。后端服务位于 Azure 上，因此我尝试使用适用于 Cordova 的 ADAL 插件来进行身份验证。

首先，我发现该库不像 Angular 的 ADAL 库那样进行拦截。我在我的 Cordova 应用程序中使用了 Angular，并与 Material 设计指令配对以实现外观。拦截本来会很好，但据我所知，目前还不存在(应该找出实现的难度)。

因此，我现在编写了一个服务，负责将 REST api 请求发送到 Azure，包括正确的身份验证 token 。它基于找到的样本 here .

这就是我想出的:

var request = function(url)
{
    createContext()
        .then(function () {
            getAuthToken().then(
                function(token) {
                    sendRequest(token, url);
            })
        },
        function (err) {
            $log.error("Failed to create a context.");
        });
};

首先它将创建身份验证上下文:

function createContext () {
    return $q(function (resolve, reject) {
        var authenticationContext = Microsoft.ADAL.AuthenticationContext;

        authenticationContext.createAsync(authority)
            .then(function (context) {
                authContext = context;
                $log.log("Created authentication context for authority URL: " + context.authority);
                resolve();
            }, function (err) {
                $log.error("Failed to create authentication context: " + pre(err))
                reject();
            });
    });
};

使用上下文它应该获取身份验证 token :

function getAuthToken()
{
    if (authContext == null) {
        $log.error('Authentication context isn\'t created yet. Create context first');
        return;
    }

    return $q(function (resolve, reject) {
        authContext.acquireTokenAsync(resourceUrl, appId, redirectUrl)
            .then(function (authResult) {
                resolve(authResult.accessToken);
            }, function (err) {
                $log.error("Failed to acquire token: " + pre(err));
                reject();
            });
    });
}

之后它应该发送请求，但我会留下那部分，因为它永远不会到达那里。我觉得有必要再次强调我在这方面是一个完整的 n00b，所以请对我放轻松，尤其是在代码上。可能还有很大的改进空间，我明白。

当我实际运行它时，它会弹出一个窗口，我需要使用我的 Microsoft 帐户登录，很酷。我第一次尝试时什至获得了两因素身份验证，非常好!所以我登录并返回代码。但现在 授权结果 变量的状态为“失败”，结果中没有访问 token 。不幸的是，也没有迹象表明出了什么问题。所以问题的第一部分是；这里可能出了什么问题？

现在我们进入问题的第二部分；你如何正确调试这些东西？在我的桌面上，我会运行 Fiddler 来检查通信，但我不知道如何为 Android 执行此操作。顺便说一句，我正在我的设备上调试，由于某种原因，我可用的所有模拟器都非常慢(VS 和 Google)，即使我的硬件规范应该支持它们就好了。

感谢您的任何指点!

2016 年 3 月 2 日更新

稍微摆弄一下代码，我决定把东西打包到一个登录函数中，它给出了一个更短的示例:

var createContext = function () {
    if (authContext == null) {
        authContext = new Microsoft.ADAL.AuthenticationContext(authority);
    }
};

var getAuthToken = function () {
    if (authContext == null) {
        $log.error('Authentication context isn\'t created yet. Create context first');
        return;
    }

    return $q(function (resolve, reject) {
        authContext.acquireTokenAsync(endpointUrl, appId, redirectUrl)
            .then(function (authResult) {
                resolve(authResult.accessToken);
            }, function (err) {
                $log.error("Failed to acquire token: " + pre(err));
                reject();
            });
    });
}

var login = function () {
    createContext();
    getAuthToken();
}

此代码在以下输入变量上运行:

var authority = 'https://login.windows.net/[tenantid]';
var resourceUrl = 'https://graph.windows.net/';
var appId = '1ef41b17-0943-4359-bc12-014f4fd2d841';
var redirectUrl = 'http://MyApp';

我现在使用 chrome://inspect 查看网络上发生了什么。令我大吃一惊的是，我看到 Azure 返回了一个有效的 SAML token 。它上面有我的名字和所有东西，我认为他们不会在身份验证失败后发送。因此，即使响应正常，ADAL 库似乎也没有给我正确的响应(状态 = 失败)。再次不知道如何进行:S

Answer 1

我刚刚解决了。正如人们所期望的那样，补救措施就像他们得到的一样简单。在 Azure AD 中配置应用程序，我选择了“Web 应用程序”类型的应用程序，因为这是一个带有 Angular 和所有功能的 Web 应用程序。现在我想，由于 Cordova 将事物转换为 native 代码，所以这不是正确的选择。一旦我创建了一个新应用程序作为“ native 应用程序”并使用该应用程序的客户端 ID，一切都开始工作......真诚地希望这将有助于 future 的其他人......!