JavaScript シングル ページ アプリケーション (SPA) から Microsoft Graph API を呼び出すCall the Microsoft Graph API from a JavaScript single-page application (SPA)

このガイドでは、JavaScript シングル ページ アプリケーション (SPA) が個人アカウント、または職場および学校アカウントにサインインし、アクセス トークンを取得し、Microsoft Graph API またはアクセス トークンを必要とする他の API を、Azure Active Directory v2.0 エンドポイントから呼び出す方法について説明します。This guide demonstrates how a JavaScript single-page application (SPA) can sign in personal, work and school accounts, get an access token, and call the Microsoft Graph API or other APIs that require access tokens from the Azure Active Directory v2.0 endpoint.

このガイドで生成されたサンプル アプリの動作How the sample app generated by this guide works

このガイドで生成されたサンプル アプリの動作

詳細情報More Information

このガイドで作成したサンプル アプリケーションにより、JavaScript SPA で、Microsoft Graph API または Azure Active Directory v2.0 エンドポイントからトークンを受け取る Web API にクエリを実行できるようになります。The sample application created by this guide enables a JavaScript SPA to query the Microsoft Graph API or a Web API that accepts tokens from Azure Active Directory v2.0 endpoint. このシナリオでは、ユーザーのサインイン後に、アクセス トークンが要求され、Authorization ヘッダーを介して HTTP 要求に追加されます。For this scenario, after a user signs in, an access token is requested and added to HTTP requests through the authorization header. トークンの取得と更新は、Microsoft Authentication Library (MSAL) で処理されます。Token acquisition and renewal are handled by the Microsoft Authentication Library (MSAL).

ライブラリLibraries

このガイドでは、次のライブラリを使用します。This guide uses the following library:

ライブラリLibrary 説明Description
msal.jsmsal.js JavaScript プレビュー用の Microsoft Authentication LibraryMicrosoft Authentication Library for JavaScript Preview

注意

msal.js は、Azure Active Directory v2.0 エンドポイントを対象とします。これにより、個人アカウント、または学校および職場アカウントでサインインして、トークンを取得することができます。msal.js targets the Azure Active Directory v2.0 endpoint - which enables personal, school and work accounts to sign in and acquire tokens. Azure Active Directory v2.0 エンドポイントには、いくつかの制限があります。The Azure Active Directory v2.0 endpoint has some limitations. v1.0 エンドポイントと v2.0 のエンドポイントの相違点を理解するには、エンドポイントの比較ガイドを参照してください。To understand differences between the v1.0 and v2.0 endpoints read the Endpoint comparison guide.

Web サーバーまたはプロジェクトの設定Setting up your web server or project

代わりにこのサンプルのプロジェクトをダウンロードすることもできます。Prefer to download this sample's project instead?

oror

次に構成手順に進み、実行前にコード サンプルを構成します。And then skip to the Configuration step to configure the code sample before executing it.

前提条件Prerequisites

このチュートリアルを実行するには、Node.js.NET Core、または Visual Studio 2017 と統合された IIS Express などのローカル Web サーバーが必要です。A local web server such as Node.js, .NET Core, or IIS Express integration with Visual Studio 2017 is required to run this tutorial.

このガイドの手順は Node.js と Visual Studio 2017 の両方に基づいていますが、他の開発環境または Web サーバーでも自由に使用できます。Instructions in this guide are based on both Node.js and Visual Studio 2017, but feel free to use any other development environment or Web Server.

プロジェクトを作成するCreate your project

方法 1: Node/その他の Web サーバーOption 1: Node/ other web servers

Node.js がインストールされていることを確認し、以下の手順に従います。Make sure you have installed Node.js, then follow the step below:

  • アプリケーションをホストするフォルダーを作成します。Create a folder to host your application.

方法 2: Visual StudioOption 2: Visual Studio

