연습 - Next.js 웹앱을 Azure AD와 통합

25분

이 연습에서는 Microsoft Entra ID와 통합되는 간단한 Next.js 기반 애플리케이션을 구성하는 과정을 안내합니다.

이 연습에서는 다음을 수행합니다.

Microsoft Entra 애플리케이션을 등록합니다.
간단한 Microsoft Entra 통합 Next.js 기반 애플리케이션을 구현합니다.
Next.js 기반 애플리케이션의 Microsoft Entra 통합 유효성을 검사합니다.

필수 조건

이 연습을 수행하려면 다음이 필요합니다.

Azure 구독에서 Microsoft Entra ID 설정 및 다중 테넌트 데이터 구현 연습을 완료합니다.
Azure 구독과 연결된 Microsoft Entra 테넌트의 전역 관리자 역할과 Azure 구독의 소유자 또는 기여자 역할이 있는 Microsoft 계정 또는 Microsoft Entra 계정.
Node.js와 Git이 설치된 컴퓨터.

Warning

이 모듈의 연습은 높은 관리자 권한이 필요한 중요한 작업을 수행하므로 테스트 환경을 사용합니다.

참고 항목

Node.js 설치에 대한 자세한 내용은 Node.js 다운로드를 참조하세요. Git에 대한 자세한 내용은 Git 다운로드를 참조하세요. 이 연습을 시작하기 전에 둘 다 설치하세요.

Microsoft Entra ID를 사용하여 애플리케이션 등록

Microsoft Entra 인증을 사용하여 Azure Database for PostgreSQL 데이터베이스에 액세스하는 샘플 Next.js 기반 애플리케이션을 구현하려면 먼저 Microsoft Entra 애플리케이션 개체와 해당 보안 주체를 만들어야 합니다. 그러면 Next.js 기반 애플리케이션이 데이터베이스 개체에 액세스할 때 Microsoft Entra 사용자를 가장할 수 있습니다.

필요한 경우 웹 브라우저를 시작하고, Azure Portal로 이동하고, 로그인하여 이 모듈에서 사용할 Azure 구독에 액세스합니다.
리소스, 서비스 및 문서 검색 텍스트 상자를 사용하여 Microsoft Entra ID를 검색하고 결과 목록에서 Microsoft Entra ID를 선택합니다.
Microsoft Entra ID 창의 세로 메뉴에 있는 관리 섹션에서 앱 등록을 선택합니다.
앱 등록 창에서 + 새 등록을 선택합니다.
애플리케이션 등록 창의 이름 텍스트 상자에 cna-nextjs-app을 입력합니다.
지원되는 계정 유형 섹션에서 이 조직 디렉터리의 계정만(기본 디렉터리만 - 단일 테넌트) 옵션이 선택되어 있는지 확인합니다. 리디렉션 URI(선택 사항) 섹션에서 SPA(단일 페이지 애플리케이션) 항목을 http://localhost:3000으로 설정한 다음, 등록을 선택합니다.

참고 항목

이 시점에서 Microsoft Entra 등록 애플리케이션에 대한 다중 테넌트 지원을 구성할 수 있습니다. 하지만 이 방식에 대한 자세한 내용은 이 모듈의 범위에 포함되지 않습니다.

참고

애플리케이션을 배포한 후에는 실제 URL을 반영하도록 리디렉션 URI(선택 사항) 값을 수정해야 합니다.
cna-nextjs-app 창에서 결과 설정을 검토하고 애플리케이션(클라이언트) ID 및 디렉터리(테넌트) ID 속성의 값을 기록합니다.
cna-nextjs-app 창의 세로 메뉴에 있는 관리 섹션에서 API 사용 권한을 선택합니다.
cna-nextjs-app | API 권한 창에서 + 권한 추가를 선택하고, API 권한 요청 창에서 내 조직에서 사용하는 API 탭을 선택하고, 검색 텍스트 상자에 Azure OSSRDBMS Database를 입력한 다음, 결과 목록에서 Azure OSSRDBMS Database를 선택합니다.
API 권한 요청 블레이드에서 위임된 권한을 선택하고 user_impersonation 확인란을 선택한 다음 권한 추가를 선택합니다.
cna-nextjs-app | API 권한 창으로 돌아가서 기본 디렉터리에 대한 관리자 동의 허용을 선택하고 확인을 묻는 메시지가 표시되면 예를 선택합니다.
cna-nextjs-app | API 권한 창에서 권한이 부여되었는지 확인합니다.

간단한 Microsoft Entra 통합 Next.js 기반 애플리케이션 구현

이제 Microsoft Entra 테넌트에 등록된 애플리케이션을 사용하여 구현을 진행할 수 있습니다. 작업을 간소화하기 위해 샘플 Next.js 코드가 포함된 GitHub 리포지토리를 복제하여 Microsoft Entra 테넌트와 통합하도록 사용자 지정합니다.

