빠른 시작: 샘플 웹앱에서 사용자 로그인

이 빠른 시작에서는 샘플 웹앱을 사용하여 사용자를 로그인하고 직원 테넌트에서 Microsoft Graph API를 호출하는 방법을 보여 줍니다. 샘플 앱은 Microsoft 인증 라이브러리 사용하여 인증을 처리합니다.

시작하기 전에 이 페이지의 맨 위에 있는 테넌트 유형 선택기를 선택하여 테넌트 유형을 선택합니다. Microsoft Entra ID는 두 가지 테넌트 구성, 직원 및 외부을 제공합니다. 직원 테넌트 구성은 직원, 내부 앱 및 기타 조직 리소스를 위한 것입니다. 외부 테넌트는 고객용 앱용입니다.

필수 구성 요소

• 활성 구독이 있는 Azure 계정입니다. 없는 경우 무료 계정을 생성하십시오.
• 이 Azure 계정에는 애플리케이션을 관리할 수 있는 권한이 있어야 합니다. 다음 Microsoft Entra 역할에는 필요한 권한이 포함됩니다.
  • 애플리케이션 관리자
  • 애플리케이션 개발자
  • 클라우드 애플리케이션 관리자
• 인력 임차인입니다. 기본 디렉터리를 사용하거나 새 테넌트을(를) 설정할 수 있습니다.
• Visual Studio Code 또는 다른 코드 편집기.

노드

• 다음 구성을 사용하여 Microsoft Entra 관리 센터 새 앱을 등록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: http://localhost:3000/auth/redirect
  • 프런트채널 로그아웃 URL: https://localhost:5001/signout-callback-oidc
• Node.js

ASP.NET Core

• 다음 구성을 사용하여 Microsoft Entra 관리 센터 새 앱을 등록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: https://localhost:5001/signin-oidc
  • 프런트채널 로그아웃 URL: https://localhost:5001/signout-callback-oidc
• .NET 8.0 SDK 최소 요구 사항

Python Flask

• 다음 구성을 사용하여 Microsoft Entra 관리 센터 새 앱을 등록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: http://localhost:5000/getAToken
• Python 3 +

앱 클라이언트 암호 또는 인증서 추가

노드

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

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

ASP.NET Core

웹앱에 인증서 자격 증명을 사용하려면 인증서를 만든 다음 업로드해야 합니다. 테스트를 위해 자체 서명된 인증서를 사용할 수 있습니다. 다음 단계를 사용하여 자체 서명된 인증서를 만들고 업로드합니다.

1. 터미널을 사용하여 원하는 디렉터리로 이동한 다음, 다음 명령을 사용하여 자체 서명된 인증서를 만듭니다.

   dotnet dev-certs https -ep ./certificate.crt --trust
   

2. Microsoft Entra 관리 센터로 돌아가서, 관리아래의 인증서 & 시크릿>항목에서인증서 업로드를 선택합니다.

3. 인증서(0) 탭을 선택한 다음, 인증서업로드를 선택합니다.

4. 인증서 업로드 창이 나타납니다. 아이콘을 사용하여 이전 단계에서 만든 인증서 파일로 이동하고 열기을 선택합니다.

5. 인증서에 대한 설명(예: aspnet-web-app 인증서)을 입력하고 추가를 선택합니다.

6. 다음 단계에서 사용할 지문 값을 기록합니다.

Python Flask

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

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

기밀 클라이언트 애플리케이션에 대한 자격 증명을 만드는 경우:

• 애플리케이션을 프로덕션 환경으로 이동하기 전에 클라이언트 암호 대신 인증서를 사용하는 것이 좋습니다. 인증서를 사용하는 방법에 대한 자세한 내용은 Microsoft ID 플랫폼 애플리케이션 인증 인증서 자격 증명지침을 참조하세요.

• 테스트를 위해 자체 서명된 인증서를 만들고 인증하도록 앱을 구성할 수 있습니다. 그러나 프로덕션 에서는 잘 알려진 인증 기관에서 서명된 인증서를 구입한 후, Azure Key Vault 를 사용해 인증서 액세스 및 수명을 관리해야 합니다.

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

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

노드

• .zip 파일다운로드한 다음 이름 길이가 260자 미만인 파일 경로로 추출하거나 리포지토리를 복제합니다.

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

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

ASP.NET Core