Visual Studio を使用して新しいプロジェクトを作成している場合は、以下の手順に従って新しい Visual Studio ソリューションを作成します。If you are using Visual Studio and are creating a new project, follow the steps below to create a new Visual Studio solution:

  1. Visual Studio で、[ファイル] > [新規] > [プロジェクト] と移動しますIn Visual Studio: File > New > Project
  2. [Visual C#\Web][ASP.NET Web アプリケーション (.NET Framework)] を選択しますUnder Visual C#\Web, select ASP.NET Web Application (.NET Framework)
  3. アプリケーションの名前を入力し、[OK] を選択しますEnter a name for your application and select OK
  4. [新しい ASP.NET Web アプリケーション][空] を選択しますUnder New ASP.NET Web Application, select Empty

Single Page Application の UI を作成するCreate your single page application’s UI

  1. JavaScript SPA の index.html ファイルを作成します。Create an index.html file for your JavaScript SPA. Visual Studio を使用している場合は、プロジェクト (プロジェクト ルート フォルダー) を選択し、右クリックして [追加] > [新しい項目] > [HTML ページ] を選択し、ページの名前を index.html にします。If you are using Visual Studio, select the project (project root folder), right click and select: Add > New Item > HTML page and name it index.html.

  2. 次のコードをページに追加します。Add the following code to your page:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Quickstart for MSAL JS</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
        <script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    </head>
    <body>
        <h2>Welcome to MSAL.js Quickstart</h2><br/>
        <h4 id="WelcomeMessage"></h4>
        <button id="SignIn" onclick="signIn()">Sign In</button><br/><br/>
        <pre id="json"></pre>
        <script>
            //JS code
        </script>
    </body>
    </html>
    

ユーザーのサインインに Microsoft Authentication Library (MSAL) を使用するUse the Microsoft Authentication Library (MSAL) to sign in the user

  1. 次のコードを index.html ファイルの <script></script> タグ内に追加します。Add the following code to your index.html file within the <script></script> tags:
//Pass null for default authority (https://login.microsoftonline.com/common)
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, acquireTokenRedirectCallBack,
    {storeAuthStateInCookie: true, cacheLocation: "localStorage"});

function signIn() {
    myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
        //Login Success
        showWelcomeMessage();
        acquireTokenPopupAndCallMSGraph();
    }, function (error) {
        console.log(error);
    });
}

function acquireTokenPopupAndCallMSGraph() {
    //Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
    myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
        callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
    }, function (error) {
        console.log(error);
        // Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
        if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
            myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
                callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
            }, function (error) {
                console.log(error);
            });
        }
    });
}

function graphAPICallback(data) {
    //Display user data on DOM
    var divWelcome = document.getElementById('WelcomeMessage');
    divWelcome.innerHTML += " to Microsoft Graph API!!";
    document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
}

function showWelcomeMessage() {
    var divWelcome = document.getElementById('WelcomeMessage');
    divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
    var loginbutton = document.getElementById('SignIn');
    loginbutton.innerHTML = 'Sign Out';
    loginbutton.setAttribute('onclick', 'signOut();');
}

// This function can be removed if you do not need to support IE
function acquireTokenRedirectAndCallMSGraph() {
    //Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
    myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
      callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
    }, function (error) {
        console.log(error);
        //Call acquireTokenRedirect in case of acquireToken Failure
        if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
            myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
        }
    });
}

function acquireTokenRedirectCallBack(errorDesc, token, error, tokenType) {
    if (tokenType === "access_token") {
        callMSGraph(applicationConfig.graphEndpoint, token, graphAPICallback);
    } else {
        console.log("token type is:"+tokenType);
    }
}


// Browser check variables
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var msie11 = ua.indexOf('Trident/');
var msedge = ua.indexOf('Edge/');
var isIE = msie > 0 || msie11 > 0;
var isEdge = msedge > 0;

//If you support IE, our recommendation is that you sign-in using Redirect APIs
//If you as a developer are testing using Microsoft Edge InPrivate mode, please add "isEdge" to the if check
if (!isIE) {
    if (myMSALObj.getUser()) {// avoid duplicate code execution on page load in case of iframe and popup window.
        showWelcomeMessage();
        acquireTokenPopupAndCallMSGraph();
    }
} else {
    document.getElementById("SignIn").onclick = function () {
        myMSALObj.loginRedirect(applicationConfig.graphScopes);
    };
    if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
        showWelcomeMessage();
        acquireTokenRedirectAndCallMSGraph();
    }
}

詳細情報More Information

