다음을 통해 공유

Azure AD B2C를 사용하여 Azure Web App에서 인증 구성

  • 아티클

이 문서에서는 Azure Web App에 Azure Active Directory B2C(Azure AD B2C) 인증 기능을 추가하는 방법을 설명합니다. 자세한 내용은 OpenID Connect 공급자를 사용하여 로그인하도록 App Service 또는 Azure Functions 앱 구성 문서를 확인합니다.

개요

OIDC(OpenID Connect)는 OAuth 2.0을 기반으로 하는 인증 프로토콜입니다. OIDC를 사용하여 Azure Web App에 사용자를 안전하게 로그인합니다. 로그인 흐름에 포함되는 단계는 다음과 같습니다.

  1. 사용자는 Azure Web App으로 이동하여 로그인을 선택합니다.
  2. Azure Web App은 인증 요청을 시작하고 사용자를 Azure AD B2C로 리디렉션합니다.
  3. 사용자가 등록하거나 로그인 하고 암호를 다시 설정합니다. 또는 소셜 계정으로 로그인할 수 있습니다.
  4. 사용자가 성공적으로 로그인하면 Azure AD B2C는 Azure Web App에 ID 토큰을 반환합니다.
  5. Azure Web App은 ID 토큰의 유효성을 검사하고 클레임을 읽고 사용자에게 보안 페이지를 반환합니다.

ID 토큰이 만료되거나 앱 세션이 무효화되면 Azure Web App은 새 인증 요청을 시작하고 사용자를 Azure AD B2C로 리디렉션합니다. Azure AD B2C SSO 세션이 활성화된 경우 Azure AD B2C에서 사용자에게 다시 로그인하라는 메시지를 표시하지 않고 액세스 토큰을 발급합니다. Azure AD B2C 세션이 만료되거나 유효하지 않은 경우 사용자에게 다시 로그인하라는 메시지가 표시됩니다.

필수 조건

  • 아직 앱을 만들지 않았다면 지침에 따라 Azure Web App을 만듭니다.

1단계: 사용자 흐름 구성

사용자가 앱에 로그인하려고 하면 앱은 사용자 흐름을 통해 권한 부여 엔드포인트에 대한 인증 요청을 시작합니다. 사용자 흐름은 사용자 환경을 정의하고 제어합니다. 사용자가 사용자 흐름을 완료한 후 Azure AD B2C는 토큰을 생성한 다음 사용자를 애플리케이션으로 다시 리디렉션합니다.

아직 없는 경우 사용자 흐름 또는 사용자 지정 정책을 만듭니다. 다음과 같이 3개의 개별 사용자 흐름을 만드는 단계를 반복합니다.

  • 결합된 로그인 및 등록 사용자 흐름(예: susi). 이 사용자 흐름은 암호를 잊으셨나요? 환경도 지원합니다.
  • 프로필 편집 사용자 흐름(예: edit_profile).
  • 암호 재설정 사용자 흐름(예: reset_password).

Azure AD B2C는 사용자 흐름 이름 앞에 B2C_1_를 추가합니다. 예를 들어 susi은 B2C_1_susi이 됩니다.

2단계: 웹 애플리케이션 등록

애플리케이션이 Azure AD B2C로 로그인할 수 있도록 하려면 Azure AD B2C 디렉터리에 앱을 등록합니다. 앱을 등록하면 앱과 Azure AD B2C 간에 트러스트 관계가 설정됩니다.

앱을 등록하는 동안 리디렉션 URI를 지정합니다. 리디렉션 URI는 사용자가 Azure AD B2C로 인증하면 Azure AD B2C에 의해 리디렉션되는 엔드포인트입니다. 앱 등록 프로세스는 앱을 고유하게 식별하는 애플리케이션 ID(클라이언트 ID라고도 함)를 생성합니다. 앱이 등록되면 Azure AD B2C는 애플리케이션 ID와 리디렉션 URI를 모두 사용하여 인증 요청을 만듭니다. 또한 앱이 토큰을 안전하게 획득하는 데 사용하는 클라이언트 비밀을 만듭니다.

2.1단계: 앱 등록

애플리케이션을 등록하려면 다음 단계를 수행합니다.

  1. Azure Portal에 로그인합니다.

  2. 여러 테넌트에 액세스할 수 있는 경우 맨 위 메뉴에서 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Azure AD B2C 테넌트로 전환합니다.

  3. Azure Portal에서 Azure AD B2C를 검색하고 선택합니다.

  4. 앱 등록을 선택한 다음, 새 등록을 선택합니다.

  5. 이름에서 애플리케이션의 이름을 입력합니다(예: My Azure 웹앱).

  6. 지원되는 계정 유형 아래에서 모든 ID 공급자 또는 조직 디렉터리의 계정(사용자 흐름에서 사용자를 인증하는 용도) 을 선택합니다.

  7. 리디렉션 URI에서 웹을 선택한 다음 URL 상자에 https://<YOUR_SITE>/.auth/login/aadb2c/callback를 입력합니다. <YOUR_SITE>를 Azure Web App 이름으로 바꿉니다. 예: https://contoso.azurewebsites.net/.auth/login/aadb2c/callback Azure Web App의 사용자 지정 도메인을 구성한 경우 리디렉션 URI의 사용자 지정 도메인을 사용합니다. 예를 들어 https://www.contoso.com/.auth/login/aadb2c/callback

  8. 사용 권한에서 openid 및 오프라인 액세스 권한 검사 상자에 대한 관리자 동의 부여를 선택합니다.

  9. 등록을 선택합니다.

  10. 개요를 선택합니다.

  11. 웹 애플리케이션을 구성할 때 나중에 사용할 애플리케이션(클라이언트) ID 를 기록합니다.

    Screenshot of the web app Overview page for recording your web application I D.