• .zip 파일다운로드한 다음 이름 길이가 260자 미만인 파일 경로로 추출하거나 리포지토리를 복제합니다.

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

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

Python Flask

• Python 코드 샘플 다운로드한 다음, 이름 길이가 260자 미만인 파일 경로로 추출하거나 리포지토리를 복제합니다.

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

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

샘플 웹앱 구성

샘플 앱으로 사용자를 로그인하려면 앱 및 테넌트 세부 정보로 업데이트해야 합니다.

노드

ms-identity-node 폴더에서 App/.env 파일을 연 다음 자리 표시자를 바꿉다.

변수	설명	예제
Enter_the_Cloud_Instance_Id_Here	애플리케이션이 등록된 Azure 클라우드 인스턴스	https://login.microsoftonline.com/(끝에 슬래시 포함)
Enter_the_Tenant_Info_here	테넌트 ID 또는 주 도메인	contoso.microsoft.com 또는 aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here	등록한 애플리케이션의 클라이언트 ID	00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here	등록한 애플리케이션의 클라이언트 암호	A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here	앱에서 호출하는 Microsoft Graph API 클라우드 인스턴스	https://graph.microsoft.com/(끝에 슬래시 포함)
Enter_the_Express_Session_Secret_Here	Express 세션 쿠키에 서명하는 데 사용되는 임의의 문자 문자열	A1b-C2d_E3f.H4...

변경한 후 파일은 다음 코드 조각과 유사하게 표시됩니다.

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

ASP.NET Core

1. IDE에서 샘플이 포함된 ms-identity-docs-code-dotnet\web-app-aspnet 프로젝트 폴더를 엽니다.

2. appsettings.json 열고 파일 내용을 다음 코드 조각으로 바꿉니다.

   {
   "AzureAd": {
     "Instance": "https://login.microsoftonline.com/",
     "TenantId": "Enter the tenant ID obtained from the Microsoft Entra admin center",
     "ClientId": "Enter the client ID obtained from the Microsoft Entra admin center",
     "ClientCredentials": [
       {
         "SourceType": "StoreWithThumbprint",
         "CertificateStorePath": "CurrentUser/My",
         "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
       }   
     ],
     "CallbackPath": "/signin-oidc"
   },
     "DownstreamApis": {
       "MicrosoftGraph" :{
         "BaseUrl": "https://graph.microsoft.com/v1.0/",
         "RelativePath": "me",
         "Scopes": [ 
           "user.read" 
         ]
      }
     },
     "Logging": {
       "LogLevel": {
         "Default": "Information",
         "Microsoft.AspNetCore": "Warning"
       }
     },
     "AllowedHosts": "*"
   }
   

   • TenantId - 애플리케이션이 등록된 테넌트 식별자입니다. "등록된 애플리케이션의 개요 페이지에서 이전에 기록된 Directory (tenant) ID으로 따옴표 안의 텍스트를 바꿉니다."
   • ClientId - 클라이언트라고도 하는 애플리케이션의 식별자입니다. 따옴표로 된 텍스트를 등록된 애플리케이션의 개요 페이지에서 이전에 기록된 Application (client) ID 값으로 바꿉니다.
   • ClientCertificates - 자체 서명된 인증서가 애플리케이션의 인증에 사용됩니다. CertificateThumbprint 텍스트를 이전에 기록된 인증서의 지문으로 바꿉니다.

Python Flask

1. IDE에서 다운로드한 애플리케이션을 열고 샘플 앱의 루트 폴더로 이동합니다.

   cd flask-web-app
   

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

   # The following variables are required for the app to run.
   CLIENT_ID=<Enter_your_client_id>
   CLIENT_SECRET=<Enter_your_client_secret>
   AUTHORITY=<Enter_your_authority_url>
   

   • 등록된 애플리케이션의 CLIENT_ID를, 개요 페이지에서 확인할 수 있는 값으로 설정합니다.
   • CLIENT_SECRET 값을 등록된 애플리케이션의 인증서 & 비밀 만든 클라이언트 비밀로 설정합니다.
   • AUTHORITY 값을 https://login.microsoftonline.com/<TENANT_GUID>으로 설정합니다. 디렉터리(테넌트) ID 앱 등록 개요 페이지에서 사용할 수 있습니다.

   환경 변수는 app_config.py참조되며 별도의 .env 파일에 보관되어 소스 제어를 차단합니다. 제공된 .gitignore 파일을 사용하면 .env 파일이 체크 인되지 않습니다.

