공급자 및 역할에 대한 액세스 구성

완료됨

사용자 인증이 준비되면, 쇼핑 목록 웹앱에는 로그인하지 않은 사용자에게 일부 페이지에 대한 액세스를 제한하고, 특정 공급자를 통해서만 로그인을 허용하는 방법이 필요합니다.

웹앱에 대한 사용자 액세스를 미세 조정하기 위해 Azure Static Web Apps 라우팅 구성 및 역할을 살펴보겠습니다.

Azure Static Web Apps 구성 파일

Azure Static Web Apps의 구성은 staticwebapp.config.json 파일에 정의되어 있으며, 이 파일은 다음 설정을 제어합니다.

  • 라우팅
  • 인증
  • 권한 부여
  • 대체(fallback) 규칙
  • HTTP 응답 재정의
  • 글로벌 HTTP 헤더 정의
  • 사용자 지정 MIME 형식

staticwebapp.config.json의 권장 위치는 배포 중에 선택한 app_location 설정으로 설정된 폴더입니다. 하지만 애플리케이션 소스 코드 폴더 내부의 모든 위치에 파일을 배치할 수 있습니다.

이 사용 사례에서는 원하는 것을 달성하기 위한 라우팅 구성을 살펴보겠습니다.

인증 공급자 제한

이전 섹션에서는 기본적으로 모든 인증 공급자가 사용하도록 설정되었습니다. 구성에서 라우팅 규칙을 추가하여 이를 변경할 수 있습니다.

예를 들어 GitHub 공급자를 통한 로그인을 사용하지 않으려면 staticwebapp.config.json 파일에 다음과 같은 회람 규칙을 추가할 수 있습니다.

{
  "routes": [
    {
      "route": "/.auth/login/github",
      "statusCode": 404
    }
  ]
}

GitHub 공급자로 인증하는 데 사용되는 경로 /.auth/login/github404(찾을 수 없음) 오류를 반환하도록 강제 적용하면 사용자는 액세스할 수 없습니다. 경로 규칙은 원하는 만큼 추가하여 모든 원하지 않는 공급자를 사용하지 않도록 설정할 수 있습니다.

역할을 사용하여 경로 보호

기본적으로 모든 사용자가 경로에 제한 없이 액세스할 수 있습니다. 규칙의 allowedRoles 배열에 하나 이상의 역할 이름을 추가하여 경로를 보호할 수 있습니다. 기본적으로 모든 사용자는 기본 제공 anonymous 역할에 속하며 로그인된 모든 사용자는 authenticated 역할의 멤버입니다.

즉, 경로를 인증된 사용자로만 제한하려면 기본 제공 authenticated 역할을 allowedRoles 배열에 추가할 수 있습니다.

{
  "routes": [
    {
      "route": "/profile",
      "allowedRoles": ["authenticated"]
    }
  ]
}

이 구성을 사용하는 경우 인증되지 않은 사용자가 /profile 경로에 액세스하려고 하면 401(권한 없음) 오류가 반환됩니다.

다음과 같이 지정된 경로에 대해 특정 HTTP 메서드를 제한할 수도 있습니다.

{
  "routes": [
    {
      "route": "/profile",
      "methods": ["PUT", "POST", "DELETE"],
      "allowedRoles": ["authenticated"]
    }
  ]
}

이 예제에서는 모든 사용자가 /profile 경로에서 GET 메서드에 액세스할 수 있으나 인증된 사용자만 PUT, POST 또는 DELETE를 사용할 수 있습니다.

와일드카드 사용

경로 끝에 와일드 카드를 사용하여 기본 패턴을 따르는 모든 경로를 찾을 수 있습니다. 예를 들어 /api로 시작하는 모든 URL을 인증된 사용자로 제한하려면 다음을 작성할 수 있습니다.

{
  "routes": [
    {
      "route": "/api/*",
      "allowedRoles": ["authenticated"]
    }
  ]
}

다음 단계

다음으로 앱에서 액세스 제한을 구현합니다.