Static Web Apps에서 인증 관리

2분

쇼핑 목록 웹앱은 사용자를 고유하게 식별해야 하고 제품을 저장할 수 있는 개인 공간을 제공해야 합니다.

인증은 정보 시스템에 액세스하려는 사용자의 ID를 확인하는 방법입니다. 이제 인증의 정의 및 Azure Static Web Apps에서 구현하는 방법을 살펴보겠습니다.

ID 공급자

Azure Static Web Apps는 다음과 같은 공급자를 사용하여 인증을 관리하여 인증 환경을 간소화합니다.

Microsoft Entra ID
GitHub
X

모든 인증 공급자는 기본적으로 사용하도록 설정됩니다. 나중에 사용자 지정 경로 규칙을 사용하여 인증 공급자를 제한할 수 있는 방법을 알아볼 것입니다.

시스템 폴더

/.auth 시스템 폴더는 모든 인증 관련 API에 대한 액세스를 제공합니다. 이러한 엔드포인트를 사용하여 로그인 및 로그아웃, 사용자 정보 액세스를 비롯하여 앱에서 전체 인증 워크플로를 구현할 수 있습니다.

다음 표에는 앱에서 사용할 수 있는 공급자별 로그인 경로가 나열되어 있습니다.

ID 공급자	로그인 경로
Microsoft Entra ID	`/.auth/login/aad`
GitHub	`/.auth/login/github`
X	`/.auth/login/x`

예를 들어 GitHub를 사용하여 로그인하려면 다음 코드 조각을 사용하여 웹앱에 로그인 링크를 포함할 수 있습니다.

<a href="/.auth/login/github">Login</a>

사용자가 로그인한 후 특정 페이지로 돌아가도록 하려면 post_login_redirect_uri 쿼리 문자열 매개 변수에 URL을 제공할 수도 있습니다. 예를 들면 다음과 같습니다.

<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>

Logout

/.auth/logout 경로는 웹앱에서 사용자가 로그아웃되도록 합니다. 다음 예제와 같이 사용자가 로그아웃할 수 있도록 사이트 탐색에 링크를 추가할 수 있습니다.

<a href="/.auth/logout">Log out</a>

로그인과 마찬가지로 post_logout_redirect_uri 쿼리 문자열 매개 변수를 사용하여 로그아웃한 후 리디렉션할 URL을 제공할 수 있습니다.

<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>

사용자 정보 액세스

직접 액세스 엔드포인트 또는 API 함수의 특수 헤더를 통해 인증 관련 사용자 정보에 액세스할 수 있습니다.

/.auth/me 경로에 GET 요청을 보내는 경우 현재 로그인한 사용자에 대한 데이터가 포함된 JSON 개체를 받게 됩니다. 인증되지 않은 사용자의 요청은 null을 반환합니다.

예제 응답 개체는 다음과 같습니다.

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

API 함수

Azure Static Web Apps에서 사용할 수 있는 모든 API 함수는 클라이언트 애플리케이션과 동일한 사용자 정보에 액세스할 수 있습니다. 사용자 데이터는 x-ms-client-principal HTTP 헤더의 함수에 전달됩니다. 데이터는 JSON 개체로 직렬화되고 Base64로 인코딩됩니다.

다음 예제 함수는 사용자 정보를 읽고 반환하는 방법을 보여줍니다.

module.exports = async function (context, req) {
  const header = req.headers["x-ms-client-principal"];
  const encoded = Buffer.from(header, "base64");
  const decoded = encoded.toString("ascii");

  context.res = {
    body: {
      userInfo: JSON.parse(decoded)
    }
  };
};

다음 단계

다음으로 앱에서 전체 인증 워크플로를 구현해 보겠습니다.