问题：

AngularJS：在单页应用程序中使用身份验证的基本示例

晋功

2023-03-14

我是AngularJS的新手，通过了他们的教程并对其有了感觉。

我为我的项目准备了一个后端，其中每个＜code＞REST＜code＞endpoint都需要进行身份验证。

我想做什么< br> a .)我想为我的项目< code > http://my project . com 创建一个单独的页面。< br> b .)一旦用户点击浏览器中的URL，根据用户是否登录，他将在同一URL < code > http://my project . com 下显示主页/视图或登录页面/视图。< br> c .)如果用户未登录，它会填写表单，服务器会在会话中设置一个< code>USER_TOKEN，因此所有对endpoint的进一步请求都将基于< code>USER_TOKEN进行身份验证

我的困惑
a.）如何使用AngularJS处理客户端身份验证？我看到这里和这里，但不知道如何使用它们。
b.）如何根据用户是否登录到同一url向用户呈现不同的视图http://myproject.com

我第一次使用angular.js，真的不知道如何开始。非常感谢任何建议和/或资源。

共有3个答案

何涵育

2023-03-14

我在这里回答了一个类似的问题：AngularJS身份验证RESTful API

我为UserApp编写了一个AngularJS模块，支持受保护/公共路由、登录/注销时的重新路由、状态检查的心跳、将会话令牌存储在cookie中、事件等。

您可以:

修改模块并将其附加到您自己的 API，或者
将该模块与用户应用程序（基于云的用户管理 API）一起使用

https://github.com/userapp-io/userapp-angular

如果您使用UserApp，您将不必为用户内容编写任何服务器端代码(不仅仅是验证令牌)。参加Codecademy的课程来尝试一下。

下面是一些如何工作的示例：

如何指定哪些路由应该是公共的，以及哪个路由是登录表单：

$routeProvider.when('/login', {templateUrl: 'partials/login.html', public: true, login: true});
$routeProvider.when('/signup', {templateUrl: 'partials/signup.html', public: true});
$routeProvider.when('/home', {templateUrl: 'partials/home.html'});

。否则（）route应设置为您希望用户在登录后重定向的位置。例子：

$routeProvider.否则（{重定向至：“/家”}）;

带有错误处理的登录表单：

<form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>

带有错误处理的注册表单：

<form ua-signup ua-error="error-msg">
  <input name="first_name" placeholder="Your name"><br>
  <input name="login" ua-is-email placeholder="Email"><br>
  <input name="password" placeholder="Password" type="password"><br>
  <button type="submit">Create account</button>
  <p id="error-msg"></p>
</form>

注销链接：

<代码>

（结束会话并重定向到登录路由）

访问用户属性:

用户属性使用User服务访问，例如：User.current.email

或在模板中：

隐藏仅在登录时可见的元素：

<代码>

显示基于权限的元素：

<代码>

要对您的后端服务进行身份验证，只需使用user.token（）获取会话令牌并将其与AJAX请求一起发送。在后端，使用UserApp API（如果您使用UserApp）检查令牌是否有效。

如果你需要任何帮助，就告诉我！

桂高昂

2023-03-14

我喜欢这种方法，并在服务器端实现它，而无需在前端执行任何与身份验证相关的事情

我最新应用程序的“技术”是..客户端不关心身份验证。应用程序中的每一件事都需要先登录，因此服务器总是提供登录页面，除非在会话中检测到现有用户。如果是会话。如果找到用户，服务器只发送index.html。Bam:-o

寻找“安德鲁·乔斯林”的评论。

https://groups.google.com/forum/?fromgroups=#！search in/angular/authentic ation/angular/POXLTi _ JUgg/VwStpoWCPUQJ

姬墨竹

2023-03-14

我创建了一个github repo来总结这篇文章:https://medium . com/opinious-angular js/techniques-for-authentic ation-in-angular js-applications-7 bbf 0346 AEC

ng-login Github 存储库

扑通一声

我会尽量解释清楚，希望我能帮到你们中的一些人:

(1) app.js:在app定义上创建认证常数

var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
    all : '*',
    admin : 'admin',
    editor : 'editor',
    guest : 'guest'
}).constant('AUTH_EVENTS', {
    loginSuccess : 'auth-login-success',
    loginFailed : 'auth-login-failed',
    logoutSuccess : 'auth-logout-success',
    sessionTimeout : 'auth-session-timeout',
    notAuthenticated : 'auth-not-authenticated',
    notAuthorized : 'auth-not-authorized'
})

（2） Auth服务：以下所有功能都在Auth中实现。js服务。$http服务用于与服务器进行身份验证过程的通信。还包含授权功能，即允许用户执行特定操作。

angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS', 
function($http, $rootScope, $window, Session, AUTH_EVENTS) {

authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]

return authService;
} ]);

（3）会话：用于保存用户数据的单例。此处的实现取决于您。

angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {

    this.create = function(user) {
        this.user = user;
        this.userRole = user.userRole;
    };
    this.destroy = function() {
        this.user = null;
        this.userRole = null;
    };
    return this;
});

