AngularJS를 사용하고 ASP.NET Web API 2에 연결하는 로그인 화면이있는 SPA의 예?
새로운 AngularJS, Web API 단일 페이지 응용 프로그램을 만들고 싶습니다. 누구나 ASP.NET ID를 사용하고 사용자 등록이 필요없는 간단한 로그인 (구글 / 페이스 북 로그인 등 필요 없음)을 위해 웹 API 컨트롤러에 연결하는 사용자 로그인 화면을 설정하는 방법을 보여주는 예제가 있습니까? .
또한 로그인이 완료되면 새보기 표시를 어떻게 처리 할 수 있습니까? 내가 원하는 것은 브라우저 URL에 라우팅을 표시하지 않는 솔루션을 갖는 것입니다. 예를 들어에서 URL을 변경하지 않고 로그인보기와 다른 몇 가지보기에서 전환 할 수 있기를 원합니다 www.abc.com.
즉 내가 게재되는 것을 방지하고자 www.abc.com/login, www.abc.com/screen1,www.abc.com/screen2
어떤 조언이라도 대단히 감사하겠습니다.
따라서 예제를 찾는 대신 대신 하나를 만들었습니다 (하단 링크). 기능의 작동 방식을 설명하기 위해 몇 가지 사항을 살펴 보겠습니다.
새로운 ASP.NET Identity System은 HTTP를 통해 웹 API 리소스를 사용하는 클라이언트와 함께 사용할 수있는 OAuth 2.0 Bearer 토큰 구현을 제공합니다. 인증이 세션 쿠키에 저장되지 않기 때문에 서버는 인증 상태를 유지할 책임이 없습니다. 부작용은 소비자가 서버 인증 및 반환 된 토큰 관리를 관리해야한다는 것입니다. 이것은 Microsoft가 VS 2013에서 제공하는 SPA 템플릿에서 사용하는 시스템입니다.
AngularJS는 인증에 대한 가정을하지 않으므로 인증 방법은 사용자에게 달려 있습니다.
AngularJS와는 제공하는
$http원격 HTTP 기반 서비스를 쿼리뿐만 아니라에 대한 서비스를$resource하는 위에 구축된다$http.Authorization위의 Bearer 토큰 구현과 함께 헤더를 사용하면 두 가지를 결합하여 HTTP를 통해 서버 리소스에 대한 인증 된 액세스를 제공 할 수 있습니다. AngularJS를 사용하면Authorization모든 후속 HTTP 트랜잭션에서 사용할 '기본' 헤더 를 설정할 수 있습니다 .
이를 염두에두고이를 수행 한 방법 Authorization은 웹 API 서버와 SPA 사이에 HTTP 헤더 설정을 포함하여 모든 인증 세부 정보를 처리하는 사용자 서비스를 만드는 것 입니다. 사용자의 인증 상태에 따라 탐색을 방지하기 위해 특정 UI 요소를 숨길 수 있습니다. 그러나 상태를 상태에 대한 resolve개체 의 속성으로 인증이 필요한 것으로 정의하는 경우 $stateChangeError이벤트에 설정된 감시자 가 오류를 캡처하고 사용자를 로그인 양식으로 리디렉션합니다. 적절한 인증이 완료되면 사용자를 탐색하려는 상태로 리디렉션합니다.
브라우저 세션간에 인증이 손실되는 것을 방지하기 위해 (클라이언트가 인증 토큰을 유지하고 해당 토큰이 메모리에 유지되므로) 사용자가 인증을 쿠키에 유지하는 기능도 추가했습니다. 이 모든 것은 사용자에게 투명합니다. 이들에게는 기존의 양식 및 세션 기반 인증과 거의 동일합니다.
사용자가 경로를 보지 못하도록하는 이유를 잘 모르겠지만 그렇게 코딩했습니다. AngularUI Router를 사용하여 URL을 사용하지 않고 상태 저장 방식으로 탐색하는 방법에 대한 Sedushi의 Plunker 예제에 빚을졌습니다. 그래도 내가 직접 작성하는 모든 응용 프로그램에 대해 개인적으로 이것을 추천 할 수 있을지 모르겠습니다.
전체 솔루션 (WebAPI 및 WebUI 모두)은 여기에서 단계별 지침과 함께 사용할 수 있습니다 .
명확하지 않은 특정 부분에 대해 알려 주시면 답변에서 더 명확하게 알려 드리겠습니다.
Marlabs 팀이 개발 한 ASP.NET Web API 2 및 AngularJS 용 SPA (단일 페이지 응용 프로그램) 데모는 다음 블로그를 참조하십시오.
이 앱은 다음 기술로 구축되었습니다.
- ASP.NET 웹 API 2
- EF 6 코드 우선
- AutoMapper
- Autofac
- 시맨틱 UI
- AngularJS 1.1.5
애플리케이션은 https://github.com/MarlabsInc/webapi-angularjs-spa의 github에 게시됩니다 .
@DavidAntaramian이 좋은 예를 들었습니다. 그러나 간단한 것을 원한다면 Microsoft 에서이 HOL을 볼 수 있습니다 . github의 최신 예제에서는 .NET Core를 사용하지만 2015 년 10 월부터 릴리스를 다운로드 할 수 있습니다.
'Programing' 카테고리의 다른 글
| MySQL SELECT AS는 두 개의 열을 하나로 결합 (0) | 2020.12.11 |
|---|---|
| 세로 구분선이 Bootstrap 3에서 작동하지 않습니다. (0) | 2020.12.11 |
| 자식이 있는지 PHP SimpleXML 확인 (0) | 2020.12.10 |
| Python의 PCA (주성분 분석) (0) | 2020.12.10 |
| 파일 또는 STDIN에서 읽기 (0) | 2020.12.10 |