로컬 컴퓨터에서 Node.js 명령 프롬프트를 시작합니다.

참고

사용자 컴퓨터에서 Node.js의 로컬 설치를 사용하여 실행해야 합니다.
Node.js 명령 프롬프트에서 다음 명령을 실행하여 이 연습에서 사용할 샘플 Next.js 애플리케이션 코드가 포함된 GitHub 리포지토리를 복제합니다.
```
git clone https://github.com/MicrosoftDocs/mslearn-cloud-native-apps.git
```
다음 명령을 실행하여 GitHub 리포지토리의 복제본을 호스트하는 디렉터리로 전환합니다.
```
cd ./mslearn-cloud-native-apps/m06u07
```

원하는 텍스트 편집기를 사용하여 ./src/App.jsx 파일의 콘텐츠를 검토합니다. 이 파일은 단일 페이지 애플리케이션에 대한 Microsoft Entra ID에서 액세스 토큰을 검색합니다.

참고 항목

샘플 코드는 자습서: 사용자 로그인 및 인증 코드 흐름을 사용하여 React SPA(단일 페이지 앱)에서 Microsoft Graph API 호출을 기반으로 합니다.

./src/App.jsx 파일의 콘텐츠는 다음과 같습니다.

import React, { useState } from "react";
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from "@azure/msal-react";
import { loginRequest } from "./authConfig";
import { PageLayout } from "./components/PageLayout";
import { ProfileData } from "./components/ProfileData";
import { callMsGraph } from "./graph";
import Button from "react-bootstrap/Button";
import "./styles/App.css";

var accessToken = '';

/**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
const ProfileContent = () => {
    const { instance, accounts } = useMsal();
    const [graphData, setGraphData] = useState(null);

    function RequestProfileData() {
        // Silently acquires an access token which is then attached to a request for MS Graph data
        instance.acquireTokenSilent({
            ...loginRequest,
            account: accounts[0]
        }).then((response) => {
            accessToken = response.accessToken;
            callMsGraph(response.accessToken).then(response => setGraphData(response));
        });
    }

    return (
        <>
            <h5 className="card-title">Welcome {accounts[0].name}</h5>
            {graphData ?
                <ProfileData graphData={graphData} />
                :
                <Button variant="secondary" onClick={RequestProfileData}>Request Profile Information</Button>
            }
            <p>{accessToken}</p>
        </>
    );
};

/**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise, a message indicating a user is not authenticated is rendered.
 */
const MainContent = () => {
    return (
        <div className="App">
            <AuthenticatedTemplate>
                <ProfileContent />
            </AuthenticatedTemplate>

            <UnauthenticatedTemplate>
                <h5 className="card-title">Please sign-in to review your profile information.</h5>
                </UnauthenticatedTemplate>
        </div>
    );
};

export default function App() {
    return (
        <PageLayout>
            <MainContent />
        </PageLayout>
    );
}

원하는 텍스트 편집기를 사용하여 ./src/authConfig.js 파일의 콘텐츠를 검토합니다. 이 파일은 이 연습의 이전 작업에서 등록한 대상 Microsoft Entra 애플리케이션을 식별하는 데 필요한 정보를 저장합니다.

./src/authConfig.js 파일의 콘텐츠는 다음과 같습니다.

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation.
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md
 */
export const msalConfig = {
    auth: {
        clientId: "<client_ID>",
        authority: "https://login.microsoftonline.com/<tenant_ID>",
        redirectUri: "http://localhost:3000"
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                }
            }
        }
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in.
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit:
 * https://zcusa.951200.xyz/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
export const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, review:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
};

./src/authConfig.js 파일의 콘텐츠가 보이는 텍스트 편집기 내에서 <client_ID> 및 <tenant_ID> 자리 표시자를 이 연습의 이전 작업에서 확인한 해당 값으로 바꿉니다.
./src/authConfig.js 파일의 콘텐츠가 보이는 텍스트 편집기 내에서 scopes: ["User.Read"] 항목을 scopes: ["User.Read","https://ossrdbms-aad.database.windows.net/user_impersonation"]으로 바꿉니다.
변경 내용을 저장하고 파일을 닫습니다.

Next.js 기반 애플리케이션의 Microsoft Entra 통합 유효성 검사

앱의 Microsoft Entra 통합 유효성을 검사할 준비가 되었습니다. 컨테이너화할 수 있지만 간단하게 하기 위해 먼저 Node.js 개발 환경 내의 컴퓨터에서 로컬로 실행합니다. 이렇게 하면 기능의 유효성을 검사하고 컨테이너화가 실행 가능한 옵션인지 확인할 수 있는 빠른 방법을 제공합니다.