ユーザーが初めて [サインイン] ボタンをクリックすると、signIn メソッドによって、ユーザーがサインインするための loginPopup が呼び出されます。After a user clicks the Sign In button for the first time, the signIn method calls loginPopup to sign in the user. このメソッドで、Microsoft Azure Active Directory v2.0 エンドポイントのポップアップ ウィンドウが開かれて、ユーザーの資格情報が要求され、検証が行われます。This method results in opening a popup window with the Microsoft Azure Active Directory v2.0 endpoint to prompt and validate the user's credentials. サインインに成功すると、ユーザーは元の index.html ページにリダイレクトされ、トークンが受信されて msal.js によって処理され、トークンに含まれる情報がキャッシュされます。As a result of a successful sign-in, the user is redirected back to the original index.html page, and a token is received, processed by msal.js and the information contained in the token is cached. このトークンは ID トークンと呼ばれ、ユーザー表示名などのユーザーに関する基本情報が含まれます。This token is known as the ID token and contains basic information about the user, such as the user display name. 何らかの目的のためにこのトークンが提供する任意のデータを使用する予定がある場合、アプリケーションの有効なユーザーに対してトークンが発行されたことを保証するために、このトークンがバックグラウンド サーバーで確実に検証される必要があります。If you plan to use any data provided by this token for any purposes, you need to make sure this token is validated by your backend server to guarantee that the token was issued to a valid user for your application.

このガイドで生成する SPA は、ユーザー プロファイル情報のため、acquireTokenSilentacquireTokenPopup、またはその両方を呼び出して、Microsoft Graph API の照会に使用されるアクセス トークンを取得します。The SPA generated by this guide calls acquireTokenSilent and/or acquireTokenPopup to acquire an access token used to query the Microsoft Graph API for user profile info. ID トークンを検証するサンプルが必要な場合は、こちらにある GitHub のサンプル アプリケーションを確認してください。このサンプルでは、トークンの検証に ASP.NET Web API を使用しています。If you need a sample that validates the ID token, take a look at this sample application in GitHub – the sample uses an ASP.NET Web API for token validation.

ユーザー トークンを対話形式で取得するGetting a user token interactively

最初のサインインの後に、リソースにアクセスするためにトークンを要求するたびにユーザーを再認証しなくてすむようにするには、トークンを取得する多くの場合に acquireTokenSilent を使用する必要があります。After the initial sign-in, you do not want to ask users to reauthenticate every time they need to request a token to access a resource – so acquireTokenSilent should be used most of the time to acquire tokens. ただし、次の例のように、ユーザーが Azure Active Directory v2.0 エンドポイントとやり取りを行う必要がある状況があります。There are situations however that you need to force users to interact with Azure Active Directory v2.0 endpoint – some examples include:

  • パスワードの有効期限が切れているため、ユーザーは資格情報を再入力する必要があるUsers may need to reenter their credentials because the password has expired
  • ご使用のアプリケーションが、ユーザーによる同意が必要なリソースへのアクセスを要求しているYour application is requesting access to a resource that the user needs to consent to
  • 2 要素認証が必須であるTwo factor authentication is required

acquireTokenPopup(scope) を呼び出すとポップアップ ウィンドウが表示されます (または、acquireTokenRedirect(scope) を呼び出すとユーザーが Azure Active Directory v2.0 エンドポイントにリダイレクトされます)。ユーザーはそこでやり取りをして、自分の資格情報の確認、要求されたリソースへの同意、2 要素認証の完了のいずれかを行う必要があります。Calling the acquireTokenPopup(scope) results in a popup window (or acquireTokenRedirect(scope) results in redirecting users to the Azure Active Directory v2.0 endpoint) where users need to interact by either confirming their credentials, giving the consent to the required resource, or completing the two factor authentication.

ユーザー トークンを自動で取得するGetting a user token silently

