ユーザーをサインインして、JavaScript シングルページ アプリケーション (SPA) から Microsoft Graph API を呼び出すSign in users and call the Microsoft Graph API from a JavaScript single-page application (SPA)

このガイドでは、JavaScript シングルページ アプリケーション (SPA) が個人アカウント、または職場および学校アカウントにサインインし、アクセス トークンを取得し、Microsoft Graph API またはアクセス トークンを必要とする他の API を、Microsoft ID プラットフォーム エンドポイントから呼び出す方法について説明します。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 Microsoft identity platform endpoint.

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

このチュートリアルで生成されたサンプル アプリの動作の紹介

詳細情報More Information

このガイドで作成したサンプル アプリケーションにより、JavaScript SPA で、Microsoft Graph API または Microsoft ID プラットフォーム エンドポイントからトークンを受け取る 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 Microsoft identity platform 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 は、"Microsoft ID プラットフォーム エンドポイント" を対象とします。これにより、個人アカウント、または学校および職場アカウントでサインインして、トークンを取得することができます。msal.js targets the Microsoft identity platform endpoint - which enables personal, school and work accounts to sign in and acquire tokens. "Microsoft ID プラットフォーム エンドポイント" にはいくつかの制限があります。The Microsoft identity platform 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 サーバーまたはプロジェクトの設定Set up your web server or project

代わりにこのサンプルのプロジェクトをダウンロードすることもできます。Prefer to download this sample's project instead? 次のいずれかを実行します。Do either of the following:

その後、コード サンプルを構成してから実行するために、構成手順に進みます。And then, to configure the code sample before you execute it, skip to the configuration step.

前提条件Prerequisites

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

  • Node.js を使用してプロジェクトを実行する場合は、Visual Studio Code などの 統合開発環境 (IDE) をインストールしてプロジェクト ファイルを編集します。If you're using Node.js to run the project, install an integrated development environment (IDE), such as Visual Studio Code, to edit the project files.

  • このガイドの手順は Node.js と Visual Studio 2017 の両方に基づいていますが、その他の任意の開発環境または Web サーバーを使用できます。Instructions in this guide are based on both Node.js and Visual Studio 2017, but you can use any other development environment or web server.

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

オプション 1:Node.js またはその他の Web サーバーOption 1: Node.js or other web servers

Node.js がインストールされていることを確認し、以下を実行します。Make sure you have installed Node.js, and then do the following:

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

オプション 2:Visual StudioOption 2: Visual Studio

Visual Studio を使用しているときに、新しいプロジェクトを作成する場合は、以下を行います。If you're using Visual Studio and are creating a new project, do the following:

  1. Visual Studio で、 [ファイル] > [新規] > [プロジェクト] の順に選択します。In Visual Studio, select 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 then select OK.
  4. [新しい ASP.NET Web アプリケーション][空] を選択します。Under New ASP.NET Web Application, select Empty.

SPA UI を作成するCreate the SPA UI

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

  2. Index.html ファイルに、次のコードを追加します。In the index.html file, add the following code:

    <!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/1.0.0/js/msal.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>
    

    ヒント

    上記のスクリプトにある MSAL.js のバージョンを、MSAL.js リリースの最新のリリース バージョンに置き換えることができます。You can replace the version of MSAL.js in the preceding script with the latest released version under MSAL.js releases.

