하이브리드 ASP.NET Core MVC(백엔드) 및 Vuejs SPA(프런트엔드)에서 Azure AD 인증을 구성하는 방법은 무엇입니까?

Question

내 애플리케이션은 ASP.NET Core MVC를 백엔드로 사용하는 하이브리드 접근 방식입니다. 내 프런트엔드에서 데이터베이스에서 데이터를 가져오고 MS Graph에서 API 호출을 수행하는 데 사용하는 다양한 컨트롤러가 있습니다. 나는 사용자가 처음으로 웹사이트에 로그인할 때 인증을 시작하기 위해 다음 program.cs 파일을 사용합니다.

으아악

Azure AD 포털에서 내 애플리케이션이 웹 애플리케이션으로 등록됩니다. 따라서 사용자가 처음 웹 사이트를 방문하면 로그인 프로세스를 시작하기 위해 https://login.microsoftonline.com/blahblah로 리디렉션됩니다. 이는 Azure AD ID 플랫폼에 의해 자동으로 수행됩니다. 그런 다음 로그인이 발생하면 VueJS 스파가 로드된 로컬 호스트(localhost:43862)로 리디렉션됩니다. 내 스파는 컨트롤러에 대한 다양한 axios 요청을 사용하여 데이터를 가져오고 vue 라우터를 사용하여 구성 요소를 로드합니다. 그런데 문제는 쿠키가 만료되었거나 다른 탭에서 로그아웃했기 때문에 사용자가 다시 로그인해야 한다는 것입니다. 만료된 세션의 다음 Axios 요청은 사용자를 Azure 로그인 화면으로 리디렉션하지 않지만 CORS 오류가 발생합니다. 따라서 axios 요청을 통해 페이지가 Azure AD 로그인 화면으로 리디렉션되도록 하거나(CORS 정책으로 인해 오류가 발생하므로 최악의 아이디어일 수 있음), 다시 localhost/로그인으로 리디렉션하도록 해야 합니다. Azure AD 로그인 버튼을 사용하는 사용자 지정 로그인 화면은 CORS에 영향을 주지 않아야 합니다. 그러면 Azure AD 로그인으로의 이 Azure AD 리디렉션을 가로채서 내 로그인으로 바꾸려면 어떻게 해야 할까요?

또한 Axios 요청에서 이를 확인할 수 있도록 401 오류 코드를 반환하려고 시도했지만 아무 소용이 없었습니다. 거기에 중단점을 넣으면 이 코드에 도달하지만 응답의 상태 코드는 변경되지 않고 여전히 302가 표시됩니다. 내 코드가 이벤트에 추가하려고 합니다:

으아악

또 다른 생각은 login.microsoft.com에서 리디렉션을 허용하도록 CORS 정책을 설정해야 한다는 것입니다. 아니면 이것이 나쁜 습관입니까?

Answer 1

귀하의 질문 중 일부에 답변해 드릴 수 있습니다... 먼저 Azure AD로 보호되는 API 애플리케이션의 경우 API가 수행해야 하는 작업은 요청의 요청 헤더에 올바른 액세스 토큰이 포함되어 있는지 확인하고, 그렇다면 응답을 제공하는 것입니다. 그렇지 않으면 401이나 403과 같은 오류가 발생합니다. 일반 API 애플리케이션에는 사용자 로그인을 위한 UI가 없어야 합니다. 어쨌든 MVC 프로젝트에 API를 노출하려는 경우에는 괜찮지만 API 자체에는 UI가 없어야 합니다.

아래 예를 살펴보겠습니다. 저는 .net 6 웹 API 프로젝트를 가지고 있고 이것이 제 program.cs:

입니다. 으아악

appsetting.json에서 구성해야 합니다.

으아악

컨트롤러는 다음과 같습니다.

으아악

Azure AD 애플리케이션이 있고 다음 API를 노출합니다.

동일한 Azure AD 앱에 대해 이 API도 추가했습니다.

그럼 테스트를 해보자. 이 API를 직접 호출하면 401 오류가 발생합니다:

요청에 만료된 토큰을 사용하는 경우에도 401 오류가 발생합니다.

하지만 올바른 토큰을 사용하면(https://jwt.io로 이동하여 토큰을 디코딩하면 여기에 올바른 범위가 포함되어 있음을 알 수 있습니다. 제 생각에는 "scp": "Tiny.Read",) 응답을 받습니다.

이제 API 부분이 완성되었습니다. 클라이언트 SPA를 살펴보겠습니다. SPA의 경우 MSAL，以便您可以让您的用户通过 Azure AD 登录，并生成用于调用 MS graph API 或您自己的 API 的访问令牌。生成访问令牌的代码应该相同，但您应该为不同的API设置不同的范围。在我的场景中，我的 API 需要一个范围 Tiny.Read 통합한 다음 클라이언트 애플리케이션에 설정해야 합니다.

이것은 액세스 토큰 생성 반응의 스크린샷입니다. 코드에서 범위를 설정해야 합니다.

이제 액세스 토큰을 생성하는 방법이 있으므로 이미 API URL을 알고 있습니다. 그런 다음 API 호출, AJAX 사용, 가져오기 등의 요청을 보낼 수 있습니다. http 요청만 보내면 됩니다. 그리고 API를 호출하는 부분에서는 응답도 처리해야 합니다. 응답 코드가 401이면 로그인 페이지로 리디렉션하는 등 일부 논리를 수행해야 합니다. 여기서 문제가 있고 CORS 문제가 있다고 말씀하셨습니다. 이 부분은 답변을 드릴 수 없습니다. Azure AD 로그인 페이지로 리디렉션하는 방법에 따라 다르다고 생각합니다. 이 예제를 살펴보면 사용자 로그인 및 그래프 API 호출 방법을 이해할 수 있습니다.