이 빠른 시작에서는 샘플 웹앱을 사용하여 사용자를 로그인하고 직원 테넌트에서 Microsoft Graph API를 호출하는 방법을 보여 줍니다. 샘플 앱은 Microsoft 인증 라이브러리 사용하여 인증을 처리합니다.
시작하기 전에 이 페이지의 맨 위에 있는 테넌트 유형 선택기를 선택하여 테넌트 유형을 선택합니다. Microsoft Entra ID는 두 가지 테넌트 구성, 직원 및 외부을 제공합니다. 직원 테넌트 구성은 직원, 내부 앱 및 기타 조직 리소스를 위한 것입니다. 외부 테넌트는 고객용 앱용입니다.
IDE에서 샘플이 포함된 ms-identity-docs-code-dotnet\web-app-aspnet 프로젝트 폴더를 엽니다.
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",
"ClientCertificates": [
{
"SourceType": "StoreWithThumbprint",
"CertificateStorePath": "CurrentUser/My",
"CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
}
],
"CallbackPath": "/signin-oidc"
},
"DownstreamApi": {
"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 텍스트를 이전에 기록된 인증서의 지문으로 바꿉니다.
IDE에서 다운로드한 애플리케이션을 열고 샘플 앱의 루트 폴더로 이동합니다.
cd flask-web-app
.env.sample 가이드로 사용하여 프로젝트의 루트 폴더에 .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 파일이 체크 인되지 않습니다.
처음 로그인할 때 애플리케이션에서 로그인하고 프로필에 액세스할 수 있도록 동의를 제공하라는 메시지가 표시됩니다. 성공적으로 로그인하면 애플리케이션 홈페이지로 다시 리디렉션됩니다.
앱 작동 방식
샘플은 localhost, 포트 3000에서 웹 서버를 호스트합니다. 웹 브라우저가 이 주소에 액세스하면 앱이 홈페이지를 렌더링합니다. 사용자가 로그인을 선택하면 앱은 MSAL 노드 라이브러리에서 생성된 URL을 통해 브라우저를 Microsoft Entra 로그인 화면으로 리디렉션합니다. 사용자가 동의하면 브라우저는 ID 및 액세스 토큰과 함께 사용자를 애플리케이션 홈페이지로 다시 리디렉션합니다.
프로젝트 디렉터리에서 터미널을 사용하여 다음 명령을 입력합니다.
dotnet run
터미널에 표시되는 https URL(예: https://localhost:5001)을 복사하여 브라우저에 붙여넣습니다. 프라이빗 또는 시크릿 브라우저 세션을 사용하는 것이 좋습니다.
단계를 수행하고 필요한 세부 정보를 입력하여 Microsoft 계정으로 로그인합니다. 한 번 암호를 보낼 수 있도록 전자 메일 주소를 제공하라는 요청이 있습니다. 메시지가 표시되면 코드를 입력합니다.
애플리케이션은 액세스 권한을 부여한 데이터에 대한 액세스를 유지하고 로그인하여 프로필을 읽을 수 있는 권한을 요청합니다.
을 수락합니다. 다음 스크린샷이 나타납니다. 애플리케이션에 로그인하고 Microsoft Graph API에서 프로필 세부 정보를 보고 있음을 나타냅니다.
애플리케이션에서 로그아웃
페이지의 오른쪽 위 모서리에서 로그아웃 링크를 찾아 선택합니다.
로그아웃할 계정을 선택하라는 메시지가 표시됩니다. 로그인하는 데 사용한 계정을 선택합니다.
로그아웃했음을 나타내는 메시지가 나타납니다. 이제 브라우저 창을 닫을 수 있습니다.
앱에 대한 가상 환경을 만듭니다.
Windows 의 경우, 다음 명령을 실행합니다.
py -m venv .venv
.venv\scripts\activate
macOS/Linux 경우 다음 명령을 실행합니다.
python3 -m venv .venv
source .venv/bin/activate
pip사용하여 요구 사항을 설치합니다.
pip install -r requirements.txt
명령줄에서 앱을 실행합니다. 앱이 이전에 구성한 리디렉션 URI와 동일한 포트에서 실행되고 있는지 확인합니다.
flask run --debug --host=localhost --port=5000
터미널에 표시되는 https URL(예: https://localhost:5000)을 복사하여 브라우저에 붙여넣습니다. 프라이빗 또는 시크릿 브라우저 세션을 사용하는 것이 좋습니다.
단계를 수행하고 필요한 세부 정보를 입력하여 Microsoft 계정으로 로그인합니다. 로그인할 전자 메일 주소와 암호를 입력하라는 요청이 있습니다.
애플리케이션은 스크린샷에 표시된 것처럼 액세스를 허용하는 데이터에 대한 액세스를 유지하고 로그인한 다음 프로필을 읽을 수 있는 권한을 요청합니다.
을 수락합니다.
필요한 권한에 액세스하기 위해 동의를 요청하는 샘플 앱을 보여 주는
애플리케이션에 성공적으로 로그인했음을 나타내는 다음 스크린샷이 나타납니다.
샘플 앱이 사용자에 성공적으로 로그인한 방법을 보여 주는
앱 작동 방식
다음 다이어그램은 샘플 앱의 작동 방식을 보여 줍니다.
이 빠른 시작에서 생성된 샘플 앱의 작동 방식을 보여 주는
애플리케이션은 identity 패키지 사용하여 Microsoft ID 플랫폼에서 액세스 토큰을 가져옵니다. 이 패키지는 웹앱에서 인증 및 권한 부여를 간소화하기 위해 Python용 MSAL(Microsoft 인증 라이브러리)을 기반으로 빌드됩니다.
이전 단계에서 가져온 액세스 토큰은 Microsoft Graph API를 호출할 때 사용자를 인증하는 전달자 토큰으로 사용됩니다.
이 빠른 시작에서는 샘플 웹앱을 사용하여 외부 테넌트에서 사용자를 로그인하는 방법을 보여 줍니다. 샘플 앱은 Microsoft 인증 라이브러리 사용하여 인증을 처리합니다.
시작하기 전에 이 페이지의 맨 위에 있는 테넌트 유형 선택기를 선택하여 테넌트 유형을 선택합니다. Microsoft Entra ID는 두 가지 테넌트 구성, 직원 및 외부을 제공합니다. 직원 테넌트 구성은 직원, 내부 앱 및 기타 조직 리소스를 위한 것입니다. 외부 테넌트는 고객용 앱용입니다.
Enter_the_Application_Id_Here 이전에 등록한 앱의 애플리케이션(클라이언트) ID로 바꿉니다.
Enter_the_Tenant_Subdomain_Here 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 이름이 없는 경우, 테넌트 세부 정보를 읽는 방법을 알아봅니다.
Enter_the_Client_Secret_Here 이전에 복사한 앱 비밀 값으로 바꿉니다.
ASP.NET Core 샘플 앱이 포함된 루트 디렉터리로 이동합니다.
cd 1-Authentication\1-sign-in-aspnet-core-mvc
appsettings.json 파일을 엽니다.
기관에서을 찾고, Enter_the_Tenant_Subdomain_Here을 테넌트의 하위 도메인으로 바꿉니다. 예를 들어, 테넌트 주 도메인이 caseyjensen@onmicrosoft.com인 경우 입력해야 하는 값은 casyjensen입니다.
Enter_the_Application_Id_Here 값을 찾아서 Microsoft Entra 관리 센터에 등록한 앱의 애플리케이션 ID(clientId)로 바꿉니다.
.env.sample 파일을 가이드로 사용하여 프로젝트의 루트 폴더에 .env 파일을 만듭니다.
.env 파일에서 다음 환경 변수를 제공합니다.
CLIENT_ID 이전에 등록한 앱의 애플리케이션(클라이언트) ID입니다.
CLIENT_SECRET 이전에 복사한 앱 비밀 값입니다.
AUTHORITY 토큰 기관을 식별하는 URL입니다.
형식이어야 합니다 https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com.
하위 도메인 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 하위 도메인이 없는 경우 테넌트 세부 정보를확인하는 방법을 알아봅니다.
REDIRECT_URI은(는) 이전에 등록한 리디렉션 URI와 유사해야 하며, 당신의 구성과 일치해야 합니다.
Visual Studio Code 또는 사용 중인 편집기에서 프로젝트 파일을 엽니다.
.env.sample 파일을 가이드로 사용하여 프로젝트의 루트 폴더에 .env 파일을 만듭니다.
.env 파일에서 다음 환경 변수를 제공합니다.
CLIENT_ID 이전에 등록한 앱의 애플리케이션(클라이언트) ID입니다.
CLIENT_SECRET 이전에 복사한 앱 비밀 값입니다.
AUTHORITY 토큰 기관을 식별하는 URL입니다.
형식이어야 합니다 https://{subdomain}.ciamlogin.com/{subdomain}.onmicrosoft.com.
하위 도메인 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어 테넌트 주 도메인이 contoso.onmicrosoft.com경우 contoso사용합니다. 테넌트 하위 도메인이 없는 경우 테넌트 세부 정보를확인하는 방법을 알아봅니다.
리디렉션 URI가 잘 구성되어 있는지 확인합니다. 이전에 등록한 리디렉션 URI는 구성과 일치해야 합니다. 이 샘플은 기본적으로 리디렉션 URI 경로를 /getAToken설정합니다. 이 구성은 app_config.py 파일의 REDIRECT_PATH로 설정되어 있습니다.
이제 샘플 Node.js 웹앱을 테스트할 수 있습니다. Node.js 서버를 시작하고 http://localhost:3000브라우저를 통해 액세스해야 합니다.
터미널에서 다음 명령을 실행합니다.
npm start
브라우저를 열고 http://localhost:3000으로 이동하세요. 다음 스크린샷과 유사한 페이지가 표시됩니다.
페이지 로드가 완료된 후, 로그인하라는 메시지가 표시될 때 로그인을 선택합니다.
로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나 만들기 링크를 선택하여 가입 절차를 시작하세요.
등록 옵션을 선택하면 전자 메일, 일회용 암호, 새 암호 및 기타 계정 세부 정보를 입력한 후 전체 등록 흐름을 완료합니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다. 로그인 옵션을 선택하면 비슷한 페이지가 표시됩니다.
로그아웃 선택하여 웹앱에서 사용자를 로그아웃하거나 ID 토큰 클레임 보기를 선택하여 Microsoft Entra에서 반환된 ID 토큰 클레임을 봅니다.
작동 방식
사용자가 로그인 링크를 선택하면 앱이 인증 요청을 시작하고 사용자를 Microsoft Entra 외부 ID로 리디렉션합니다. 사용자가 성공적으로 로그인하거나 계정을 만들면 표시되는 로그인 또는 등록 페이지에서 Microsoft Entra 외부 ID는 앱에 ID 토큰을 반환합니다. 앱은 ID 토큰의 유효성을 검사하고, 클레임을 읽고, 사용자에게 보안 페이지를 반환합니다.
사용자가 로그아웃 링크를 선택하면 앱은 해당 세션을 지우고 사용자를 Microsoft Entra 외부 ID 로그아웃 엔드포인트로 리디렉션하여 사용자가 로그아웃했음을 알립니다.
실행한 샘플과 유사한 앱을 빌드하고자 한다면 자신의 Node.js 웹 애플리케이션 기사에서 사용자 로그인 단계를 완료하세요.
셸 또는 명령줄에서 다음 명령을 실행합니다.
dotnet run
웹 브라우저를 열고 https://localhost:7274으로 이동하세요.
외부 테넌트에 등록된 계정으로 로그인합니다.
로그인을 완료하면 표시 이름은 다음 스크린샷에 보이는 것처럼 로그아웃 버튼 옆에 표시됩니다.
애플리케이션에서 로그아웃하려면 로그아웃 단추를 선택합니다.
앱을 실행하여 플레이 중인 로그인 환경을 확인합니다.
메모
이 샘플에서는 Python ID 타사 라이브러리사용합니다. 라이브러리는 Microsoft에서 공식적으로 유지 관리하지 않지만 사용하는 것이 좋습니다. 이 라이브러리를 사용하면 많은 MSAL Python 세부 정보를 추상화하므로 웹앱에 인증을 더 쉽게 추가할 수 있습니다.
터미널에서 다음 명령을 실행합니다.
python manage.py runserver localhost:5000
선택한 포트 번호를 사용할 수 있습니다.
브라우저를 열고 http://localhost:5000으로 이동하세요. 다음 스크린샷과 유사한 페이지가 표시됩니다.
페이지 로드가 완료되면 로그인 링크를 선택합니다. 로그인하라는 메시지가 표시됩니다.
로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나 만들기 링크를 선택하여 가입 절차를 시작하세요.
등록 옵션을 선택하면 등록 흐름을 진행합니다. 전자 메일, 일회성 암호, 새 암호 및 더 많은 계정 세부 정보를 입력하여 전체 등록 흐름을 완료합니다.
로그인하거나 등록하면 웹앱으로 다시 리디렉션됩니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다.
로그아웃 선택하여 웹앱에서 사용자를 로그아웃하거나 다운스트림 API 호출하여 Microsoft Graph 엔드포인트를 호출합니다.
작동 방식
사용자가 로그인 링크를 선택하면 앱이 인증 요청을 시작하고 사용자를 Microsoft Entra 외부 ID로 리디렉션합니다. 그러면 사용자가 표시된 페이지에서 로그인하거나 등록할 수 있는 페이지가 나타납니다. 필요한 자격 증명을 제공하고 필요한 범위에 동의한 후 Microsoft Entra 외부 ID는 권한 부여 코드를 사용하여 사용자를 웹앱으로 다시 리디렉션합니다. 그런 다음 웹앱은 이 권한 부여 코드를 사용하여 Microsoft Entra 외부 ID에서 토큰을 획득합니다.
사용자가 로그아웃 링크를 선택하면 앱은 해당 세션을 지우고 사용자를 Microsoft Entra 외부 ID 로그아웃 엔드포인트로 리디렉션하여 사용자가 로그아웃했음을 알립니다. 그러면 사용자가 웹앱으로 다시 리디렉션됩니다.
앱을 실행하여 플레이 중인 로그인 환경을 확인합니다.
메모
이 샘플에서는 Python ID 타사 라이브러리사용합니다. 라이브러리는 Microsoft에서 공식적으로 유지 관리하지 않지만 사용하는 것이 좋습니다. 이 라이브러리를 사용하면 많은 MSAL Python 세부 정보를 추상화하므로 웹앱에 인증을 더 쉽게 추가할 수 있습니다.
터미널에서 다음 명령을 실행합니다.
python3 -m flask run --debug --host=localhost --port=3000
선택한 포트를 사용할 수 있습니다. 이는 이전에 등록한 리디렉션 URI의 포트와 유사해야 합니다.
브라우저를 열고 http://localhost:3000으로 이동하세요. 다음 스크린샷과 유사한 페이지가 표시됩니다.
페이지 로드가 완료되면 로그인 링크를 선택합니다. 로그인하라는 메시지가 표시됩니다.
로그인 페이지에서 전자 메일 주소입력하고, 다음선택하고, 암호입력한 다음, 로그인선택합니다. 계정이 없는 경우, 계정이 없나요? 하나 만들기 링크를 선택하여 가입 절차를 시작하세요.
등록 옵션을 선택하는 경우 가입 과정을 진행합니다. 전자 메일, 일회성 암호, 새 암호 및 더 많은 계정 세부 정보를 입력하여 전체 등록 흐름을 완료합니다.
로그인하거나 등록하면 웹앱으로 다시 리디렉션됩니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다.
로그아웃 선택하여 웹앱에서 사용자를 로그아웃하거나 다운스트림 API 호출하여 Microsoft Graph 엔드포인트를 호출합니다.
작동 방식
사용자가 로그인 링크를 선택하면 앱이 인증 요청을 시작하고 사용자를 Microsoft Entra 외부 ID로 리디렉션합니다. 그러면 사용자가 표시된 페이지에서 로그인하거나 등록할 수 있는 페이지가 나타납니다. 필요한 자격 증명을 제공하고 필요한 범위에 동의한 후 Microsoft Entra 외부 ID는 권한 부여 코드를 사용하여 사용자를 웹앱으로 다시 리디렉션합니다. 그런 다음 웹앱은 이 권한 부여 코드를 사용하여 Microsoft Entra 외부 ID에서 토큰을 획득합니다.
사용자가 로그아웃 링크를 선택하면 앱은 해당 세션을 지우고 사용자를 Microsoft Entra 외부 ID 로그아웃 엔드포인트로 리디렉션하여 사용자가 로그아웃했음을 알립니다. 그러면 사용자가 웹앱으로 다시 리디렉션됩니다.