Пример СПА с экраном входа в систему, который использует AngularJS и подключается к ASP.NET Web API 2?

Итак, вместо того, чтобы пытаться найти пример, я создал вместо этого (ссылка внизу). Чтобы объяснить, как работает функциональность, я хочу перейти к нескольким вещам:

• новый ASP.NET система идентификации предоставляет реализацию маркера носителя OAuth 2.0, который может использоваться с клиентами, использующими ресурс веб-API через HTTP. Поскольку аутентификация не хранится в файле cookie сеанса, сервер не несет ответственности за поддержание состояния аутентификации. Этот побочным эффектом является то, что потребитель должен управлять аутентификацией сервера и управлением возвращенным токеном. Это система, которую Microsoft использует в шаблоне SPA, который он предоставляет с VS 2013.

• AngularJS не делает никаких предположений об аутентификации, поэтому вам решать, как аутентифицировать.

• AngularJS обеспечивает $http сервис для запроса удаленных HTTP-сервисов, а также $resource, который построен на вершине $http. С помощью Authorization заголовки с реализацией маркера носителя выше, вы можете объединить оба, чтобы обеспечить аутентифицированный доступ к ресурсам сервера через HTTP. AngularJS позволяет установить 'default'Authorization заголовок, который он будет использовать в каждой последующей транзакции HTTP.

имея это в виду, я добился этого путем создания Службы пользователя, которая обрабатывает все данные аутентификации, включая настройку HTTP Authorization заголовок, между сервером Web API и СПА. В зависимости от состояния проверки подлинности пользователя можно скрыть определенные элементы пользовательского интерфейса для предотвращения навигации. Однако, если вы также определяете состояние как требующее проверки подлинности как свойство resolve объект для состояния, наблюдатель установлен на $stateChangeError событие зафиксирует ошибку и перенаправит пользователя в форму входа. После правильной аутентификации он перенаправит пользователя в состояние, в которое они пытались перейти.

для того, чтобы предотвратить проверку подлинности будучи потерянным между сеансами браузера (поскольку клиент отвечает за поддержание маркера аутентификации, и этот маркер поддерживается в памяти), я также добавил возможность для пользователя сохранять аутентификацию в cookie. Все это прозрачно для пользователя. Для них он практически идентичен традиционной аутентификации на основе форм и сеансов.

Я не уверен, почему вы хотите, чтобы пользователь не видел маршруты, но я закодировал его как таковой. Я в долгу Пример Plunker Sedushi о том, как использовать маршрутизатор AngularUI для навигации с сохранением состояния без использования URL-адресов. Тем не менее, я не уверен, что могу лично рекомендовать это для любого приложения, которое я бы написал самостоятельно.

полное решение (как WebAPI, так и WebUI) доступно с пошаговыми инструкциями здесь.

Дайте мне знать о любой конкретной части, которая неясна, и я постараюсь сделать ее более ясной в ответе.