샘플 Python Flask 웹 애플리케이션에서 사용자 로그인

이 문서에서는 Microsoft Entra 외부 ID 보호되는 Python Flask 웹앱을 살펴봅니다. 이 샘플에서는 Python Flask 웹앱에 인증하는 고객을 위한 로그인 환경을 안내합니다. 샘플 웹앱은 MSAL Python(Python용 Microsoft 인증 라이브러리)을 사용하여 사용자 인증을 처리합니다.

필수 조건

• Visual Studio Code 또는 다른 코드 편집기
• Python 3 이상.
• 외부 테넌트입니다. 아직 없는 경우 평가판에 등록합니다.

웹앱 등록

애플리케이션에서 Microsoft Entra를 사용하여 사용자를 로그인할 수 있도록 하려면 Microsoft Entra 외부 ID 만든 애플리케이션을 인식해야 합니다. 앱 등록은 앱과 Microsoft Entra 간의 신뢰 관계를 설정합니다. 애플리케이션을 등록하면 외부 ID는 인증 요청을 만들 때 앱을 식별하는 데 사용되는 값인 애플리케이션(클라이언트) ID라는 고유 식별자를 만듭니다.

다음 단계에서는 Microsoft Entra 관리 센터에 앱을 등록하는 방법을 보여 줍니다.

1. 최소한 애플리케이션 개발자 자격으로 Microsoft Entra 관리 센터에 로그인합니다.

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

3. ID>애플리케이션>앱 등록으로 이동합니다.

4. + 새 등록을 선택합니다.

5. 애플리케이션 등록 페이지가 표시됩니다.

   1. 앱 사용자에게 표시될 의미 있는 애플리케이션 이름을 입력합니다(예: ciam-client-app).
   2. 지원되는 계정 유형에서 이 조직 디렉터리의 계정만을 선택합니다.

6. 등록을 선택합니다.

7. 성공적으로 등록되면 애플리케이션의 개요 창이 표시됩니다. 애플리케이션 소스 코드에 사용할 애플리케이션(클라이언트) ID를 기록해 둡니다.

앱 등록에 앱 형식을 지정하려면 다음 단계를 수행합니다.

1. 관리에서 인증을 선택합니다.
2. 플랫폼 구성 페이지에서 플랫폼 추가를 선택한 다음 웹 옵션을 선택합니다.
3. 리디렉션 URL에 http://localhost:3000/getAToken를 입력합니다. 이 리디렉션 URI는 권한 부여 서버가 액세스 토큰을 보내는 위치입니다. 사용 사례에 맞게 사용자 지정할 수 있습니다.
4. 변경 내용을 저장하려면 구성을 선택합니다.

앱 클라이언트 암호 추가

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

1. 앱 등록 페이지에서 만든 애플리케이션(예: ciam-client-app)을 선택하여 개요 페이지를 엽니다.
2. 관리에서 인증서 및 비밀을 선택합니다.
3. 새 클라이언트 비밀을 선택합니다.
4. 설명 상자에 클라이언트 암호에 대한 설명을 입력합니다(예: ciam 앱 클라이언트 암호).
5. 만료에서 조직의 보안 규칙에 따라 비밀이 유효한 기간을 선택한 다음 추가를 선택합니다.
6. 비밀의 값을 기록합니다. 이후 단계에서 구성에 이 값을 사용합니다. 인증서 및 비밀에서 벗어나면 비밀 값이 다시 표시되지 않으며 어떤 수단으로도 검색할 수 없습니다. 기록해야 합니다.

API 권한 부여

이 앱은 사용자를 로그인하므로 위임된 권한을 추가합니다.

1. 앱 등록 페이지에서 만든 애플리케이션(예: ciam-client-app)을 선택하여 개요 페이지를 엽니다.

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

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

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

5. 일반적으로 사용되는 Microsoft API 섹션에서 Microsoft Graph를 선택합니다.

6. 위임된 권한 옵션을 선택합니다.

7. 권한 선택 섹션에서 openid 및 offline_access 권한을 모두 검색하여 선택합니다.

8. 사용 권한 추가 단추를 선택합니다.

9. 이제 권한이 올바르게 할당되었습니다. 그러나 테넌트는 고객의 테넌트이므로 소비자 사용자 자신은 이러한 권한에 동의할 수 없습니다. 관리자로서 귀하가 테넌트의 모든 사용자를 대신하여 다음 권한에 동의해야 합니다.

   1. <테넌트 이름>에 대한 관리자 동의 부여를 선택한 다음 예를 선택합니다.
   2. 새로 고침을 선택한 다음 두 범위에 대해 <테넌트 이름>에 부여됨이 상태 아래에 표시되는지 확인합니다.