ユーザーのサインインに 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:

    var msalConfig = {
        auth: {
            clientId: "Enter_the_Application_Id_here"
            authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here"
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };
    
    var graphConfig = {
        graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
    };
    
    // this can be used for login or token request, however in more complex situations
    // this can have diverging options
    var requestObj = {
        scopes: ["user.read"]
    };
    
    var myMSALObj = new Msal.UserAgentApplication(msalConfig);
    // Register Callbacks for redirect flow
    myMSALObj.handleRedirectCallback(authRedirectCallBack);
    
    
    function signIn() {
    
        myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
            //Login Success
            showWelcomeMessage();
            acquireTokenPopupAndCallMSGraph();
        }).catch(function (error) {
            console.log(error);
        });
    }
    
    function acquireTokenPopupAndCallMSGraph() {
        //Always start with acquireTokenSilent to obtain a token in the signed in user from cache
        myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
            callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
        }).catch(function (error) {
            console.log(error);
            // Upon acquireTokenSilent failure (due to consent or interaction or login required ONLY)
            // Call acquireTokenPopup(popup window)
            if (requiresInteraction(error.errorCode)) {
                myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {
                    callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
                }).catch(function (error) {
                    console.log(error);
                });
            }
        });
    }
    
    
    function graphAPICallback(data) {
        document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
    }
    
    
    function showWelcomeMessage() {
        var divWelcome = document.getElementById('WelcomeMessage');
        divWelcome.innerHTML = 'Welcome ' + myMSALObj.getAccount().userName + "to Microsoft Graph API";
        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() {
         //Always start with acquireTokenSilent to obtain a token in the signed in user from cache
         myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
             callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
         }).catch(function (error) {
             console.log(error);
             // Upon acquireTokenSilent failure (due to consent or interaction or login required ONLY)
             // Call acquireTokenRedirect
             if (requiresInteraction(error.errorCode)) {
                 myMSALObj.acquireTokenRedirect(requestObj);
             }
         });
     }
    
    
    function authRedirectCallBack(error, response) {
        if (error) {
            console.log(error);
        }
        else {
            if (response.tokenType === "access_token") {
                callMSGraph(graphConfig.graphEndpoint, response.accessToken, graphAPICallback);
            } else {
                console.log("token type is:" + response.tokenType);
            }
        }
    }
    
    function requiresInteraction(errorCode) {
        if (!errorCode || !errorCode.length) {
            return false;
        }
        return errorCode === "consent_required" ||
            errorCode === "interaction_required" ||
            errorCode === "login_required";
    }
    
    // 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 Edge InPrivate mode, please add "isEdge" to the if check
    // can change this to default an experience outside browser use
    var loginType = isIE ? "REDIRECT" : "POPUP";
    
    if (loginType === 'POPUP') {
        if (myMSALObj.getAccount()) {// avoid duplicate code execution on page load in case of iframe and popup window.
            showWelcomeMessage();
            acquireTokenPopupAndCallMSGraph();
        }
    }
    else if (loginType === 'REDIRECT') {
        document.getElementById("SignIn").onclick = function () {
            myMSALObj.loginRedirect(requestObj);
        };
        if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
            showWelcomeMessage();
            acquireTokenRedirectAndCallMSGraph();
        }
    } else {
        console.error('Please set a valid login type');
    }
    

詳細情報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 ID プラットフォーム エンドポイント" のポップアップ ウィンドウが開かれて、ユーザーの資格情報が要求され、検証が行われます。This method results in opening a popup window with the Microsoft identity platform 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. ただし、次の例のように、ユーザーが Microsoft ID プラットフォーム エンドポイントとやり取りを行う必要がある状況があります。There are situations however that you need to force users to interact with Microsoft identity platform 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 を呼び出すとポップアップ ウィンドウが表示されます (または、acquireTokenRedirect を呼び出すとユーザーが Microsoft ID プラットフォーム エンドポイントにリダイレクトされます)。ユーザーはそこでやり取りをして、自分の資格情報の確認、要求されたリソースへの同意、または 2 要素認証の完了を行う必要があります。Calling the acquireTokenPopup results in a popup window (or acquireTokenRedirect results in redirecting users to the Microsoft identity platform 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 メソッドを使用します。This quickstart 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.

  2. お使いのアカウントで複数のテナントにアクセスできる場合は、右上でアカウントを選択した後、使用する Azure AD テナントにポータル セッションを設定します。If your account gives you access to more than one tenant, select the account at the top right, and then set your portal session to the Azure AD tenant that you want to use.

  3. 開発者用の Microsoft ID プラットフォームの [アプリの登録] ページに移動します。Go to the Microsoft identity platform for developers App registrations page.

  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, in the drop-down list, select the Web platform, and then set the value to the application URL that's based on your web server.

    Visual Studio と Node.js でのリダイレクト URL の設定と取得の詳細については、次の 2 つのセクションを参照してください。For information about setting and obtaining the redirect URL in Visual Studio and Node.js, see the next two sections.

  7. [登録] を選択します。Select Register.

  8. 後で使用するために、アプリの [概要] ページで、 [アプリケーション (クライアント) ID] の値を書き留めます。On the app Overview page, note the Application (client) ID value for later use.

  9. このクイック スタートでは、暗黙的な許可フローを有効にする必要があります。This quickstart requires the Implicit grant flow to be enabled. 登録済みのアプリケーションの左側のウィンドウで、 [認証] を選択します。In the left pane of the registered application, select Authentication.

  10. [詳細設定][暗黙的な許可] で、 [ID トークン] チェック ボックスと [アクセス トークン] チェック ボックスをオンにします。In Advanced settings, under Implicit grant, select the ID tokens and Access tokens check boxes. このアプリではユーザーのサインインを実行して API を呼び出す必要があるため、ID トークンとアクセス トークンが必要です。ID tokens and access tokens are required, because this app needs to sign in users and call an API.

  11. [保存] を選択します。Select Save.

Node.js でリダイレクト URL を設定するSet a redirect URL for Node.js

Node.js の場合は、Web サーバーのポートを server.js ファイルで設定できます。For Node.js, you can set the web server port in the server.js file. このチュートリアルでは、参照用にポート 30662 を使用しますが、使用可能なその他の任意のポートを使用できます。This tutorial uses port 30662 for reference, but you can use any other available port.

