빠른 시작: Node.js 데스크톱 앱에서 사용자 로그인 및 Microsoft Graph 호출 - Microsoft identity platform

아티클
04/12/2024

이 빠른 시작에서는 Electron 데스크톱 애플리케이션이 사용자를 로그인시키고 Microsoft Graph API를 호출할 액세스 토큰을 얻는 방법을 보여 주는 코드 샘플을 다운로드하고 실행합니다.

이 빠른 시작에서는 PKCE를 사용한 권한 부여 코드 흐름과 함께 Node.js용 Microsoft 인증 라이브러리(MSAL 노드)를 사용합니다.

필수 조건

Node.JS
Visual Studio Code 또는 다른 코드 편집기

샘플 애플리케이션 등록 및 다운로드

시작하려면 아래의 단계를 따르세요.

1단계: 애플리케이션 등록

팁

이 문서의 단계는 시작하는 포털에 따라 약간 다를 수도 있습니다.

애플리케이션을 등록하고 앱의 등록 정보를 솔루션에 수동으로 추가하려면 다음 단계를 따르세요.

최소한 클라우드 애플리케이션 관리자로 Microsoft Entra 관리 센터에 로그인합니다.
여러 테넌트에 액세스할 수 있는 경우 위쪽 메뉴의 설정 아이콘을 사용하여 디렉터리 + 구독 메뉴에서 애플리케이션을 등록하려는 테넌트로 전환합니다.
ID>애플리케이션>앱 등록으로 이동하고 신규 등록을 선택합니다.
애플리케이션에 대한 이름을 입력합니다(예: msal-node-desktop). 이 이름은 앱의 사용자에게 표시될 수 있으며 나중에 변경할 수 있습니다.
등록을 선택하여 애플리케이션을 만듭니다.
관리에서 인증을 선택합니다.
플랫폼 추가>모바일 및 데스크톱 애플리케이션을 차례로 선택합니다.
리디렉션 URI 섹션에서 http://localhost을 입력합니다.
구성을 선택합니다.

2단계: Electron 샘플 프로젝트 다운로드

코드 샘플 다운로드

3단계: Electron 샘플 프로젝트 구성

*프로젝트를 추출하고 ms-identity-JavaScript-nodejs-desktop-main 폴더를 연 다음, .authConfig.js 파일을 엽니다. 값을 다음과 같이 바꿉니다.

변수	설명	예시
`Enter_the_Cloud_Instance_Id_Here`	애플리케이션이 등록된 Azure 클라우드 인스턴스입니다.	`https://login.microsoftonline.com/`(후행 슬래시 포함)
`Enter_the_Tenant_Id_Here`	테넌트 ID 또는 주 도메인	`contoso.microsoft.com` 또는 `aaaabbbb-0000-cccc-1111-dddd2222eeee`
`Enter_the_Application_Id_Here`	등록한 애플리케이션의 클라이언트 ID	`00001111-aaaa-2222-bbbb-3333cccc4444`
`Enter_the_Redirect_Uri_Here`	등록한 애플리케이션의 리디렉션 Uri	`msal00001111-aaaa-2222-bbbb-3333cccc4444://auth`
`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,
 };

4단계: 애플리케이션 실행

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

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

그런 다음, 명령 프롬프트 또는 콘솔을 통해 애플리케이션을 실행합니다.
```
npm start
```
로그인을 선택하여 로그인 프로세스를 시작합니다.

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

자세한 정보

샘플 작동 방법

사용자가 처음으로 로그인 단추를 선택하면 MSAL 노드의 acquireTokenInteractive 메서드가 호출됩니다. 이 메서드는 사용자가 Microsoft ID 플랫폼 엔드포인트로 로그인하도록 리디렉션하고 인증 코드를 얻은 다음 이를 액세스 토큰으로 교환합니다.

MSAL 노드

MSAL Node는 사용자를 로그인시키고 Microsoft ID 플랫폼으로 보호되는 API 액세스에 사용되는 토큰을 요청할 때 사용되는 라이브러리입니다. 데스크톱 앱에서 MSAL Node를 사용하는 방법에 대한 자세한 내용은 이 문서를 참조하세요.

다음 npm 명령을 실행하여 MSAL Node를 설치할 수 있습니다.

npm install @azure/msal-node --save

다음 단계

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

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

다음을 통해 공유