사용자 흐름 만들기

다음 단계에 따라 고객이 애플리케이션에 로그인하거나 등록하는 데 사용할 수 있는 사용자 흐름을 만듭니다.

1. 최소한 외부 ID 사용자 흐름 관리자로 Microsoft Entra 관리 센터에 로그인합니다.

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

3. ID>External Identities>사용자 흐름으로 이동합니다.

4. +새 사용자 흐름을 선택합니다.

5. 만들기 페이지에서:

   1. SignInSignUpSample과 같은 사용자 흐름에 사용할 이름을 입력합니다.

   2. ID 공급자 목록에서 이메일 계정을 선택합니다. 이 ID 공급자를 사용하면 사용자가 이메일 주소를 사용하여 로그인하거나 등록할 수 있습니다.

      참고 항목

      추가 ID 공급자는 페더레이션을 설정한 후에만 여기에 나열됩니다. 예를 들어 Google 또는 Facebook과의 페더레이션을 설정하는 경우 여기에서 해당 추가 ID 공급자를 선택할 수 있습니다.

   3. 이메일 계정에서 두 가지 옵션 중 하나를 선택할 수 있습니다. 이 자습서에서는 암호가 있는 이메일을 선택합니다.

      • 암호가 있는 이메일: 새 사용자가 이메일 주소를 로그인 이름으로 사용하고 암호를 첫 번째 자격 증명으로 사용하여 등록하고 로그인할 수 있습니다.
      • 이메일 일회용 암호: 새 사용자는 이메일 주소를 로그인 이름으로 사용하고 이메일 일회용 암호를 첫 번째 자격 증명으로 사용하여 등록하고 로그인할 수 있습니다. 이 옵션을 사용자 흐름 수준에서 사용할 수 있도록 하려면 테넌트 수준(모든 ID 공급자>이메일 일회용 암호)에서 이메일 일회용 암호를 사용하도록 설정해야 합니다.

   4. 사용자 특성에서 등록 시 사용자로부터 수집할 특성을 선택합니다. 자세히 보기를 선택하여 국가/지역, 표시 이름 및 우편 번호의 특성 및 클레임을 선택할 수 있습니다. 확인을 선택합니다. (사용자가 처음으로 등록할 때만 특성을 묻는 메시지가 표시됩니다.)

6. 만들기를 실행합니다. 사용자 흐름 목록에 새 사용자 흐름이 표시됩니다. 필요한 경우 페이지를 새로 고칩니다.

셀프 서비스 암호 재설정을 사용하도록 설정하려면 셀프 서비스 암호 재설정 사용 문서의 단계를 사용합니다.

웹 애플리케이션을 사용자 흐름과 연결

많은 애플리케이션을 사용자 흐름과 연결할 수 있지만 단일 애플리케이션은 하나의 사용자 흐름에만 연결할 수 있습니다. 사용자 흐름을 사용하면 특정 애플리케이션에 대한 사용자 환경을 구성할 수 있습니다. 예를 들어 사용자가 전자 메일 주소로 로그인하거나 등록해야 하는 사용자 흐름을 구성할 수 있습니다.

1. 사이드바 메뉴에서 ID를 선택합니다.

2. External Identities를 선택한 다음 사용자 흐름을 선택합니다.

3. 사용자 흐름 페이지에서 이전에 만든 사용자 흐름 이름(예: SignInSignUpSample)을 선택합니다.

4. 사용에서 애플리케이션을 선택합니다.

5. 애플리케이션 추가를 선택합니다.

6. ciam-client-app과 같은 목록에서 애플리케이션을 선택하거나 검색 상자를 사용하여 애플리케이션을 찾은 다음 선택합니다.

7. 선택을 선택합니다.

샘플 웹 애플리케이션 복제 또는 다운로드

샘플 애플리케이션을 가져오려면 GitHub에서 복제하거나 .zip 파일로 다운로드할 수 있습니다.

• 샘플을 복제하려면 명령 프롬프트를 열고 프로젝트를 만들려는 위치로 이동한 후 다음 명령을 입력합니다.

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

• .zip 파일을 다운로드합니다. 이름 길이가 260자 미만인 파일 경로에 추출합니다.

프로젝트 종속성 설치

1. 콘솔 창을 열고 Flask 샘플 웹앱이 포함된 디렉터리로 변경합니다.

   cd flask-web-app
   

2. 가상 환경 설정

   Windows

   py -m venv .venv
   .venv\scripts\activate
   

   macOS/Linux

   python3 -m venv .venv
   source .venv/bin/activate
   

3. 다음 명령을 실행하여 종속성을 설치합니다.

   python3 -m pip install -r requirements.txt
   

샘플 웹앱 구성

1. Visual Studio Code 또는 사용 중인 편집기에서 프로젝트 파일을 엽니다.

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

3. .env 파일에서 다음 환경 변수를 제공합니다.

   • CLIENT_ID 앞에서 등록한 앱의 애플리케이션(클라이언트) ID입니다.
   • CLIENT_SECRET 앞에서 복사한 앱 비밀 값입니다.
   • AUTHORITY 토큰 기관을 식별하는 URL입니다. {subdo기본}.ciamlogin.com/{subdo기본}.onmicrosoft.com 형식이어야 https://. 하위 기본 디렉터리(테넌트) 하위 기본 바꿉니다. 예를 들어, 테넌트 기본 도메인이 contoso.onmicrosoft.com인 경우 contoso를 사용합니다. 테넌트 하위 기본 없는 경우 테넌트 세부 정보를 읽는 방법을 알아봅니다.

4. 리디렉션 URI가 잘 구성되어 있는지 확인합니다. 이전에 등록한 리디렉션 URI는 구성과 일치해야 합니다. 이 샘플은 기본적으로 리디렉션 URI 경로를 /getAToken.로 설정합니다. app_config.py 파일에서 REDIRECT_PATH 구성됩니다.

샘플 웹앱과 API 실행 및 테스트

앱을 실행하여 플레이 중인 로그인 환경을 확인합니다.

참고 항목

이 샘플에서는 Python ID 타사 라이브러리를 사용합니다. 라이브러리는 Microsoft에서 공식적으로 기본 없지만 사용하는 것이 좋습니다. 이 라이브러리를 사용하면 많은 MSAL Python 세부 정보를 추상화하므로 웹앱에 인증을 더 쉽게 추가할 수 있습니다.

1. 터미널에서 다음 명령을 실행합니다.

   python3 -m flask run --debug --host=localhost --port=3000
   

   선택한 포트를 사용할 수 있습니다. 이는 이전에 등록한 리디렉션 URI의 포트와 유사해야 합니다.

2. 브라우저를 연 다음 http://localhost:3000으로 이동합니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다.

   

3. 페이지 로드가 완료되면 로그인 링크를 선택합니다. 로그인하라는 메시지가 나타납니다.

4. 로그인 페이지에서 이메일 주소를 입력하고, 다음을 선택하고, 암호를 입력한 다음, 로그인을 선택합니다. 계정이 없는 경우 등록 흐름을 시작하는 계정이 없으신가요? 만들기 링크를 선택합니다.

5. 등록 옵션을 선택하는 경우 Sign-uo 흐름을 진행합니다. 전자 메일, 일회성 암호, 새 암호 및 더 많은 계정 세부 정보를 입력하여 전체 등록 흐름을 완료합니다.

6. 로그인하거나 등록하면 웹앱으로 다시 리디렉션됩니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다.

   

7. 로그아웃을 선택하여 웹앱에서 사용자를 로그아웃하거나 다운스트림 API 호출을 선택하여 Microsoft Graph 엔드포인트를 호출합니다.

작동 방식

사용자가 로그인 링크를 선택하면 앱이 인증 요청을 시작하고 사용자를 Microsoft Entra 외부 ID 리디렉션합니다. 그러면 사용자가 표시되는 페이지에 로그인하거나 페이지에 등록합니다. 필요한 자격 증명을 제공하고 필요한 범위에 동의한 후 Microsoft Entra 외부 ID 권한 부여 코드를 사용하여 사용자를 웹앱으로 다시 리디렉션합니다. 그런 다음 웹앱은 이 권한 부여 코드를 사용하여 Microsoft Entra 외부 ID 토큰을 획득합니다.

사용자가 로그아웃 링크를 선택하면 앱이 해당 세션을 지우고 사용자가 로그아웃 엔드포인트를 Microsoft Entra 외부 ID 사용자가 로그아웃했음을 알리도록 리디렉션합니다. 그러면 사용자가 웹앱으로 다시 리디렉션됩니다.

관련 콘텐츠

• 샘플 Django 웹 애플리케이션에서 사용자 로그인
• 암호 재설정 사용
• 기본 브랜딩 사용자 지정
• Google에서 로그인 구성