Подтвердить что ты не робот

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

Я хотел бы создать новое приложение SingleularJS, Web API Single page. Есть ли у кого-нибудь примеры, показывающие, как я могу настроить экран входа пользователя, который подключается к контроллеру WEB API для простого входа в систему (нет необходимости в регистрации в google/facebook и т.д.), Который использует идентификатор ASP.NET и без необходимости регистрации пользователя,

Также как я могу обработать отображение нового представления после того, как логин был завершен. Я хотел бы иметь решение, которое не отображает маршрутизацию в URL-адресе браузера. Так, например, я хотел бы иметь возможность переключаться с режима входа в систему и на несколько других видов без изменения URL-адреса с www.abc.com.

Другими словами, я бы хотел не показывать www.abc.com/login, www.abc.com/screen1, www.abc.com/screen2

Любые советы будут высоко оценены.

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

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

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

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

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

Сообщите мне о какой-либо конкретной части, которая неясна, и я постараюсь сделать это более ясным в ответе.

Ответ 2

Обратитесь к следующему блогу для демонстрации одностраничного приложения (SPA) для ASP.NET Web API 2 и AngularJS, разработанного командой в Marlabs.

http://weblogs.asp.net/shijuvarghese/archive/2014/01/25/demo-spa-app-for-asp-net-web-api-2-and-angularjs.aspx

Приложение построено со следующими технологиями:

  • Веб-интерфейс ASP.NET 2
  • EF 6 Code First
  • AutoMapper
  • Autofac
  • Семантический интерфейс
  • AngularJS 1.1.5

Приложение опубликовано на github в https://github.com/MarlabsInc/webapi-angularjs-spa.

Ответ 3

@DavidAntaramian дал отличный пример. Но если вы хотите простой, вы можете посмотреть на это HOL от Microsoft. Их последний пример на github использует .NET Core, но вы можете скачать выпуск с октября 2015 года.