acquireTokenSilent メソッドは、ユーザーの操作なしでトークンの取得や更新を処理します。The acquireTokenSilent method handles token acquisitions and renewal without any user interaction. 初めて loginPopup (または loginRedirect) が実行された後、その後の呼び出しでは、保護されたリソースにアクセスするトークンを取得するために acquireTokenSilent メソッドが通常使用されます。トークンの要求や更新のための呼び出しは自動で行われるためです。After loginPopup (or loginRedirect) is executed for the first time, acquireTokenSilent is the method commonly used to obtain tokens used to access protected resources for subsequent calls - as calls to request or renew tokens are made silently. acquireTokenSilent は、ユーザーのパスワードの期限が切れている場合などに失敗することがあります。acquireTokenSilent may fail in some cases – for example, the user's password has expired. アプリケーションでは、この例外を 2 つの方法で処理できます。Your application can handle this exception in two ways:

  1. すぐに acquireTokenPopup を呼び出し、ユーザーにサインインを求める。Make a call to acquireTokenPopup immediately, which results in prompting the user to sign in. オンライン アプリケーション (ユーザーが使用できる非認証コンテンツが含まれていないアプリケーション) の場合は、一般に、この方法で処理します。This pattern is commonly used in online applications where there is no unauthenticated content in the application available to the user. このガイドの設定で生成したサンプルでは、このパターンを使用しています。The sample generated by this guided setup uses this pattern.

  2. ユーザーに対してアプリケーションで視覚的に対話形式でのサインインを求めることで、ユーザーが適切なタイミングでサインインできるようにし、アプリケーションがあとで acquireTokenSilent を再試行できるようにする。Applications can also make a visual indication to the user that an interactive sign-in is required, so the user can select the right time to sign in, or the application can retry acquireTokenSilent at a later time. アプリケーションにユーザーが使用できる非認証コンテンツが含まれている場合など、アプリケーションの他の機能を中断せずに使用できる場合は、一般に、この方法で処理します。This is commonly used when the user can use other functionality of the application without being disrupted - for example, there is unauthenticated content available in the application. この場合、ユーザーは、保護されたリソースにアクセスしたり、古くなった情報を更新したりするためにサインインするタイミングを決定できます。In this case, the user can decide when they want to sign in to access the protected resource, or to refresh the outdated information.

注意

上記のコードでは、使用されたブラウザーが Internet Explorer であるときは、Internet Explorer ブラウザーによるポップアップ ウィンドウの処理に関連する既知の問題のために、loginRedirect メソッドと acquireTokenRedirect メソッドが使用されます。The above code uses the loginRedirect and acquireTokenRedirect methods when the browser used is Internet Explorer due to a known issue related to handling of popup windows by Internet Explorer browser.

取得したトークンを使用して Microsoft Graph API を呼び出すCall the Microsoft Graph API using the token you just obtained

次のコードを index.html ファイルの <script></script> タグ内に追加します。Add the following code to your index.html file within the <script></script> tags:

function callMSGraph(theUrl, accessToken, callback) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200)
            callback(JSON.parse(this.responseText));
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous
    xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
    xmlHttp.send();
}

保護された API に対する REST 呼び出しの実行についての詳細More information on making a REST call against a protected API

このガイドで作成したサンプル アプリケーションでは、callMSGraph() メソッドを使用して、トークンが必要な保護されたリソースに対して HTTP GET 要求を実行し、呼び出し元にその内容を返します。In the sample application created by this guide, the callMSGraph() method is used to make an HTTP GET request against a protected resource that requires a token and then return the content to the caller. このメソッドは、取得したトークンを HTTP Authorization ヘッダー に追加します。This method adds the acquired token in the HTTP Authorization header. このガイドで作成したサンプル アプリケーションのリソースは、ユーザーのプロファイル情報を表示する Microsoft Graph API me エンドポイントです。For the sample application created by this guide, the resource is the Microsoft Graph API me endpoint – which displays the user's profile information.

ユーザーをサインアウトするメソッドの追加Add a method to sign out the user

次のコードを index.html ファイルの <script></script> タグ内に追加します。Add the following code to your index.html file within the <script></script> tags:

/**
 * Sign out the user
 */
 function signOut() {
     myMSALObj.logout();
 }