(4)父控制器(Parent controller ):将此视为您的应用程序的“主要”功能，所有控制器都继承自该控制器，并且它是该应用程序认证的主干。

<body ng-controller="ParentController">
[...]
</body>

(5)访问控制:要拒绝某些路线上的访问，必须实施两个步骤:

a）在用户界面路由器的$stateProvider服务上添加允许访问每个路由的角色的数据，如下所示（ngRoute也是如此）。

.config(function ($stateProvider, USER_ROLES) {
  $stateProvider.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard/index.html',
    data: {
      authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
    }
  });
})

b）在 $rootScope.$on（“$stateChangeStart”）上，添加该功能以防止用户未获得授权时的状态更改。

$rootScope.$on('$stateChangeStart', function (event, next) {
    var authorizedRoles = next.data.authorizedRoles;
    if (!Auth.isAuthorized(authorizedRoles)) {
      event.preventDefault();
      if (Auth.isAuthenticated()) {
        // user is not allowed
        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
      } else {
        // user is not logged in
        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
      }
    }
});

（6）身份验证拦截器：这是实现的，但无法检查此代码的范围。每次$http请求后，此拦截器都会检查状态代码，如果返回以下值之一，则会广播事件以强制用户再次登录。

angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
    return {
        responseError : function(response) {
            $rootScope.$broadcast({
                401 : AUTH_EVENTS.notAuthenticated,
                403 : AUTH_EVENTS.notAuthorized,
                419 : AUTH_EVENTS.sessionTimeout,
                440 : AUTH_EVENTS.sessionTimeout
            }[response.status], response);
            return $q.reject(response);
        }
    };
} ]);

附言：通过添加包含在directives.js.中的指令，可以很容易地避免第一篇文章中所述的表单数据自动填充错误

P. S.2用户可以轻松调整此代码，以允许查看不同的路线，或显示不打算显示的内容。逻辑必须在服务器端实现，这只是在您的ng-app上正确显示内容的一种方式。

类似资料：

AngularJS：在单页应用程序中使用身份验证的基本示例

问题内容：我是AngularJS的新手，并仔细阅读了他们的教程，并对此有所了解。我为我的项目准备了一个后端，每个端点都需要进行身份验证。我想做什么 a。）我想为我的项目准备一个页面。 b。）用户在浏览器中单击URL后，根据用户是否登录，将在同一URL下向他显示主页/视图或登录页面/视图。 c。）如果用户未登录，则填写该表单，服务器将设置一个in会话，因此将根据以下身份验证对端点的所有其他请求
如何在angularjs中使用基本身份验证？

问题内容：如何在AngularJs中使用基本身份验证？我已经在Google上搜索了，但是资源对我来说不起作用。我非常新AngularJS 问题答案：假设您的html定义如下：您可以使用以下基本身份验证将后端连接到rest api：请注意，此代码的大部分是方法。如果不需要支持IE9及更低版本，则可以将其替换为本地JS实现- atob（）和btoa（）：https : //develope
angularjs:$http基本身份验证

我尝试了angular.js，并从一个restful api的web-ui开始（使用超文本传输协议基本授权）。这真的很好，除了授权工作。到目前为止，我使用的是设置密码，但大多数情况下浏览器会打开http basic auth的默认登录表单。另一个奇怪的行为是angular请求不包含授权头（选项和GET请求都不包含）。我还尝试使用header配置在每个请求上设置此header，但这也不起作用。有
在spring Boot中对主应用程序使用oauth2身份验证，对管理endpoint使用基本身份验证？

我正在使用Spring Boot构建一个REST Api，我可以使用Oauth2（使用spring-security-oauth2)来保护它。我想为执行器管理endpoint（度量、健康等）管理一个单独的身份验证和授权模式。并且我希望管理endpoint运行在不同的端口（application.properties中的management.port=8081)上我读了很多书，但找不到一个方法
多身份验证提供程序--LDAP、JWT、Oauth2和Spring Boot应用程序中的基本身份验证

现在，我们有了集成执行器。我希望我的执行器endpoint可以通过基本认证在浏览器中访问。为此，我用@order(1)添加了WebSecurityConfigurerAdapter的一个实现。它在浏览器上工作得很好。但是，当我从angualar应用程序调用登录url时，它为/oauth/token url给出了401个未经授权的错误，因此我无法从ui应用程序登录。任何帮助将感谢解决此错误。类
在Java应用程序中使用NTLM身份验证

问题内容：我想在我的Java应用程序中使用Windows NTLM认证来透明地认证Intranet用户。如果使用浏览器（单点登录），用户将不会注意到任何身份验证。我发现了一些具有NTLM支持的库，但是不知道要使用哪个库： http://spnego.sourceforge.net/ http://sourceforge.net/projects/ntlmv2auth/ http://jcifs

AngularJS：在单页应用程序中使用身份验证的基本示例

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档