アプリケーション登録情報の中にリダイレクト URL を設定するには、 [アプリケーションの登録] ウィンドウに切り替え、以下のいずれかを行います。To set up a redirect URL in the application registration information, switch back to the Application Registration pane, and do either of the following:

  • リダイレクト URL として http://localhost:30662/ を設定します。Set http://localhost:30662/ as the Redirect URL.
  • カスタム TCP ポートを使用している場合は、 http://localhost:<port>/ を使用します (ここで、 <port> はカスタム TCP ポート番号です)。If you're using a custom TCP port, use http://localhost:<port>/ (where <port> is the custom TCP port number).

Visual Studio でリダイレクト URL を設定するSet a redirect URL for Visual Studio

Visual Studio のリダイレクト URL を取得するには、以下を行います。To obtain the redirect URL for Visual Studio, do the following:

  1. Solution Explorer で、プロジェクトを選択します。In Solution Explorer, select the project.

    [プロパティ] ウィンドウが開きます。The Properties window opens. 開かない場合は、F4 キーを押します。If it doesn't open, press F4.

    [JavaScriptSPA プロジェクトのプロパティ] ウィンドウ

  2. [URL] の値をコピーします。Copy the URL value.

  1. [アプリケーション登録] ウィンドウに切り替え、コピーした値を リダイレクト URL として貼り付けます。Switch back to the Application Registration pane, and paste the copied value as the Redirect URL.

JavaScript SPA の構成Configure your JavaScript SPA

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

    var msalConfig = {
        auth: {
            clientId: "<Enter_the_Application_Id_here>",
            authority: "https://login.microsoftonline.com/<Enter_the_Tenant_info_here>"
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };
    

    各値の説明:Where:

    • <Enter_the_Application_Id_here> は、登録したアプリケーションのアプリケーション (クライアント) ID です。<Enter_the_Application_Id_here> is the Application (client) ID for the application you registered.
    • <Enter_the_Tenant_info_here> は、次のオプションのいずれかに設定されます。<Enter_the_Tenant_info_here> is set to one of the following options:
      • お使いのアプリケーションで "この組織のディレクトリ内のアカウント" がサポートされる場合は、この値をテナント ID またはテナント名 (例: contoso.microsoft.com) に置き換えます。If your application supports Accounts in this organizational directory, replace this value with the Tenant ID or Tenant name (for example, contoso.microsoft.com).
      • お使いのアプリケーションで "任意の組織のディレクトリ内のアカウント" がサポートされる場合は、この値を organizations に置き換えますIf your application supports Accounts in any organizational directory, replace this value with organizations.
      • お使いのアプリケーションで "任意の組織のディレクトリ内のアカウントと、個人用の Microsoft アカウント" がサポートされる場合は、この値を common に置き換えます。If your application supports Accounts in any organizational directory and personal Microsoft accounts, replace this value with common. "個人用の Microsoft アカウントのみ" にサポートを制限するには、この値を consumers に置き換えます。To restrict support to Personal Microsoft accounts only, replace this value with consumers.

コードのテストTest your code

次のいずれかの環境で、自分のコードをテストします。Test your code by using either of the following environments.

Node.js でテストするTest with Node.js

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. Node.js では、アプリケーション フォルダーからコマンド ライン プロンプトで次のコマンドを実行することで、Web サーバーを起動してポートをリッスンします。For Node.js, 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://<span></span>localhost:30662」または「http://<span></span>localhost:{port} 」と入力します (ここで、port は Web サーバーがリッスンしているポートです)。In your browser, enter http://<span></span>localhost:30662 or http://<span></span>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, select the project solution, and then select F5 to run your project. ブラウザーで http://localhost:{port} の場所を開くと、 [サインイン] ボタンが表示されるはずです。The browser opens to the http://localhost:{port} location, and the Sign In button should be visible.

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

ブラウザーに index.html ファイルが読み込まれたら、 [サインイン] を選択します。After the browser loads your index.html file, select Sign In. Microsoft ID プラットフォーム エンドポイントにサインインするように求められます。You're prompted to sign in with the Microsoft identity platform endpoint:

JavaScript SPA アカウント サインイン ウィンドウ

アプリケーションの初回のサインインでは、お使いのプロファイルへのアクセス権を付与してサインインすることを求められます。The first time that you sign in to your application, you're prompted to give it access to your profile and sign you in:

[Permissions requested](アクセス許可が要求されています) ウィンドウ

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

サインインすると、お使いのユーザー プロファイル情報が Microsoft Graph API 応答に返されてページに表示されます。After you sign in, your user profile information is returned in the Microsoft Graph API response that's 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. 次に、Calendars.Read スコープを acquireTokenSilent 呼び出しに追加します。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: