자습서: 보안 앱에서 사용자로 Microsoft Graph에 액세스

Azure Resource Explorer로 이동하고 리소스 트리를 사용하여 웹앱을 찾습니다. 리소스 URL은 https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914와 유사해야 합니다.

이제 Azure Resource Explorer가 리소스 트리에서 웹앱이 선택된 상태로 열립니다. 페이지의 위쪽에서 읽기/쓰기 를 선택하여 Azure 리소스 편집이 가능하도록 설정합니다.

왼쪽 브라우저에서 구성>authsettingsV2로 드릴다운합니다.

authsettingsV2 보기에서 편집을 선택합니다. identityProviders ->azureActiveDirectory의 login 섹션을 찾아 "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ]의 loginParameters 설정을 추가합니다.

"identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

PUT을 선택하여 설정을 저장합니다. 이 설정이 적용되려면 몇 분 정도 걸릴 수 있습니다. 이제 웹앱이 적절한 액세스 토큰을 사용하여 Microsoft Graph에 액세스하도록 구성되었습니다. 그렇지 않으면 Microsoft Graph에서 압축 토큰의 형식이 올바르지 않다는 오류를 반환합니다.

Azure CLI를 사용하여 App Service Web App REST API를 호출하여 웹앱이 Microsoft Graph를 호출할 수 있도록 인증 구성 설정을 가져오고 업데이트합니다. 명령 창을 열고 Azure CLI에 로그인합니다.

az login

기존 'config/authsettingsv2' 설정을 가져와서 로컬 authsettings.json 파일에 저장합니다.

az rest --method GET --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2/list?api-version=2020-06-01' > authsettings.json

원하는 텍스트 편집기를 사용하여 authsettings.json 파일을 엽니다. identityProviders ->azureActiveDirectory의 login 섹션을 찾아 "loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ]의 loginParameters 설정을 추가합니다.

"identityProviders": {
    "azureActiveDirectory": {
      "enabled": true,
      "login": {
        "loginParameters":[
          "response_type=code id_token",
          "scope=openid offline_access profile https://graph.microsoft.com/User.Read"
        ]
      }
    }
  }
},

변경 사항을 authsettings.json 파일에 저장하고 로컬 설정을 웹앱에 업로드합니다.

az rest --method PUT --url '/subscriptions/{SUBSCRIPTION_ID}/resourceGroups/{RESOURCE_GROUP}/providers/Microsoft.Web/sites/{WEBAPP_NAME}/config/authsettingsv2?api-version=2020-06-01' --body @./authsettings.json

Microsoft.Identity.Web 라이브러리를 사용하여 웹앱은 Microsoft Graph 인증을 위한 액세스 토큰을 얻습니다. 버전 1.2.0 이상에서 Microsoft.Identity.Web 라이브러리는 App Service 인증/권한 부여 모듈과 통합되며 함께 실행할 수 있습니다. Microsoft.Identity.Web은 웹앱이 App Service에서 호스트되는 것을 감지하고 App Service 인증/권한 부여 모듈에서 액세스 토큰을 가져옵니다. 그런 다음, 액세스 토큰은 Microsoft Graph API를 사용하여 인증된 요청에 전달됩니다.

이 코드를 샘플 애플리케이션의 일부로 보려면 GitHub의 샘플을 참조하세요.

클라이언트 라이브러리 패키지 설치

.NET CLI(명령줄 인터페이스) 또는 Visual Studio의 패키지 관리자 콘솔을 사용하여 프로젝트에 Microsoft.Identity.Web 및 Microsoft.Identity.Web.GraphServiceClient NuGet 패키지를 설치합니다.

.NET CLI

명령줄을 열고 프로젝트 파일이 포함된 디렉터리로 전환합니다.

설치 명령을 실행합니다.

dotnet add package Microsoft.Identity.Web.GraphServiceClient

dotnet add package Microsoft.Identity.Web

패키지 관리자 콘솔

Visual Studio에서 프로젝트/솔루션을 열고, 도구>NuGet 패키지 관리자>패키지 관리자 콘솔 명령을 사용하여 콘솔을 엽니다.

설치 명령을 실행합니다.

Install-Package Microsoft.Identity.Web.GraphServiceClient

Install-Package Microsoft.Identity.Web

Startup.cs

Startup.cs 파일에서 AddMicrosoftIdentityWebApp 메서드는 웹앱에 Microsoft.Identity.Web을 추가합니다. AddMicrosoftGraph 메서드는 Microsoft Graph 지원을 추가합니다.

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.Identity.Web;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;

// Some code omitted for brevity.
public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddOptions();
      string[] initialScopes = Configuration.GetValue<string>("DownstreamApi:Scopes")?.Split(' ');

      services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
              .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
              .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
                      .AddMicrosoftGraph(Configuration.GetSection("DownstreamApi"))
                      .AddInMemoryTokenCaches(); 

      services.AddAuthorization(options =>
      {
          // By default, all incoming requests will be authorized according to the default policy
          options.FallbackPolicy = options.DefaultPolicy;
      });
      services.AddRazorPages()
          .AddMvcOptions(options => {})                
          .AddMicrosoftIdentityUI();

      services.AddControllersWithViews()
              .AddMicrosoftIdentityUI();
    }
}

appsettings.json

Microsoft Entra ID는 Microsoft.Identity.Web 라이브러리에 대한 구성을 지정합니다. Microsoft Entra 관리 센터의 포털 메뉴에서 애플리케이션을 선택한 다음 앱 등록을 선택합니다. App Service 인증/권한 부여 모듈을 활성화할 때 생성된 앱 등록을 선택합니다. (앱 등록은 웹앱과 이름이 같아야 합니다.) 테넌트 ID와 클라이언트 ID는 앱 등록 개요 페이지에서 찾을 수 있습니다. 도메인 이름은 테넌트의 Microsoft Entra 개요 페이지에서 찾을 수 있습니다.

Graph는 앱에 필요한 Microsoft Graph 엔드포인트와 초기 범위를 지정합니다.

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "[Enter the domain of your tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Entra admin center. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. aaaabbbb-0000-cccc-1111-dddd2222eeee]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Microsoft Entra admin center), e.g. 00001111-aaaa-2222-bbbb-3333cccc4444]",
    "ClientSecret": "[Copy the client secret added to the app from the Microsoft Entra admin center]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc"
  },
  "DownstreamApis": {
    "MicrosoftGraph": {
      // Specify BaseUrl if you want to use Microsoft graph in a national cloud.
      // See https://learn.microsoft.com/graph/deployments#microsoft-graph-and-graph-explorer-service-root-endpoints
      // "BaseUrl": "https://graph.microsoft.com/v1.0",

      // Set RequestAppToken this to "true" if you want to request an application token (to call graph on 
      // behalf of the application). The scopes will then automatically
      // be ['https://graph.microsoft.com/.default'].
      // "RequestAppToken": false

      // Set Scopes to request (unless you request an app token).
      "Scopes": [ "User.Read" ]

      // See https://aka.ms/ms-id-web/downstreamApiOptions for all the properties you can set.
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}

Index.cshtml.cs

다음 예제는 로그인한 사용자로 Microsoft Graph를 호출하고 일부 사용자 정보를 가져오는 방법을 보여줍니다. GraphServiceClient 개체가 컨트롤러에 삽입되고 인증이 Microsoft.Identity.Web 라이브러리에 의해 구성되었습니다.

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Graph;
using System.IO;
using Microsoft.Identity.Web;
using Microsoft.Extensions.Logging;

// Some code omitted for brevity.

[AuthorizeForScopes(Scopes = new[] { "User.Read" })]
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;
    private readonly GraphServiceClient _graphServiceClient;

    public IndexModel(ILogger<IndexModel> logger, GraphServiceClient graphServiceClient)
    {
        _logger = logger;
        _graphServiceClient = graphServiceClient;
    }

    public async Task OnGetAsync()
    {
        try
        {
            var user = await _graphServiceClient.Me.GetAsync();
            ViewData["Me"] = user;
            ViewData["name"] = user.DisplayName;

            using (var photoStream = await _graphServiceClient.Me.Photo.Content.GetAsync())
            {
                byte[] photoByte = ((MemoryStream)photoStream).ToArray();
                ViewData["photo"] = Convert.ToBase64String(photoByte);
            }
        }
        catch (Exception ex)
        {
            ViewData["photo"] = null;
        }
    }
}

웹앱은 인증 논리를 캡슐화하는 사용자 지정 AuthProvider 클래스를 사용하여 들어오는 요청 헤더에서 사용자의 액세스 토큰을 가져옵니다. AuthProvider 인스턴스는 웹앱이 App Service에 호스트되어 있음을 감지하고 App Service 인증/권한 부여 모듈에서 액세스 토큰을 가져옵니다. 그런 다음 액세스 토큰은 Microsoft Graph SDK 클라이언트로 전달되어 /me 엔드포인트에 인증된 요청을 보냅니다.

const graphHelper = require('../utils/graphHelper');

// Some code omitted for brevity.

exports.getProfilePage = async(req, res, next) => {

    try {
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

Microsoft Graph를 쿼리하려면 Microsoft Graph JavaScript SDK를 사용합니다.

const graph = require('@microsoft/microsoft-graph-client');

// Some code omitted for brevity.

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}