샘플 웹앱 실행 및 테스트

샘플 앱을 구성했습니다. 계속 실행하고 테스트할 수 있습니다.

노드

1. 서버를 시작하려면 프로젝트 디렉터리 내에서 다음 명령을 실행합니다.

   cd App
   npm install
   npm start
   

2. http://localhost:3000/로 이동하세요.

3. 로그인을 선택해 로그인 프로세스를 시작합니다.

처음 로그인할 때 애플리케이션에서 로그인하고 프로필에 액세스할 수 있도록 동의를 제공하라는 메시지가 표시됩니다. 성공적으로 로그인하면 애플리케이션 홈페이지로 다시 리디렉션됩니다.

앱 작동 방식

샘플은 localhost, 포트 3000에서 웹 서버를 호스트합니다. 웹 브라우저가 이 주소에 액세스하면 앱이 홈페이지를 렌더링합니다. 사용자가 로그인을 선택하면 앱은 MSAL 노드 라이브러리에서 생성된 URL을 통해 브라우저를 Microsoft Entra 로그인 화면으로 리디렉션합니다. 사용자가 동의하면 브라우저는 ID 및 액세스 토큰과 함께 사용자를 애플리케이션 홈페이지로 다시 리디렉션합니다.

ASP.NET Core

1. 프로젝트 디렉터리에서 터미널을 사용하여 다음 명령을 입력합니다.

   cd ms-identity-docs-code-dotnet/web-app-aspnet
   dotnet run
   

2. 터미널에 표시되는 https URL(예: https://localhost:5001)을 복사하여 브라우저에 붙여넣습니다. 프라이빗 또는 시크릿 브라우저 세션을 사용하는 것이 좋습니다.

3. 단계를 수행하고 필요한 세부 정보를 입력하여 Microsoft 계정으로 로그인합니다. 한 번 암호를 보낼 수 있도록 전자 메일 주소를 제공하라는 요청이 있습니다. 메시지가 표시되면 코드를 입력합니다.

4. 애플리케이션은 액세스 권한을 부여한 데이터에 대한 액세스를 유지하고 로그인하여 프로필을 읽을 수 있는 권한을 요청합니다. 을 수락합니다. 다음 스크린샷이 나타납니다. 애플리케이션에 로그인하고 Microsoft Graph API에서 프로필 세부 정보를 보고 있음을 나타냅니다.

   

애플리케이션에서 로그아웃

1. 페이지의 오른쪽 위 모서리에서 로그아웃 링크를 찾아 선택합니다.
2. 로그아웃할 계정을 선택하라는 메시지가 표시됩니다. 로그인하는 데 사용한 계정을 선택합니다.
3. 로그아웃했음을 나타내는 메시지가 나타납니다. 이제 브라우저 창을 닫을 수 있습니다.

Python Flask

1. 앱에 대한 가상 환경을 만듭니다.

   • Windows 의 경우, 다음 명령을 실행합니다.

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

   • macOS/Linux 경우 다음 명령을 실행합니다.

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

2. pip사용하여 요구 사항을 설치합니다.

   pip install -r requirements.txt
   

3. 명령줄에서 앱을 실행합니다. 앱이 이전에 구성한 리디렉션 URI와 동일한 포트에서 실행되고 있는지 확인합니다.

   flask run --debug --host=localhost --port=5000
   

4. 터미널에 표시되는 https URL(예: https://localhost:5000)을 복사하여 브라우저에 붙여넣습니다. 프라이빗 또는 시크릿 브라우저 세션을 사용하는 것이 좋습니다.

5. 단계를 수행하고 필요한 세부 정보를 입력하여 Microsoft 계정으로 로그인합니다. 로그인할 전자 메일 주소와 암호를 입력하라는 요청이 있습니다.

6. 애플리케이션은 스크린샷에 표시된 것처럼 액세스를 허용하는 데이터에 대한 액세스를 유지하고 로그인한 다음 프로필을 읽을 수 있는 권한을 요청합니다. 을 수락합니다.

   필요한 권한에 액세스하기 위해 동의를 요청하는 샘플 앱을 보여 주는

7. 애플리케이션에 성공적으로 로그인했음을 나타내는 다음 스크린샷이 나타납니다.

샘플 앱이 사용자에 성공적으로 로그인한 방법을 보여 주는

앱 작동 방식

다음 다이어그램은 샘플 앱의 작동 방식을 보여 줍니다.

이 빠른 시작에서 생성된 샘플 앱의 작동 방식을 보여 주는

1. 애플리케이션은 identity 패키지 사용하여 Microsoft ID 플랫폼에서 액세스 토큰을 가져옵니다. 이 패키지는 웹앱에서 인증 및 권한 부여를 간소화하기 위해 Python용 MSAL(Microsoft 인증 라이브러리)을 기반으로 빌드됩니다.

2. 이전 단계에서 가져온 액세스 토큰은 Microsoft Graph API를 호출할 때 사용자를 인증하는 전달자 토큰으로 사용됩니다.

관련 콘텐츠

노드

• 사용자를 로그인하고 자습서에서 Microsoft Graph API를 호출하는 Node.js 웹앱을 빌드하는 방법을 알아봅니다. 사용자를 로그인하고 Node.js & Express 웹앱Microsoft Graph용 토큰을 획득합니다.

ASP.NET Core

• 시리즈 자습서: Microsoft 아이덴티티 플랫폼의 애플리케이션 등록을 통해 이 ASP.NET 웹앱을 빌딩하며 배웁니다.
• 빠른 시작 가이드: Microsoft ID 플랫폼을 사용하여 ASP.NET Core 웹 API 보호하기.
• 빠른 시작: ASP.NET 웹 앱을 Azure App Service에 배포하기

Python Flask

• 사용자를 로그인시키고 보호된 웹 API를 호출하는 Python 웹앱을 만드는 방법을 배우는 자습서: 웹앱이 사용자를 로그인시키는.

이 빠른 시작에서는 샘플 웹앱을 사용하여 외부 테넌트에서 사용자를 로그인하는 방법을 보여 줍니다. 샘플 앱은 Microsoft 인증 라이브러리 사용하여 인증을 처리합니다.

시작하기 전에 이 페이지의 맨 위에 있는 테넌트 유형 선택기를 선택하여 테넌트 유형을 선택합니다. Microsoft Entra ID는 두 가지 테넌트 구성, 직원 및 외부을 제공합니다. 직원 테넌트 구성은 직원, 내부 앱 및 기타 조직 리소스를 위한 것입니다. 외부 테넌트는 고객용 앱용입니다.

필수 구성 요소

• 활성 구독이 있는 Azure 계정입니다. 없는 경우 무료 계정을 생성하십시오.
• 이 Azure 계정에는 애플리케이션을 관리할 수 있는 권한이 있어야 합니다. 다음 Microsoft Entra 역할에는 필요한 권한이 포함됩니다.
  • 애플리케이션 관리자
  • 애플리케이션 개발자
  • 클라우드 애플리케이션 관리자
• 외부 테넌트입니다. 만들려면 다음 방법 중에서 선택합니다.
  • Microsoft Entra 외부 ID 확장 사용하여 Visual Studio Code에서 직접 외부 테넌트를 설정합니다. (권장)
  • Microsoft Entra 관리 센터에서 새 외부 테넌트 만듭니다.
• 사용자 흐름입니다. 자세한 내용은 외부 테넌트 앱에 대한 셀프 서비스 등록 사용자 흐름 만들기참조하세요. 이 사용자 흐름은 여러 애플리케이션에 사용할 수 있습니다.
• Visual Studio Code 또는 다른 코드 편집기.

노드

• 다음 구성으로 Microsoft Entra 관리 센터 새 앱을 등록하고 앱 개요 페이지에서 해당 식별자를 기록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: http://localhost:3000/auth/redirect
• 사용자 흐름에 애플리케이션 추가
• Node.js.

ASP.NET Core

• 다음 구성으로 Microsoft Entra 관리 센터 새 앱을 등록하고 앱 개요 페이지에서 해당 식별자를 기록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: https://localhost:7274/signin-oidc
  • 프런트채널 로그아웃 URL: https://localhost:7274/signout-callback-oidc
• 사용자 흐름에 애플리케이션 추가
• 최소 버전의 .NET 8.0 SDK.

Python Django

• 다음 구성으로 Microsoft Entra 관리 센터 새 앱을 등록하고 앱 개요 페이지에서 해당 식별자를 기록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: http://localhost:5000/getAToken
• 사용자 흐름에 애플리케이션 추가
• Python 3+.

Python Flask

• 다음 구성으로 Microsoft Entra 관리 센터 새 앱을 등록하고 앱 개요 페이지에서 해당 식별자를 기록합니다. 자세한 내용은 애플리케이션 등록를 참조하세요.
  • 이름: identity-client-web-app
  • 지원되는 계정 유형: 이 조직 디렉터리의 계정만(단일 테넌트)
  • 플랫폼 구성: 웹
  • 리디렉션 URI: http://localhost:3000/getAToken
• 사용자 흐름에 애플리케이션 추가
• Python 3+

앱 클라이언트 암호 추가

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

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

기밀 클라이언트 애플리케이션에 대한 자격 증명을 만드는 경우:

• 애플리케이션을 프로덕션 환경으로 이동하기 전에 클라이언트 암호 대신 인증서를 사용하는 것이 좋습니다. 인증서를 사용하는 방법에 대한 자세한 내용은 Microsoft ID 플랫폼 애플리케이션 인증 인증서 자격 증명지침을 참조하세요.

• 테스트를 위해 자체 서명된 인증서를 만들고 인증하도록 앱을 구성할 수 있습니다. 그러나 프로덕션 에서는 잘 알려진 인증 기관에서 서명된 인증서를 구입한 후, Azure Key Vault 를 사용해 인증서 액세스 및 수명을 관리해야 합니다.

관리자 동의 부여

애플리케이션을 등록하면 User.Read 권한이 할당됩니다. 그러나 테넌트는 외부 테넌트이므로 고객 사용자 자체는 이 권한에 동의할 수 없습니다. 테넌트 관리자는 테넌트에 있는 모든 사용자를 대신하여 이 권한에 동의해야 합니다.

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

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

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

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

노드

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

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

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• 대신 샘플 파일 .zip을 다운로드한 후, 파일 이름 길이가 260자 미만인 경로에추출합니다.

프로젝트 종속성 설치

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

   cd 1-Authentication\5-sign-in-express\App
   

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

   npm install
   

ASP.NET Core

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

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

  git clone https://github.com/Azure-Samples/ms-identity-ciam-dotnet-tutorial.git
  

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

Python Django

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

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

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

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

프로젝트 종속성 설치

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

   cd django-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
   

Python Flask

샘플 애플리케이션을 가져오려면 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. 코드 편집기에서 App\authConfig.js 파일을 엽니다.

2. 자리 표시자를 찾습니다.

   • Enter_the_Application_Id_Here 이전에 등록한 앱의 애플리케이션(클라이언트) ID로 바꿉니다.
   • Enter_the_Tenant_Subdomain_Here 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 이름이 없는 경우, 테넌트 세부 정보를 읽는 방법을 알아봅니다.
   • Enter_the_Client_Secret_Here 이전에 복사한 앱 비밀 값으로 바꿉니다.

ASP.NET Core

1. ASP.NET Core 샘플 앱이 포함된 루트 디렉터리로 이동합니다.

   cd 1-Authentication\1-sign-in-aspnet-core-mvc
   

2. appsettings.json 파일을 엽니다.

3. 기관에서을 찾고, Enter_the_Tenant_Subdomain_Here을 테넌트의 하위 도메인으로 바꿉니다. 예를 들어, 테넌트 주 도메인이 caseyjensen@onmicrosoft.com인 경우 입력해야 하는 값은 casyjensen입니다.

4. Enter_the_Application_Id_Here 값을 찾아서 Microsoft Entra 관리 센터에 등록한 앱의 애플리케이션 ID(clientId)로 바꿉니다.

5. Enter_the_Client_Secret_Here을(를) 에서 설정한 클라이언트 비밀 값으로 바꾸고, 앱 클라이언트 비밀을(를) 추가하십시오.

Python Django

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

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

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

   1. CLIENT_ID 이전에 등록한 앱의 애플리케이션(클라이언트) ID입니다.
   2. CLIENT_SECRET 이전에 복사한 앱 비밀 값입니다.
   3. AUTHORITY 토큰 기관을 식별하는 URL입니다. 형식이어야 합니다 https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com. 하위 도메인 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 하위 도메인이 없는 경우 테넌트 세부 정보를확인하는 방법을 알아봅니다.
   4. REDIRECT_URI은(는) 이전에 등록한 리디렉션 URI와 유사해야 하며, 당신의 구성과 일치해야 합니다.

Python Flask

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

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

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

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

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

샘플 웹앱 실행 및 테스트

노드

이제 샘플 Node.js 웹앱을 테스트할 수 있습니다. Node.js 서버를 시작하고 http://localhost:3000브라우저를 통해 액세스해야 합니다.

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

   npm start 
   

2. 브라우저를 열고 http://localhost:3000으로 이동하세요. 다음 스크린샷과 유사한 페이지가 표시됩니다.

   

3. 페이지 로드가 완료된 후, 로그인하라는 메시지가 표시될 때 로그인을 선택합니다.

4. 로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나 만들기 링크를 선택하여 가입 절차를 시작하세요.

5. 등록 옵션을 선택하면 전자 메일, 일회용 암호, 새 암호 및 기타 계정 세부 정보를 입력한 후 전체 등록 흐름을 완료합니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다. 로그인 옵션을 선택하면 비슷한 페이지가 표시됩니다.

   

6. 로그아웃 선택하여 웹앱에서 사용자를 로그아웃하거나 ID 토큰 클레임 보기를 선택하여 Microsoft Entra에서 반환된 ID 토큰 클레임을 봅니다.

작동 방식

사용자가 로그인 링크를 선택하면 앱이 인증 요청을 시작하고 사용자를 Microsoft Entra 외부 ID로 리디렉션합니다. 사용자가 성공적으로 로그인하거나 계정을 만들면 표시되는 로그인 또는 등록 페이지에서 Microsoft Entra 외부 ID는 앱에 ID 토큰을 반환합니다. 앱은 ID 토큰의 유효성을 검사하고, 클레임을 읽고, 사용자에게 보안 페이지를 반환합니다.

사용자가 로그아웃 링크를 선택하면 앱은 해당 세션을 지우고 사용자를 Microsoft Entra 외부 ID 로그아웃 엔드포인트로 리디렉션하여 사용자가 로그아웃했음을 알립니다.

실행한 샘플과 유사한 앱을 빌드하고자 한다면 자신의 Node.js 웹 애플리케이션 기사에서 사용자 로그인 단계를 완료하세요.

ASP.NET Core

1. 셸 또는 명령줄에서 다음 명령을 실행합니다.

   dotnet run
   

2. 웹 브라우저를 열고 https://localhost:7274으로 이동하세요.

3. 외부 테넌트에 등록된 계정으로 로그인합니다.

4. 로그인을 완료하면 표시 이름은 다음 스크린샷에 보이는 것처럼 로그아웃 버튼 옆에 표시됩니다.

   

5. 애플리케이션에서 로그아웃하려면 로그아웃 단추를 선택합니다.

Python Django

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

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

   python manage.py runserver localhost:5000                                             
   

   선택한 포트 번호를 사용할 수 있습니다.

2. 브라우저를 열고 http://localhost:5000으로 이동하세요. 다음 스크린샷과 유사한 페이지가 표시됩니다.

   

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

4. 로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나 만들기 링크를 선택하여 가입 절차를 시작하세요.

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

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

   

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

작동 방식

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

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

Python Flask

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

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

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

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

2. 브라우저를 열고 http://localhost:3000으로 이동하세요. 다음 스크린샷과 유사한 페이지가 표시됩니다.

   

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

4. 로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나 만들기 링크를 선택하여 가입 절차를 시작하세요.

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

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

   

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

작동 방식

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

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

관련 콘텐츠

노드

• Node.js 웹 애플리케이션에 사용자 로그인
• 빠른 시작 - 샘플 Node.js 웹앱 사용자 로그인 및 웹 API 호출
• 빠른 시작 - 샘플 Node.js 웹 애플리케이션에서 프로필 편집

ASP.NET Core

• 다단계 자습서 시리즈를 이용해 이 ASP.NET 웹 애플리케이션을 처음부터 빌드하세요.
• 암호 재설정 사용 가능
• 기본 브랜딩 사용자 지정

Python Django

• 샘플 Flask 웹 애플리케이션을 사용하여 사용자 로그인
• 암호 재설정 사용 가능
• 기본 브랜딩 사용자 지정

Python Flask

• 암호 재설정 사용 가능
• 기본 브랜딩 사용자 지정