使用 angular 和 ADAL 的 Cordova 应用

Question

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

首先，我发现该库不像 Angular 的 ADAL 库那样进行拦截。我在我的 Cordova 应用程序中使用 Angular，搭配 material 外观设计指令。有拦截会很好，但据我所知，目前还没有拦截（应该了解实现起来有多难）。

因此，我现在编写了一个服务，负责向 Azure 发送 REST api 请求，包括正确的身份验证令牌。它基于找到的示例 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();
            });
    });
};

使用上下文它应该获得身份验证令牌：

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

然后它应该发送请求，但我会把那部分省略，因为它永远不会到达那里。我觉得有必要再次强调我在这方面是个十足的菜鸟，所以请对我放轻松，尤其是在代码方面。可能有很大的改进空间，我明白了。

当我实际运行时，它会弹出一个 window，我需要在其中使用我的 Microsoft 帐户登录，太酷了。我什至在第一次尝试时获得了双重身份验证，非常好！所以我登录并返回到代码。但是现在 authresult 变量的状态为 "Failed" 并且结果中没有访问令牌。不幸的是，也没有迹象表明出了什么问题。所以问题的第一部分是；这里可能出了什么问题？

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

感谢指点！

更新 03-02-2016

稍微摆弄一下代码，我决定将内容打包到一个登录函数中，这样可以提供一个更短的示例：

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

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

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 令牌。上面有我的名字和所有内容，我认为在身份验证失败后他们不会发送这些内容。因此，即使响应正常，ADAL 库似乎也没有给我正确的响应（状态 = 失败）。再次不知道如何进行 :S

Answer 1

我在尝试从 Cordova 应用程序访问 Web api 时遇到了一个非常相似的问题。我在 Web 上使用 App ID Uri api 我想在调用 acquireTokenAsync 时作为 resouceURL 访问。当我将其更改为 Web Api 的客户端 ID 时，它起作用了。

Answer 2

我刚刚解决了。就像人们所期望的那样，补救措施非常简单。在 Azure AD 中配置应用程序，我选择了 "web application" 类型的应用程序，因为这是一个具有 Angular 和所有的 Web 应用程序。现在我想，由于 Cordova 将内容转换为本机代码，所以这不是正确的选择。一旦我创建了一个新的应用程序 "native application" 并使用了那个应用程序的客户端 ID，一切都开始工作了......真诚希望这会在未来帮助其他人......！

使用 angular 和 ADAL 的 Cordova 应用

Cordova app using angular & ADAL

angularjs

cordova

azure-active-directory

adal

visual-studio-cordova