연습 - 인증 공급자 및 액세스 구성

4분

쇼핑 목록 웹앱이 일부 경로에 대한 액세스를 보호하고 특정 인증 공급자를 사용하지 않도록 설정해야 합니다. 이 연습에서는 해당 결과를 위해 웹앱의 라우팅 구성을 업데이트합니다.

이 연습에서는 다음 단계를 완료합니다.

라우팅 구성에 규칙을 추가하여 일부 인증 공급자를 사용하지 않도록 설정합니다.
인증된 사용자만 액세스할 수 있도록 제품 목록에 보안을 설정합니다.
업데이트된 앱을 배포합니다.
제한이 유효한지 테스트합니다.

인증 공급자를 사용하지 않도록 설정

Microsoft Entra 인증 공급자를 사용하지 않도록 설정하도록 앱의 라우팅 구성을 업데이트할 예정입니다.

Visual Studio Code에서 프로젝트를 엽니다.

다음 파일을 엽니다.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

JSON 개체의 루트에 다음 라우팅 구성을 추가합니다.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
이 라우팅 규칙을 추가하면 사용자가 Microsoft Entra 인증 공급자에 액세스하는 것을 방지할 수 있습니다.

제품 목록 액세스 보호

다음으로 인증된 사용자만 API에 액세스할 수 있도록 제품 목록을 보호하려고 합니다. 이를 위해 staticwebapp.config.json 구성 파일에 다른 라우팅 규칙을 추가합니다.

다음 규칙을 routes 배열 맨 위에 추가합니다.

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

이제 완료된 staticwebapp.config.json 파일이 다음과 같이 표시됩니다.

{
  "routes": [
    {
      "route": "/api/products/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/.auth/login/aad",
      "statusCode": 404
    }
  ],
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

변경 내용 배포

이 구성의 결과를 테스트하기 전에 앱을 다시 배포합니다.

Visual Studio Code에서 F1 키를 눌러 명령 팔레트를 엽니다.
Git: Commit All을 입력하고 선택합니다.
커밋 메시지로 Secure access을 입력하고 Enter 키를 누릅니다.
F1 키를 눌러 명령 팔레트를 엽니다.
Git: Push를 입력하고 선택한 다음 Enter 키를 누릅니다.

변경 내용을 푸시한 후 빌드 및 배포 프로세스가 실행될 때까지 기다립니다. 그러면 배포된 앱에 변경 내용이 표시됩니다.

새 제한 사항 테스트

앱을 다시 배포한 후 새 제한 사항이 유효한지 테스트할 수 있습니다.

Visual Studio Code 탐색기 창에서 Static Web Apps 섹션으로 돌아가서 my-static-web-app-and-authn를 마우스 오른쪽 단추로 선택한 다음 사이트 찾아보기를 선택하여 브라우저에서 앱을 살펴봅니다.
로그인하지 않은 경우 제품 목록 대신 권한 없음 메시지가 표시됩니다.
인증 공급자 목록에서 Microsoft Entra ID를 선택하여 로그인합니다.

다음과 같은 404 오류 페이지가 표시됩니다.
브라우저의 뒤로 가기 단추를 눌러 앱으로 돌아갑니다.
인증 공급자 목록에서 GitHub를 선택하여 로그인합니다.
메시지가 표시되면 GitHub 자격 증명을 입력한 다음, Azure 동의 페이지에서 동의 부여를 선택합니다.

이제 로그인되었으며 제품 목록이 표시될 것입니다.

다음 단계