다음을 통해 공유

빠른 시작: 샘플 데스크톱 앱에서 사용자 로그인

적용 대상: 워크포스 테넌트 흰색 확인 표시가 있는 녹색 원 외부 테넌트(Green circle with a white check mark symbol.자세히 알아보기)

이 빠른 시작에서는 샘플 애플리케이션을 사용하여 데스크톱 애플리케이션에 인증을 추가하는 방법을 알아봅니다. 샘플 애플리케이션을 사용하면 사용자가 로그인하고 로그아웃할 수 있으며 MSAL(Microsoft 인증 라이브러리)을 사용하여 인증을 처리합니다.

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

필수 조건

  • 활성 구독이 있는 Azure 계정. 아직 계정이 없으시다면, 무료로 계정을 만드세요.
  • 이 Azure 계정에는 애플리케이션을 관리할 수 있는 권한이 있어야 합니다. 다음 Microsoft Entra 역할에는 필요한 권한이 포함됩니다.
    • 애플리케이션 관리자
    • 애플리케이션 개발자
  • 인력 임차인입니다. 기본 디렉터리를 사용하거나 을 설정하여 새 테넌트을 만들 수 있습니다.
  • 새 앱을 Microsoft Entra 관리 센터에 등록하고, 해당 조직 디렉터리의 계정만을 위해 구성합니다. 애플리케이션 등록에서 자세한 내용을 참조하세요. 다음 값을 애플리케이션 개요 페이지에서 기록하여 나중에 사용하십시오.
    • 애플리케이션(클라이언트) ID
    • 디렉터리(테넌트) ID

샘플 프로젝트 다운로드

비고

이 자습서에서 제공하는 Electron 샘플은 MSAL 노드에서 작동하도록 특별히 설계되었습니다. MSAL 브라우저는 Electron 애플리케이션에서 지원되지 않습니다. 프로젝트를 올바르게 설정하려면 다음 단계를 완료해야 합니다.

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

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

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

프로젝트 구성

코드 편집기에서 ms-identity-javascript-nodejs-desktop-main/App/authConfig.js 파일을 엽니다. 값을 다음과 같이 바꿉니다.

변수 설명 예제(들)
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_Graph_Endpoint_Here 앱에서 호출할 Microsoft Graph API 클라우드 인스턴스 https://graph.microsoft.com/(끝에 슬래시 포함)

파일은 다음과 유사하게 표시되어야 합니다.

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

애플리케이션 실행

  1. 이 샘플의 종속성을 한 번 설치해야 합니다.

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. 그런 다음, 명령 프롬프트 또는 콘솔을 통해 애플리케이션을 실행합니다.

    npm start

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

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

다음 단계

MSAL Node를 사용한 Electron 데스크톱 앱 개발에 대해 자세히 알아보려면 다음 자습서를 참조하세요.

자습서: Electron 데스크톱 앱에서 사용자 로그인 및 Microsoft Graph API 호출

필수 조건

샘플 프로젝트 다운로드

비고

이 자습서에서 제공하는 Electron 샘플은 MSAL 노드에서 작동하도록 특별히 설계되었습니다. MSAL 브라우저는 Electron 애플리케이션에서 지원되지 않습니다. 프로젝트를 올바르게 설정하려면 다음 단계를 완료해야 합니다.

데스크톱 앱 샘플 코드를 가져오려면 .zip 파일을 다운로드하거나 다음 명령을 실행하여 GitHub에서 샘플 웹 애플리케이션을 복제합니다.

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

.zip 파일을 다운로드하기로 선택한 경우 전체 경로 길이가 260자 이하인 폴더에 샘플 앱 파일을 추출합니다.

프로젝트 종속성 설치

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

    cd 1-Authentication\3-sign-in-electron\App

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

    npm install && npm update

샘플 웹앱 구성

  1. 코드 편집기에서 App\authConfig.js 파일을 엽니다.

  2. 자리 표시자 찾기:

    1. Enter_the_Application_Id_Here를 이전에 등록한 앱의 애플리케이션(클라이언트) ID로 바꿉니다.

    2. Enter_the_Tenant_Subdomain_Here를 디렉터리(테넌트) 하위 도메인으로 바꿉니다. 예를 들어, 테넌트 기본 도메인이 contoso.onmicrosoft.com인 경우 contoso를 사용합니다. 테넌트 이름이 없는 경우 테넌트 세부 정보를 읽는 방법을 알아봅니다.

샘플 웹앱 실행 및 테스트

이제 샘플 Electron 데스크톱 앱을 테스트할 수 있습니다. 앱을 실행하면 데스크톱 앱 창이 자동으로 나타납니다.

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

    npm start

    Electronic 데스크톱 앱에 로그인하는 스크린샷.

  2. 나타나는 데스크톱 창에서 로그인 또는 등록 단추를 선택합니다. 브라우저 창이 열리고 로그인하라는 메시지가 표시됩니다.

  3. 브라우저 로그인 페이지에서 이메일 주소를 입력하고 다음을 선택한 후 암호를 입력하고 로그인을 선택합니다. 계정이 없으신 경우, 계정이 없으신가요? 만들기 링크를 선택하면 등록 절차가 시작됩니다.

  4. 등록 옵션을 선택하면 전자 메일, 일회성 암호, 새 암호 및 더 많은 계정 세부 정보를 입력한 후 전체 등록 흐름을 완료합니다. 다음 스크린샷과 비슷한 페이지가 표시됩니다. 로그인 옵션을 선택하면 비슷한 페이지가 표시됩니다. 페이지에 토큰 ID 클레임이 표시됩니다.

    Electron 데스크톱 앱에서 토큰 조회 청구 캡처 화면.

관련 콘텐츠