angularjs 如何从头开始将MSAL库与Angular js 1.x应用程序集成

我实际上正在这样做的过程中，我遇到了一些重定向方法的问题。认证后的回调URL没有得到处理，我正在弄清楚为什么。因为我使用的是msal-browser，可能没有办法做到这一点，我必须手动做？来自git repo的代码样本很棒，可以帮助你理解JS实现的流程，但我怀疑angularjs 1.8正在做一些可能影响回调的事情，或者angularjs的hash“#”也可以做一些事情。我不太确定。但是这里有代码示例的链接，在那里你可以看到很多文档。相关的是msal-browser和msal-common。msal-angular不支持angularjs，最低版本是v2。
我目前正在尝试使用工厂将其实现为服务，然后我尝试在主模块配置中使用urlRouterProvider.when（'/'）和控制器中使用该服务。我还没有按摩出完整的过程，因为我仍然有一些问题。所以我会尝试在我这样做的时候更新这个！

友情链接：msal-browser samples
更新：

我不知道这个更新有多大帮助，但是我得到了要处理的回调URL，并且在使用loginRedirect()时解决了这个问题（其他事情仍然需要处理，比如令牌）。我不确定我是如何做到的，可能是这些事情之一或组合：

我添加了http://localhost:3000/#到azure AD重定向uri。所以现在我有带和不带“#"的两种。在MSAL配置对象中，我没有指定redirectUri。（顺便说一句，我有html5 mode（false），所以对你来说可能不同）。
我在azure AD中添加了作用域，并使用它们，而不是仅仅使用我从示例代码（如[User.Read]）中获取的任意作用域。我不认为这有很大的区别，因为如果作用域是错误的，它不会喜欢它，它会显示一条关于它的消息。
我在应用模块定义.run()中添加了处理从MSAL发出的事件，我认为这可以修复它，但它仍然可以在没有它们的情况下工作。

稍后我会再看一看，希望看到我做了什么让它工作，但你也可能不会遇到这个问题。

感谢您发送编修。
我必须使用多个身份提供程序（Azure AD，Keycloak，Okta，DB登录）的MSAL库
我正在AngularJS应用程序中使用MSAL库实现与多个身份提供程序的身份验证。目前，我专注于Azure AD。以下是我所采取的步骤和我面临的问题的概述：

第一步：路由配置

我在我的AngularJS应用程序中使用$routeProvider.when（'/'）设置了一个路由配置。当我访问localhost：8080/abc时，它正确地重定向到登录页面。

mainApp.config(function($routeProvider) {
$routeProvider
    .when("/login/", {
        templateUrl: "views/login.html",
        controller: "LoginController"
    })
    .when("/logout/", {
        templateUrl: "views/logout.html",
        controller: "LogoutController"
    })
    .when("/workbench/", {
        templateUrl: "views/workbench.html",
        controller: "WorkbenchController"
    })
    .otherwise({
        redirectTo: "/login/"
    });
)}

字符串
第二步：重定向到Azure AD登录页**访问localhost：8080/abc时，会短暂重定向到登录页，然后会自动重定向到Azure AD登录页。

mainApp.service("msalService", ["$q", function ($q) {
var msalConfig = {
    auth: {
        clientId: "4bhy65sv-cde1-3939-rtfhf9-a2b7356789327645",
        authority: "https://login.microsoftonline.com/47582628-45982-4bb1-a3e5-583446725dsfdtjfdsbf",
        redirectUri: "http://localhost:8080/abc",
        navigateToLoginRequestUrl: true,
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: true,
    },
};

var myMSALObj = new msal.PublicClientApplication(msalConfig);

return {
    acquireToken: function () {
        var deferred = $q.defer();

        myMSALObj.acquireTokenSilent({})
            .then(function (tokenResponse) {
                deferred.resolve(tokenResponse);
            })
            .catch(function (error) {
                myMSALObj.acquireTokenRedirect({});
            });

            return deferred.promise;
    },

    logout: function () {
        myMSALObj.logout();
    },

    handleRedirectPromise: function () {
        return myMSALObj.handleRedirectPromise();
    },
};
},]);

型
处理重定向承诺：-

mainApp.run(function (msalService, $location, $rootScope) {
msalService.handleRedirectPromise().then(function (response) {
    if (response) {
        console.log("Access token ---  ", response.accessToken);
        $rootScope.msalAccessToken = response.accessToken;
    }
})
.catch(function (error) {
    console.error("Redirect handling failed", error);
});
});

型
MainController.js

mainApp.controller("MainController", function ($scope, $rootScope, msalService, ) {
    $scope.doApiRequest = function(){
        msalService.acquireToken().then(function(tokenResponse){
            console.log("Token acquired", token);
        })
        .catch(function(error){
            console.error("Token acquisition failed", error);
        });
    }
    
     $scope.doApiRequest();
});

型

步骤3：获取Azure AD令牌

我已成功使用Azure AD凭据登录，获取了令牌并将其存储在$rootScope中。我已在请求标头中为后续请求设置了此令牌。
身份验证拦截器也在我定义$routeProvider的页面上

mainApp.service('authenticationInterceptor', function($q, $rootScope, $location, $cookies, $injector) {
    var service = this;
    var msalAccessTokenPromise = $injector.get("msalService").handleRedirectPromise();

    service.responseError = function(response, status) {
        if(!response.headers){
            return $q.reject(response);
        }

        // authorization.
        if (response.headers('Reason-Code') == 401) {
            $location.path('/unauthorized');
            return;
        } else if (response.config.url.indexOf('loginAuth') == -1 && response.status == 401) {

            if (!$rootScope.loggedOutProcessed) {
                $rootScope.logoutApp();
                RemoveUser();
                RemoveUserImage();
                $rootScope.showMessage('Your current session has expired.. Please login again..!!', 'User Session Expired', false);
                $rootScope.loggedOutProcessed = true;
            }
            return;
        }

        return $q.reject(response);
    };

    service.response = function(response) {
        if (response != undefined && response.headers != undefined && response.headers('RedirectToSSOLogin') === "true") {
            //redirect to login page
            window.location.href = appBaseUrl;
        } else if (response != undefined && response.headers != undefined && response.headers('RedirectToDblogin') === "true") {
                //redirect to login page
                $window.location.href = window.location.protocol + "//" + window.location.host + "/abc/login/dblogin";
        }  else {
            return response;
        }
    };

    service.request = function(request) {
        var ssoLoginEnabled = $rootScope.ssoLoginEnabled;
        var dbLogin = $rootScope.dbLogin;
        var authToken = $cookies.get("X-Auth-Token");
        if (false && ssoLoginEnabled && !dbLogin && !authToken) {

            window.location.href = appBaseUrl;
            return request;
            
        } else {
            return $q.when(msalAccessTokenPromise).then(function (response) {
                var msalAccessToken = response ? response.accessToken : $rootScope.msalAccessToken;
                if (msalAccessToken) {
                    request.headers.Authorization = "Bearer " + msalAccessToken;
                }
                return request;
            });
        }
    };
})
.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('authenticationInterceptor');
}])

型

问题：重定向到应用程序登录页面

完成登录步骤后，应用程序重定向回登录页面。我不确定为什么会发生这种情况。
我很感激任何关于如何解决这个问题的见解或建议。此外，如果你需要更多的细节或特定的代码片段，请让我知道。

angularjs 如何从头开始将MSAL库与Angular js 1.x应用程序集成

2条答案

相关问题

热门标签

最新问答