2.2단계: 클라이언트 암호 만들기

  1. Azure AD B2C - 앱 등록 페이지에서 만든 애플리케이션(예: My Azure 웹앱)을 선택합니다.
  2. 왼쪽 메뉴의 관리에서 인증서 및 비밀을 선택합니다.
  3. 새 클라이언트 비밀을 선택합니다.
  4. 설명 상자에 클라이언트 암호에 대한 설명을 입력합니다. 예: clientsecret1.
  5. 만료에서 암호가 유효한 기간을 선택한 다음 추가를 선택합니다.
  6. 클라이언트 애플리케이션 코드에서 사용할 비밀의 값을 기록합니다. 이 비밀 값은 이 페이지에서 나가면 다시 표시되지 않습니다. 이 값을 애플리케이션의 코드에서 애플리케이션 비밀로 사용합니다.

3단계: Azure 앱 구성

  1. Azure Portal에 로그인합니다.

  2. 여러 테넌트에 액세스할 수 있는 경우 위쪽 메뉴에서 설정 아이콘을 선택하여 디렉터리 + 구독 메뉴에서 Microsoft Entra ID 테넌트로 전환합니다.

  3. Azure Web App으로 이동합니다.

  4. 왼쪽 메뉴에서 인증을 선택합니다. ID 공급자 추가를 선택합니다.

  5. ID 공급자 드롭다운에서 OpenID Connect를 선택합니다.

  6. OpenID 공급자 이름에 aadb2c를 입력합니다.

  7. 메타데이터 항목에 대해 문서 URL을 선택합니다. 그런 다음 문서 URL에 대해 다음 URL을 제공합니다.

    https://<TENANT_NAME>.b2clogin.com/<TENANT_NAME>.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration

    1. <TENANT_NAME>을 Azure AD B2C 테넌트 이름의 첫 번째 부분으로 바꿉니다(예: https://contoso.b2clogin.com/contoso.onmicrosoft.com). 사용자 지정 도메인 구성이 있는 경우 해당 사용자 지정 도메인을 사용할 수 있습니다. 인증 요청 URL에서 B2C 테넌트 이름 contoso.onmicrosoft.com을 테넌트 ID GUID로 바꿉니다. 예를 들어 .로 변경할 https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/https://account.contosobank.co.uk/<tenant ID GUID>/수 있습니다.

    2. <POLICY_NAME>을 사용자 흐름 또는 1단계에서 생성한 사용자 지정 정책으로 바꿉니다.

  8. 클라이언트 ID에 대해 2.1단계의 웹앱(클라이언트) ID를 제공합니다.

  9. 클라이언트 암호에 대해 2.2단계의 웹앱(클라이언트) 비밀을 제공합니다.

    팁

    클라이언트 비밀은 비밀이 안전한 방식으로 저장되도록 앱 설정으로 저장됩니다. Azure Key Vault에서 비밀을 관리하려는 경우 나중에 Key Vault 참조를 사용하도록 해당 설정을 업데이트할 수 있습니다.

  10. 나머지 설정은 기본값으로 유지합니다.

  11. 추가 단추를 눌러 ID 공급자 설정을 완료합니다.

4단계: Azure 웹앱 확인

  1. 브라우저에서 https://<app-name>.azurewebsites.net을 사용하여 Azure Web App으로 이동합니다. <app-name>을 Azure Web App으로 바꿉니다.
  2. 등록 또는 로그인 프로세스를 완료합니다.
  3. 브라우저에서 다음 URL https://<app-name>.azurewebsites.net/.auth/me로 이동하여 로그인한 사용자에 대한 정보를 확인합니다. <app-name>을 Azure Web App으로 바꿉니다.

앱 코드에서 토큰 검색

서버 코드에서 공급자별 토큰이 요청 헤더에 삽입되므로 쉽게 액세스할 수 있습니다. 다음 표에는 가능한 토큰 헤더 이름이 표시됩니다.

헤더 이름 설명
X-MS-CLIENT-PRINCIPAL-NAME 사용자의 표시 이름입니다.
X-MS-CLIENT-PRINCIPAL-ID ID 토큰 하위 클레임입니다.
X-MS-CLIENT-PRINCIPAL-IDP ID 공급자 이름, aadb2c입니다.
X-MS-TOKEN-AADB2C-ID-TOKEN Azure AD B2C에서 발급한 ID 토큰입니다.

다음 단계