アプリケーションの登録Register your application

  1. アプリケーションを登録するために、Azure portal にサインインします。Sign in to the Azure portal to register an application.
  2. ご利用のアカウントで複数の Azure AD テナントにアクセスできる場合は、右上隅でアカウントを選択し、ポータルのセッションを目的のテナントに設定します。If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the desired Azure AD tenant.
  3. 左側のナビゲーション ウィンドウで、[Azure Active Directory] サービスを選択し、[アプリの登録 (プレビュー)] > [新規登録] を選択します。In the left-hand navigation pane, select the Azure Active Directory service, and then select App registrations (Preview) > New registration.
  4. [アプリケーションの登録] ページが表示されたら、アプリケーションの名前を入力します。When the Register an application page appears, enter a name for your application.
  5. [サポートされているアカウントの種類] で、[Accounts in any organizational directory and personal Microsoft accounts](任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント) を選択します。Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.
  6. [リダイレクト URI] セクションで、Webプラットフォームを選択し、ご使用の Web サーバーに基づいてアプリケーションの URL に値を設定します。Under the Redirect URI section, select the Web platform and set the value to the application's URL based on your web server. Visual Studio と Node でリダイレクト URL を設定および取得する方法の手順については、次のセクションを参照してください。See the sections below for instructions on how to set and obtain the redirect URL in Visual Studio and Node.
  7. 終了したら、[登録] を選択します。When finished, select Register.
  8. アプリの [概要] ページで、[Application (client) ID](アプリケーション (クライアント) ID) の値を書き留めます。On the app Overview page, note down the Application (client) ID value.
  9. このクイック スタートでは、暗黙的な許可フローを有効にする必要があります。This quickstart requires the Implicit grant flow to be enabled. 登録済みのアプリケーションの左側のナビゲーション ウィンドウで、[認証] を選択します。In the left-hand navigation pane of the registered application, select Authentication.
  10. [詳細設定][暗黙的な許可] で、[ID トークン][アクセス トークン] の両方のチェック ボックスをオンにします。In Advanced settings, under Implicit grant, enable both ID tokens and Access tokens checkboxes. このアプリではユーザーをサインインし、API を呼び出す必要があるため、ID トークンとアクセス トークンが必要になります。ID tokens and access tokens are required since this app needs to sign in users and call an API.
  11. [保存] を選択します。Select Save.

Node のリダイレクト URL の設定Setting the redirect URL for Node

Node.js の場合は、Web サーバーのポートを server.js ファイルで設定できます。For Node.js, you can set the web server port in the server.js file. このチュートリアルでは、参照用にポート 30662 を使用しますが、その他に使用可能なポートも使用できます。This tutorial uses the port 30662 for reference but you can use any other available port. 下記の手順に従って、アプリケーションの登録情報内にリダイレクト URL を設定します。Follow the instructions below to set up a redirect URL in the application registration information:

  • [アプリケーションの登録] に戻り、http://localhost:30662/Redirect URL として設定するか、カスタム TCP ポートを使用する場合は http://localhost:[port]/ ([port] はカスタム TCP ポート番号) を使用します。Switch back to the Application Registration and set http://localhost:30662/ as a Redirect URL, or use http://localhost:[port]/ if you are using a custom TCP port (where [port] is the custom TCP port number).

リダイレクト URL を取得するための Visual Studio での手順Visual Studio instructions for obtaining the redirect URL

リダイレクト URL を取得するには、次の手順に従います。Follow these steps to obtain the redirect URL:

  1. ソリューション エクスプローラーでプロジェクトを選択し、[プロパティ] ウィンドウを確認します。In Solution Explorer, select the project and look at the Properties window. [プロパティ] ウィンドウが表示されない場合は、F4 キーを押します。If you don’t see a Properties window, press F4.
  2. URL からクリップボードに値をコピーします。Copy the value from URL to the clipboard:
    プロジェクトのプロパティProject properties
  3. [アプリケーションの登録] に戻り、[リダイレクト URL] として値を設定します。Switch back to the Application Registration and set the value as a Redirect URL.

JavaScript SPA の構成Configure your JavaScript SPA

  1. プロジェクトの設定中に作成された index.html ファイルで、アプリケーション登録情報を追加します。In the index.html file created during project setup, add the application registration information. index.html ファイルの本文の <script></script> タグ内で、先頭に次のコードを追加します。Add the following code at the top within the <script></script> tags in the body of your index.html file:

    var applicationConfig = {
        clientID: "Enter_the_Application_Id_here",
        authority: "https://login.microsoftonline.com/common",
        graphScopes: ["user.read"],
        graphEndpoint: "https://graph.microsoft.com/v1.0/me"
    };
    
  1. Enter the application Id here を、先ほど登録したアプリケーション ID に置き換えます。Replace Enter the application Id here with the application ID you just registered.

コードのテストTest your code

ノードでのテストTest with Node