Node.js 명령 프롬프트에서 다음 명령을 실행하여 샘플 Next.js 애플리케이션의 종속성 패키지를 설치합니다.
```
npm install
```
참고

설치 프로세스가 완료될 때까지 기다립니다.
Node.js 명령 프롬프트에서 다음 명령을 실행하여 Next.js 애플리케이션을 빌드합니다.
```
npm run-script build
```
참고

빌드 프로세스가 완료될 때까지 기다립니다.
Node.js 명령 프롬프트에서 다음 명령을 실행하여 Next.js 애플리케이션을 시작합니다.
```
npm run-script start
```
참고

그러면 브라우저 창이 자동으로 열리고 JavaScript용 Microsoft 인증 라이브러리 - React 빠른 시작 페이지가 표시됩니다.
JavaScript용 Microsoft 인증 라이브러리 - React 빠른 시작 페이지가 표시된 웹 브라우저 창을 닫고 또 다른 웹 브라우저 창을 Incognito/InPrivate 모드에서 시작하여 http://localhost:3000 URL로 이동합니다.
JavaScript용 Microsoft 인증 라이브러리 - React 빠른 시작 페이지에서 로그인을 선택한 다음, 확장 메뉴에서 팝업을 사용하여 로그인을 선택합니다.
로그인하라는 메시지가 표시되면 adatumuser1 userPrincipalName과 암호를 사용하여 인증합니다.

참고 항목

이 사용자 계정은 이 모듈의 첫 번째 연습에서 만들었습니다.
JavaScript용 Microsoft 인증 라이브러리 - React 빠른 시작 페이지에서 프로필 정보 요청을 선택합니다.

참고 항목

출력에 adatumuser1 Microsoft Entra 사용자 계정의 이메일, ID 및 액세스 토큰이 포함되어 있는지 확인합니다.
동일한 웹 브라우저 창에서 다른 브라우저 탭을 열고 이전 연습에서 배포한 웹 애플리케이션으로 이동합니다.

참고

URL은 다음과 같은 형식이어야 합니다. https://<webapp_name>.azurewebsites.net/auth

참고

결과 웹 페이지에 첫 번째 테넌트에 대한 인벤토리 데이터가 표시되는지 확인합니다.

참고

초기 시도가 실패하면 다시 시도합니다.
Incognito/InPrivate 모드에서 웹 브라우저 창을 닫습니다.

참고

이제 contosouser1과 동일한 일련의 단계를 반복하여 두 번째 테넌트에 해당하는 인벤토리 데이터에 액세스하고 레코드 집합을 표시할 수 있는지도 확인합니다.
또 다른 웹 브라우저 창을 Incognito/InPrivate 모드에서 시작하여 http://localhost:3000 URL로 이동합니다.
JavaScript용 Microsoft 인증 라이브러리 - React 빠른 시작 페이지에서 로그인을 선택한 다음, 확장 메뉴에서 팝업을 사용하여 로그인을 선택합니다.
로그인하라는 메시지가 표시되면 contosouser1 userPrincipalName과 해당 암호를 사용하여 인증합니다.

참고 항목

이 사용자 계정은 이 모듈의 첫 번째 연습에서 만들었습니다.

참고

메시지가 표시되면 액세스 요청을 수락하고 contosouser1 계정의 암호를 변경합니다.
JavaScript용 Microsoft 인증 라이브러리 - React 빠른 시작 페이지에서 프로필 정보 요청을 선택합니다.

참고 항목

출력에 contosouser1 Microsoft Entra 사용자 계정의 이메일, ID 및 액세스 토큰이 포함되어 있는지 확인합니다.
동일한 웹 브라우저 창에서 다른 브라우저 탭을 열고 이전 연습에서 배포한 웹 애플리케이션으로 이동합니다.

참고

결과 웹 페이지에 두 번째 테넌트에 대한 인벤토리 데이터가 표시되는지 확인합니다.

결과

축하합니다! 이 모듈의 세 번째 연습을 완료했습니다. 이 연습에서는 간단한 AD 통합 Next.js 기반 애플리케이션을 구현하고 기능을 확인했습니다.

리소스 정리

Azure 리소스 사용으로 인해 불필요한 요금이 발생하지 않도록 하려면 이 모듈의 이전 연습에서 만든 postgresql-db-RG 및 cna-aadexpress-RG 리소스 그룹을 삭제해야 합니다. 이렇게 하려면 Azure Portal에서 이러한 각 리소스 그룹의 창으로 이동하고, 도구 모음에서 리소스 그룹 삭제 항목을 선택합니다. 리소스 그룹 이름 입력 텍스트 상자에 리소스 그룹의 이름을 입력한 후 삭제를 선택합니다.