Azure AD B2C를 사용하여 샘플 Python 웹앱에서 인증 구성

이 문서에서는 샘플 Python 웹 애플리케이션을 사용하여 Azure AD B2C(Azure Active Directory B2C) 인증을 웹 애플리케이션에 추가하는 방법을 보여 줍니다.

개요

OIDC(OpenID Connect)는 OAuth 2.0을 기반으로 하는 인증 프로토콜입니다. OIDC를 사용하여 애플리케이션에 사용자를 안전하게 로그인할 수 있습니다. 이 웹앱 샘플에서는 Python용 ID 패키지를 사용하여 Python 웹앱에 인증 및 권한 부여 지원을 추가하는 작업을 간소화합니다.

로그인 흐름에 포함되는 단계는 다음과 같습니다.

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

필수 조건

1단계: 사용자 흐름 구성

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

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

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

Azure AD B2C는 사용자 흐름 이름 앞에 B2C_1_를 추가합니다. 예를 들어 susiB2C_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. 이름 아래에 애플리케이션의 이름(예: webapp1)을 입력합니다.

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

  7. 리디렉션 URI에서 을 선택한 다음 URL 상자에 http://localhost:5000/getAToken를 입력합니다.

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

  9. 등록을 선택합니다.

  10. 개요를 선택합니다.

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

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

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

등록된 웹 애플리케이션에 대한 클라이언트 비밀을 만듭니다. 웹 애플리케이션은 토큰을 요청할 때 클라이언트 비밀을 사용하여 ID를 입증합니다.

  1. 관리에서 인증서 및 비밀을 선택합니다.
  2. 새 클라이언트 비밀을 선택합니다.
  3. 설명 상자에 클라이언트 암호에 대한 설명을 입력합니다(예: clientsecret1).
  4. 만료에서 암호가 유효한 기간을 선택한 다음 추가를 선택합니다.
  5. 비밀의 을 기록합니다. 이후 단계에서 구성에 이 값을 사용합니다.

3단계: 웹앱 샘플 가져오기

zip 파일을 다운로드하거나 GitHub에서 샘플 웹 애플리케이션을 복제합니다.

git clone https://github.com/Azure-Samples/ms-identity-python-webapp.git

경로의 총 문자 길이가 260자 이하인 폴더에 샘플 파일을 추출합니다.

4단계: 샘플 웹앱 구성

프로젝트의 루트 디렉터리에서 다음 단계를 따릅니다.

  1. 가이드로 .env 사용하여 .env.sample 프로젝트의 루트 폴더에 파일을 만듭니다.

    FLASK_DEBUG=True
    B2C_TENANT_NAME=<tenant name>
    CLIENT_ID=<client id>
    CLIENT_SECRET=<client secret>
    SIGNUPSIGNIN_USER_FLOW=B2C_1_signupsignin1
    EDITPROFILE_USER_FLOW=B2C_1_profile_editing
    RESETPASSWORD_USER_FLOW=B2C_1_reset_password
    
    B2C_TENANT_NAME Azure AD B2C 테넌트 이름의 첫 번째 부분입니다.(예를 들어 contoso)
    CLIENT_ID 2.1단계의 웹 API 애플리케이션 ID입니다.
    CLIENT_SECRET 2.2단계에서 만든 클라이언트 암호 값입니다.
    *_USER_FLOW 1단계에서 만든 사용자 흐름입니다.

    환경 변수는 app_config.py에서 참조되며 소스 제어에서 제외되도록 별도의 .env 파일에 보관됩니다. 제공된 .gitignore 파일은 .env 파일이 체크 인되는 것을 방지합니다.

5단계: 샘플 웹앱 실행

  1. 콘솔 또는 터미널에서 샘플이 포함된 디렉터리로 전환합니다. 예시:

    cd ms-identity-python-webapp
    
  2. PyPi에서 필요한 패키지를 설치하고 다음 명령을 실행하여 로컬 컴퓨터에서 웹앱을 실행합니다.

    python -m pip install -r requirements.txt
    python -m flask run --host localhost --port 5000
    

    콘솔 창에는 로컬로 실행 중인 애플리케이션의 포트 번호가 표시됩니다.

     * Debug mode: on
       WARNING: This is a development server. Do not use it in a production deployment.
       Use a production WSGI server instead.
     * Running on `http://localhost:5000/` (Press CTRL+C to quit)
    
  3. 로컬 컴퓨터에서 실행되는 웹 애플리케이션을 보려면 .로 http://localhost:5000이동합니다.

  4. 로그인을 선택합니다.

    Screenshot showing the sign-in flow.

  5. 등록 또는 로그인 프로세스를 완료합니다.

  6. 성공적으로 인증되면 다음과 같이 표시 이름이 표시됩니다.

    Screenshot showing the web app token's display name claim.

6단계: 웹 API 호출

앱이 Azure AD B2C로 로그인하고 웹 API를 호출할 수 있도록 하려면 Azure AD B2C 디렉터리에 두 개의 애플리케이션을 등록해야 합니다.

  • 2단계에서 이미 만든 웹 애플리케이션(Python) 등록입니다. 이 앱 등록을 사용하면 앱이 Azure AD B2C로 로그인할 수 있습니다. 앱 등록 프로세스는 앱을 고유하게 식별하는 애플리케이션 ID(클라이언트 ID라고도 함)를 생성합니다. 예를 들어 앱 ID: 1.

  • 웹 API 등록을 사용하면 앱이 보호된 웹 API를 호출할 수 있습니다. 등록은 웹 API 권한(범위)을 노출합니다. 앱 등록 프로세스는 웹 API(예: 앱 ID: 2)를 고유하게 식별하는 애플리케이션 ID를 생성합니다. 웹 API 범위(앱 ID: 2)에 앱(앱 ID: 1) 권한을 부여합니다.

앱 등록 및 애플리케이션 아키텍처는 다음 다이어그램에 설명되어 있습니다.

Diagram describing a web app with web API, registrations, and tokens.

인증이 완료되면 사용자는 보호된 웹 API를 호출하는 앱과 상호 작용합니다. 웹 API는 전달자 토큰 인증을 사용합니다. 전달자 토큰은 앱이 Azure AD B2C에서 가져온 액세스 토큰입니다. 앱은 HTTPS 요청의 인증 헤더에 토큰을 전달합니다.

Authorization: Bearer <access token>

액세스 토큰의 범위가 웹 API의 범위와 일치하지 않는 경우 인증 라이브러리는 올바른 범위의 새 액세스 토큰을 얻게 됩니다.

6.1단계: 웹 API 앱 등록

웹 API 앱 등록(앱 ID: 2)을 만들려면 다음 단계를 수행합니다.

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

  2. Azure AD B2C 테넌트가 포함된 디렉터리를 사용하고 있는지 확인합니다. 포털 도구 모음에서 디렉터리 + 구독 아이콘을 선택합니다.

  3. 포털 설정 | 디렉터리 + 구독 페이지의 디렉터리 이름 목록에서 Azure AD B2C 디렉터리를 찾은 다음, 전환을 선택합니다.

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

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

  6. 이름으로 애플리케이션의 이름(예: my-api1)을 입력합니다. 리디렉션 URI지원되는 계정 유형의 기본값은 그대로 둡니다.

  7. 등록을 선택합니다.

  8. 앱 등록이 완료되면 개요를 선택합니다.

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

    Screenshot that demonstrates how to get a web A P I application I D.

6.2단계: 범위 구성

  1. 사용자가 만든 my-api1 애플리케이션(앱 ID: 2)을 선택하여 개요 페이지를 엽니다.

  2. 관리에서 API 표시를 선택합니다.

  3. 애플리케이션 ID URI 옆에 있는 설정 링크를 선택합니다. 기본값(GUID)을 고유한 이름(예: tasks-api)으로 바꾼 다음, 저장을 선택합니다.

    웹 애플리케이션이 웹 API에 대한 액세스 토큰을 요청하는 경우 이 URI를 API에 대해 정의하는 각 범위에 대한 접두사로 추가해야 합니다.

  4. 이 API에서 정의한 범위에서 범위 추가를 선택합니다.

  5. API에 대한 읽기 액세스를 정의하는 범위를 만들려면 다음을 수행합니다.

    1. 범위 이름에 tasks.read를 입력합니다.
    2. 관리 동의 표시 이름을 보려면 작업 API에 대한 읽기 액세스를 입력합니다.
    3. 관리 동의 설명을 보려면 작업 API에 대한 읽기 허용 액세스를 입력합니다.
  6. 범위 추가를 선택합니다.

  7. 범위 추가를 선택한 다음, API에 대한 쓰기 액세스를 정의하는 범위를 추가합니다.

    1. 범위 이름으로 tasks.write를 입력합니다.
    2. 관리자 동의 표시 이름으로 작업 API에 대한 쓰기 권한을 입력합니다.
    3. 관리 동의 설명을 보려면 작업 API에 대한 쓰기 허용 액세스를 입력합니다.
  8. 범위 추가를 선택합니다.

6.3단계: 웹앱 사용 권한 부여

앱(앱 ID: 1) 권한을 부여하려면 다음 단계를 수행합니다.

  1. 앱 등록 선택한 다음, 만든 앱(앱 ID: 1)을 선택합니다.

  2. 관리 아래에서 API 권한을 선택합니다.

  3. 구성된 사용 권한 아래에서 권한 추가를 선택합니다.

  4. 내 API 탭을 선택합니다.

  5. 웹 애플리케이션에 액세스 권한을 부여해야 하는 API(앱 ID: 2)를 선택합니다. 예를 들어 my-api1을 입력합니다.

  6. 사용 권한에서 작업을 확장한 다음 이전에 정의한 범위(예: tasks.readtasks.write)를 선택합니다.

  7. 권한 추가를 선택합니다.

  8. <테넌트 이름에 대한 관리자 동의 부여>를 선택합니다.

  9. 를 선택합니다.

  10. 새로 고침을 선택한 다음, 두 범위 모두 상태...에 대해 허용됨이 표시되는지 확인합니다.

  11. 구성된 사용 권한 목록에서 범위를 선택한 다음 범위 전체 이름을 복사합니다.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

6.4단계: 웹 API 구성

이 샘플은 웹앱이 웹 API에 사용할 수 있는 관련 범위를 사용하여 액세스 토큰을 획득합니다. 이 샘플 자체는 웹 API 역할을 하지 않습니다. 대신 기존 웹 API를 사용하거나 새 웹 API를 만들어야 합니다. B2C 테넌트에서 웹 API를 만드는 방법에 대한 자습서는 Azure AD B2C를 사용하여 사용자 고유의 웹 API에서 인증 사용을 참조하세요.

6.5단계: 웹 API를 사용하여 샘플 앱 구성

app_config.py 파일을 엽니다. 이 파일에는 Azure AD B2C ID 공급자에 대한 정보가 포함되어 있습니다. 앱 설정의 다음 속성을 업데이트합니다.

ENDPOINT 웹 API의 URI(예: https://localhost:6000/hello)입니다.
SCOPE 만든 웹 API 범위 (예: ["https://contoso.onmicrosoft.com/tasks-api/tasks.read", https://contoso.onmicrosoft.com/tasks-api/tasks.write"])입니다.

6.6단계: 샘플 앱 실행

  1. 콘솔 또는 터미널에서 샘플이 포함된 디렉터리로 전환합니다.

  2. 앱이 아직 실행되고 있지 않으면 5단계의 명령을 사용하여 다시 시작합니다.

  3. 다운스트림 API 호출을 선택합니다.

    Screenshot showing how to call a web API.

7단계: 애플리케이션 배포

프로덕션 애플리케이션에서 앱 등록 리디렉션 URI는 일반적으로 앱이 실행되는 공개적으로 액세스할 수 있는 엔드포인트입니다(예: https://contoso.com/getAToken.).

언제든지 등록된 애플리케이션에서 리디렉션 URI를 추가하고 수정할 수 있습니다. 리디렉션 URI에는 다음 제한 사항이 적용됩니다.

  • 리디렉션 URL은 스키마 https로 시작해야 합니다.
  • 리디렉션 URL은 대/소문자를 구분합니다. 해당 사례는 실행 중인 애플리케이션의 URL 경로에 대한 대/소문자와 일치해야 합니다.

다음 단계

  • Azure AD B2C사용하여 Python 웹앱에서 인증 옵션을 구성하는 방법을 알아봅니다.