Visual Studio を使用していない場合は、お使いの Web サーバーが開始されていることを確認します。If you're not using Visual Studio, make sure your web server is started.

  1. index.html ファイルの場所に基づく TCP ポートをリッスンするように、サーバーを構成します。Configure the server to listen to a TCP port that's based on the location of your index.html file. ノードの場合、アプリケーション フォルダーからコマンド ライン プロンプトで次のコマンドを実行することで、Web サーバーを起動してポートをリッスンします。For Node, start the web server to listen to the port by running the following commands on a command line prompt from the application folder:

    npm install
    node server.js
    
  2. ブラウザーを開き、「 http://localhost:30662」または「 http://localhost:{ポート}」と入力します (ここで、"ポート" は Web サーバーがリッスンしているポートです)。Open the browser and type http://localhost:30662 or http://localhost:{port} where port is the port that your web server is listening to. index.html ファイルの内容と [サインイン] ボタンが表示されるはずです。You should see the contents of your index.html file and the Sign In button.

Visual Studio でのテストTest with Visual Studio

Visual Studio を使用している場合は、プロジェクト ソリューションを選択したことを確認し、F5 キーを押してプロジェクトを実行します。If you're using Visual Studio, make sure to select the project solution and press F5 to run your project. ブラウザーで http://localhost:{ポート} の場所を開くと、[サインイン] ボタンが表示されます。The browser opens to the http://localhost:{port} location and you see the Sign In button.

アプリケーションのテストTest your application

ブラウザーに index.html ファイルが読み込まれたら、[サインイン] をクリックします。After the browser loads your index.html file, click Sign In. Microsoft Azure Active Directory (Azure AD) v2.0 エンドポイントを使用してサインインするように求められます。You will be prompted to sign in with the Microsoft Azure Active Directory (Azure AD) v2.0 endpoint:

JavaScript SPA アカウントにサインインする

アプリケーションに初めてサインインするとき、アプリケーションがプロファイルにアクセスし、サインインできることへの同意を求められます。The first time that you sign in to your application, you're prompted to provide your consent to allow the application to access your profile and to sign you in:

アプリケーションによるアクセスに同意する

アプリケーションの結果を表示するView application results

サインイン後は、ページに Microsoft Graph API の応答が表示され、そこに、返されたユーザー プロファイル情報が表示されるはずです。After you sign in, you should see your user profile information returned in the Microsoft Graph API response displayed on the page.

Microsoft Graph API 呼び出しから期待される結果

スコープと委任されたアクセス許可の詳細More information about scopes and delegated permissions

Microsoft Graph API は、ユーザーのプロファイルを読み込むためにスコープ user.read を必要とします。The Microsoft Graph API requires the user.read scope to read a user's profile. このスコープは既定で、登録ポータルに登録されているすべてのアプリケーションで自動的に追加されます。This scope is automatically added by default in every application that's registered on the registration portal. Microsoft Graph の他の API や、バックエンド サーバーのカスタム API には、追加のスコープが必要な場合があります。Other APIs for Microsoft Graph, as well as custom APIs for your back-end server, might require additional scopes. たとえば、Microsoft Graph API には、ユーザーの予定表を表示するための Calendars.Read スコープが必要です。For example, the Microsoft Graph API requires the Calendars.Read scope to list the user’s calendars.

アプリケーションのコンテキストでユーザーの予定表にアクセスするには、Calendars.Read の委任されたアクセス許可をアプリケーション登録情報に追加します。To access the user’s calendars in the context of an application, add the Calendars.Read delegated permission to the application registration information. 次に、acquireTokenSilent の呼び出しに Calendars.Read スコープを追加します。Then, add the Calendars.Read scope to the acquireTokenSilent call.

注意

スコープの数を増やすと、ユーザーは追加の同意を求められることがあります。The user might be prompted for additional consents as you increase the number of scopes.

バックエンド API でスコープを必要としない (推奨されません) 場合は、トークンを取得するための呼び出し内のスコープとして clientId を使用できます。If a back-end API doesn't require a scope (not recommended), you can use the clientId as the scope in the calls to acquire tokens.

ヘルプとサポートHelp and support

サポートが必要な場合、問題を報告する場合、またはサポート オプションの詳細を確認する場合は、次の記事を参照してください。If you need help, want to report an issue, or want to learn more about your support options, see the following article: