AngularJS SPA 액세스 CORS WebAPI 보안 Azure AD

Question

예제 SinglePageApp-DotNet을 따라 가면 정상적으로 작동합니다.

다음 CORS 웹 API를 호출하는 단일 페이지 응용 프로그램을 만들고 싶습니다. 두 응용 프로그램 모두 AAD에 의해 보안되고 Azure 웹 사이트에 배포되므로 제대로 작동하지 않습니다. 모든 단어에 https://github.com/omercs/corsapisample 및 https://github.com/matvelloso/AngularJSCORS의 예를 따라 갔지만 '이 요청에 대해 인증이 거부되었습니다'라는 오류가 표시됩니다.

컨트롤러 동작에 대해 [Authorize] 특성을 비활성화했을 때 작동했습니다. 그래서 CORS 설정이 맞다고 생각합니다. 로그에서 CORS 프리 플라이트 (OPTION 호출)가 성공적임을 알 수 있습니다.

어떤 아이디어로 문제를 해결할 수 있습니까? 도와 주셔서 대단히 감사합니다.

Answer 1

CORS API 끝점에서 401 응답 코드가 표시되면 서비스에서 토큰이 허용되지 않음을 의미합니다. cors api 프로젝트 구성에서 토큰 및 대상의 대상을 일치시켜야합니다.

1
1. 이 응용 프로그램 키 IDA 찾기 푸른 AD- 프로젝트에서
2. 등록 CORS의 API 프로젝트 : 임차인과 AAD 세입자 이름
3. 으로 값을 교체 응용 프로그램 키 IDA 찾기 : 관객과 함께 값을 대체 Azure 포털에서 복사 한 App ID URI.
4. 는 푸른 AD- 프로젝트에서
5. 등록 단일 페이지 응용 프로그램이
6. 클릭 섹션 "다른 응용 프로그램에 대한 권한"에서
7. 을 PROJECT1 할 수있는 권한이 부여 샘플 같이 고르 사용 "응용 프로그램 추가를." '표시'드롭 다운에서 '기타'를 선택하고 상단 체크 표시를 클릭하십시오. &을 찾으려면 To Go API를 클릭하고 하단 체크 표시를 클릭하여 응용 프로그램을 추가하십시오. "Delegated Permissions"드롭 다운에서 "Access To Go API"를 선택하고 구성을 저장하십시오.

암시 OAuth2를 위해 사용 : 기본적으로

, 푸른 AD 프로비저닝 애플리케이션은 OAuth2를 암시 부여를 사용하는 사용할 수 없습니다. Azure AD 섹션의 app config에서 매니페스트 관리 버튼을 사용하여 애플리케이션의 매니페스트 파일을 다운로드하여 디스크에 저장하십시오. 텍스트 편집기로 매니페스트 파일을 엽니 다. oauth2AllowImplicitFlow 속성을 검색하십시오. false로 설정되어 있음을 알 수 있습니다. true로 변경하고 파일을 저장하십시오. 매니페스트 관리 버튼을 사용하여 업데이트 된 매니페스트 파일을 업로드합니다. 앱 구성을 저장하십시오.

피들러를 사용하여 토큰을 얻고 문제가있는 경우이를 검사 할 수 있습니다. 권한 설정이 올바르다면 CORS API 끝점이 토큰을 수락합니다.

Answer 2

참고하시기 바랍니다. 우리는 이제 ADAL JS 및 Angular에서 CORS를 사용하는 방법을 보여주는 공식 샘플을 제공합니다. 코드 및 자세한 지침은 https://github.com/AzureADSamples/SinglePageApp-WebAPI-AngularJS-DotNet