Как обрабатывать аутентификацию в приложении Angular JS

Question

Я использую систему auth в своем угловом приложении js.

Что я планирую его, как показано ниже:

1. Информация Get пользователя (имя и перейти от формы входа)
2. Проверьте, существует ли пользователь или нет
3. если существует сервер реагировать с куки сессии и frontend будет перенаправлен на определенную страницу.
4. , то пользователь будет делать какую-то задачу, которая будет генерировать запрос API
5. запроса API должны иметь информацию куков, который был отправлена ​​на шаге 3
6. проверки сервера был ли генерироваться куки или нет, и если куки был найден затем ответить с Результаты запроса API. И в моей службы я делаю что-то вроде

 
    MyApp.service('myAuth', function($http, $q) { 
     this.authHeader = null; 
     this.checkAuth = function(){ 
     //do api call and if success sets this.authHeader = response 
     } 
     this.isAuthenticaed = function(){ 
      this.authHeader ? return this.authHeder : return false; 
     } 

После отправки формы входа в систему я буду называть checkAuth и получить мою куки сессии назад с моего сервера, как я могу добавить информацию печенья, делая следующий вызов REST а также когда пользователь будет перемещаться по всему приложению после входа в систему. Я хочу каждый раз проверять isAuthenticaed true или false, в Angularjs, когда он будет перемещаться на другую страницу, сбрасывает ли он после установки его true с первого вызова? И мой подход 1-6 хорош или у вас есть какие-то конкретные предложения? Btw Я проверил предыдущие так записи, но это не то, что я хочу знать.

Answer 1

Я не уверен, что о вашем внутреннем интерфейсе, но это, как я хотел бы сделать это

• Создайте отдельную страницу входа (специальный URL не угловой вид к югу или диалоговому модального).
• Если пользователь не аутентифицирован, перенаправляйте на этот логин . Это делается перенаправлением сервера. Эта страница может использовать или не использовать угловую структуру , так как она просто требует отправки пользователя \ password на сервер .
• Сделайте запрос POST (не AJAX) со страницы входа и проверьте на сервере.
• На сервере установлен файл cookie auth. (Различные структуры делают это по-другому. ASP.Net устанавливает форму аутентификации cookie.)
• После аутентификации пользователя перенаправляет пользователя на фактическое угловое приложение и загружает все его компоненты.

Это сохраняет код, необходимый для управления аутентификацией на стороне клиента в Угловом. Если пользователь приземляется на этой странице, он аутентифицирован и имеет файл cookie.

Также поведение браузера по умолчанию заключается в том, чтобы отправлять все куки-файлы, связанные с доменом, с каждым запросом, поэтому вам не нужно беспокоиться о том, посылает ли какой-либо cookie-файл какой-либо cookie-файл или нет.

Answer 2

Я использую http-auth-перехватчик. http://ngmodules.org/modules/http-auth-interceptor

В моем бэкэнде (asp.net mvc) Я создаю простую службу аутентификации и возвращаю http-ошибку 401, если пользователь не аутентифицирован. Затем я обрабатываю ошибку с помощью входа в систему на сайте SPA.

Answer 3

(Раскрытие информации: Я один из разработчиков UserApp)

Вы можете воспользоваться услугой третьей стороной UserApp для этого, вместе с AngularJS module.

Проверьте getting started guide или возьмите course on Codecademy. Вот некоторые примеры того, как это работает:

• Войти Форма с обработкой ошибок:

  <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> 
  

  Информация о пользователе Доступ с помощью user услуги: user.current.email

  Или в шаблоне: <span>{{ user.email }}</span>

• Регистрация формы с обработкой ошибок:

  <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> 
  

  ua-is-email означает, что имя пользователя такое же, как электронная почта.

• Как определить, какие маршруты, которые должны быть публичными, и по какому маршруту, который является форма Логин:

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

  .otherwise() маршрут должен быть установлен в положение, где вы хотите, чтобы ваши пользователи будут перенаправлены после входа в систему , Пример:

  $routeProvider.otherwise({redirectTo: '/home'});

• Выйдите ссылка:

  <a href="#" ua-logout>Log Out</a>

• Скрыть элементы, которые должны быть видны, когда регистрируемые только в:

  <div ng-show="user.authorized">Welcome {{ user.first_name }}!</div>

И для проверки подлинности ваших внутренних служб просто используйте user.token(), чтобы получить токен сеанса и отправить его с помощью запроса AJAX. В фоновом режиме используйте UserApp API, чтобы проверить, действительно ли токен или нет.

Если вам нужна помощь, просто дайте мне знать :)

Answer 4

Идеи, выдвинутые предыдущие ответы будут работать, но я думаю, что они слишком много. Тебе не нужно ничего такого сложного.

, как я могу добавить информацию печенья, делая следующий REST вызов

Включите withCredentials по умолчанию внутри $httpProvider так:

app.config(['$httpProvider', function($httpProvider) { 
    $httpProvider.defaults.withCredentials = true; 
}]); 

Затем удалите подстановочные (если у вас один) из заголовков, связанных с CORS, и установить учетные данные на стороне сервера. В моем случае, с помощью Python + колба + Flask-Restful, это супер легко и выглядит следующим образом:

import Flask 
from flask_restful import Api 
app = Flask(__name__) 
api = Api(app) 
api.decorators = [cors.crossdomain(origin='http://localhost:8100', credentials=True)] 

Теперь печенье будет установлен автоматически и прозрачно возвращается в браузере. Смотрите эти темы для получения дополнительной информации:

• $http response Set-Cookie not accessible
• Angularjs $http does not seem to understand "Set-Cookie" in the response

, когда пользователь будет перемещаться по всему приложению после входа в систему, я хочу, чтобы проверить каждый раз isAuthenticaed истинным или ложным

Как было предложено выше, верните сервер 401, если сеанс аутентификации истекает или удаляется, и используйте $httpInterceptor в Угловом, чтобы поймать это так:

app.config(function($httpProvider) { 
    var interceptor = 
     function($q, $rootScope) { 
      return { 
       'response': function(response) { 
        return response; 
       }, 
       'responseError': function(rejection) { 
        if (rejection.status==401) { 
         // Modify this part to suit your needs. 
         // In my case I broadcast a message which is 
         // picked up elsewhere to show the login screen. 
         if (!rejection.config.url.endsWith('/login')) 
         { 
          $rootScope.$broadcast('auth:loginRequired'); 
         } 
        } 

        return $q.reject(rejection) 
       } 
      } 
     }; 

    $httpProvider.interceptors.push(interceptor); 
});