チュートリアル: 認証コードフローを使用する JavaScript シングルページアプリを作成する - Microsoft identity platform

[アーティクル]
10/25/2023

このチュートリアルでは、ユーザーのサインインを行い、PKCE による認証コードフローを使用して Microsoft Graph を呼び出す JavaScript シングルページアプリケーション (SPA) を構築します。構築する SPA では、JavaScript v2.0 用の Microsoft Authentication Library (MSAL) を使用します。

このチュートリアルの内容:

PKCE を使用した、OAuth 2.0 認証コードフローの実行
個人用 Microsoft アカウントと職場または学校アカウントへのサインイン
アクセストークンの取得
Microsoft ID プラットフォームから取得したアクセストークンを必要とする Microsoft Graph または独自 API の呼び出し

MSAL.js 2.0 は、ブラウザーで暗黙的な許可のフローではなく承認コードフローをサポートすることで、MSAL.js 1.0 よりも強化されています。 MSAL.js 2.0 では、暗黙的フローはサポートされていません。

前提条件

ローカル Web サーバーを実行するための Node.js
Visual Studio Code または別のコードエディター

チュートリアルアプリの動作

Diagram showing the authorization code flow in a single-page application

このチュートリアルで作成するアプリケーションにより、JavaScript SPA では、Microsoft ID プラットフォームからセキュリティトークンを取得して、Microsoft Graph API に対してクエリを実行できるようになります。このシナリオでは、ユーザーのサインイン後に、アクセストークンが要求され、HTTP 要求の Authorization ヘッダーに追加されます。トークンの取得と更新は、Microsoft Authentication Library for JavaScript (MSAL.js) によって処理されます。

このチュートリアルでは、JavaScript v2.0 ブラウザーパッケージ用の Microsoft Authentication Library である MSAL.js が使用されます。

完成したコードサンプルを入手する

代わりに、ms-identity-javascript-v2 リポジトリを複製することで、このチュートリアルの完成したサンプルプロジェクトをダウンロードできます。

git clone https://github.com/Azure-Samples/ms-identity-javascript-v2.git

ダウンロードしたプロジェクトをローカル開発環境で実行するには、まず、「プロジェクトを作成する」の手順 1 で説明されているように、アプリケーション用の localhost サーバーを作成します。完了したら、構成手順に進んでコードサンプルを構成できます。

チュートリアルを続行してアプリケーションを自分でビルドする場合は、次のセクション「プロジェクトを作成する」に進みます。

プロジェクトを作成する

Node.js のインストール後、アプリケーションをホストするフォルダー (msal-spa-tutorial など) を作成します。

次に、index.html ファイルを提供する小規模な Express Web サーバーを実装します。

最初に、ターミナル内のプロジェクトディレクトリに移動し、次の npm コマンドを実行します。
```
npm init -y
npm install @azure/msal-browser
npm install express
npm install morgan
npm install yargs
```

次に、server.js という名前のファイルを作成し、次のコードを追加します。

const express = require('express');
const morgan = require('morgan');
const path = require('path');

const DEFAULT_PORT = process.env.PORT || 3000;

// initialize express.
const app = express();

// Initialize variables.
let port = DEFAULT_PORT;

// Configure morgan module to log all requests.
app.use(morgan('dev'));

// Setup app folders.
app.use(express.static('app'));

// Set up a route for index.html
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

// Start the server.
app.listen(port);
console.log(`Listening on port ${port}...`);

SPA UI を作成する

プロジェクトディレクトリに app フォルダーを作成し、その中に JavaScript SPA 用の index.html ファイルを作成します。このファイルは、Bootstrap 4 Framework で作成された UI を実装し、構成、認証、および API 呼び出しのためのスクリプトファイルをインポートします。

Index.html ファイルに、次のコードを追加します。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Microsoft identity platform</title>
  <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">

   <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
  <script src="https://alcdn.msauth.net/browser/2.30.0/js/msal-browser.js"
    integrity="sha384-o4ufwq3oKqc7IoCcR08YtZXmgOljhTggRwxP2CLbSqeXGtitAxwYaUln/05nJjit"
    crossorigin="anonymous"></script>
  
  <!-- adding Bootstrap 4 for UI components  -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">Microsoft identity platform</a>
    <div class="btn-group ml-auto dropleft">
      <button type="button" id="SignIn" class="btn btn-secondary" onclick="signIn()">
        Sign In
      </button>
    </div>
  </nav>
  <br>
  <h5 class="card-header text-center">Vanilla JavaScript SPA calling MS Graph API with MSAL.js</h5>
  <br>
  <div class="row" style="margin:auto">
    <div id="card-div" class="col-md-3" style="display:none">
      <div class="card text-center">
        <div class="card-body">
          <h5 class="card-title" id="WelcomeMessage">Please sign-in to see your profile and read your mails</h5>
          <div id="profile-div"></div>
          <br>
          <br>
          <button class="btn btn-primary" id="seeProfile" onclick="seeProfile()">See Profile</button>
          <br>
          <br>
          <button class="btn btn-primary" id="readMail" onclick="readMail()">Read Mails</button>
        </div>
      </div>
    </div>
    <br>
    <br>
    <div class="col-md-4">
      <div class="list-group" id="list-tab" role="tablist">
      </div>
    </div>
    <div class="col-md-5">
      <div class="tab-content" id="nav-tabContent">
      </div>
    </div>
  </div>
  <br>
  <br>

  <!-- importing bootstrap.js and supporting js libraries -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

  <!-- importing app scripts (load order is important) -->
  <script type="text/javascript" src="./authConfig.js"></script>
  <script type="text/javascript" src="./graphConfig.js"></script>
  <script type="text/javascript" src="./ui.js"></script>

  <!-- <script type="text/javascript" src="./authRedirect.js"></script>   -->
  <!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
  <script type="text/javascript" src="./authPopup.js"></script>
  <script type="text/javascript" src="./graph.js"></script>
</body>

</html>

次に、再び app フォルダーで、ui.js という名前のファイルを作成し、次のコードを追加します。このファイルは、DOM 要素にアクセスして更新します。

// Select DOM elements to work with
const welcomeDiv = document.getElementById("WelcomeMessage");
const signInButton = document.getElementById("SignIn");
const cardDiv = document.getElementById("card-div");
const mailButton = document.getElementById("readMail");
const profileButton = document.getElementById("seeProfile");
const profileDiv = document.getElementById("profile-div");

function showWelcomeMessage(username) {
    // Reconfiguring DOM elements
    cardDiv.style.display = 'initial';
    welcomeDiv.innerHTML = `Welcome ${username}`;
    signInButton.setAttribute("onclick", "signOut();");
    signInButton.setAttribute('class', "btn btn-success")
    signInButton.innerHTML = "Sign Out";
}

function updateUI(data, endpoint) {
    console.log('Graph API responded at: ' + new Date().toString());

    if (endpoint === graphConfig.graphMeEndpoint) {
        profileDiv.innerHTML = ''
        const title = document.createElement('p');
        title.innerHTML = "<strong>Title: </strong>" + data.jobTitle;
        const email = document.createElement('p');
        email.innerHTML = "<strong>Mail: </strong>" + data.mail;
        const phone = document.createElement('p');
        phone.innerHTML = "<strong>Phone: </strong>" + data.businessPhones[0];
        const address = document.createElement('p');
        address.innerHTML = "<strong>Location: </strong>" + data.officeLocation;
        profileDiv.appendChild(title);
        profileDiv.appendChild(email);
        profileDiv.appendChild(phone);
        profileDiv.appendChild(address);

    } else if (endpoint === graphConfig.graphMailEndpoint) {
        if (!data.value) {
            alert("You do not have a mailbox!")
        } else if (data.value.length < 1) {
            alert("Your mailbox is empty!")
        } else {
            const tabContent = document.getElementById("nav-tabContent");
            const tabList = document.getElementById("list-tab");
            tabList.innerHTML = ''; // clear tabList at each readMail call

            data.value.map((d, i) => {
                // Keeping it simple
                if (i < 10) {
                    const listItem = document.createElement("a");
                    listItem.setAttribute("class", "list-group-item list-group-item-action")
                    listItem.setAttribute("id", "list" + i + "list")
                    listItem.setAttribute("data-toggle", "list")
                    listItem.setAttribute("href", "#list" + i)
                    listItem.setAttribute("role", "tab")
                    listItem.setAttribute("aria-controls", i)
                    listItem.innerHTML = d.subject;
                    tabList.appendChild(listItem)

                    const contentItem = document.createElement("div");
                    contentItem.setAttribute("class", "tab-pane fade")
                    contentItem.setAttribute("id", "list" + i)
                    contentItem.setAttribute("role", "tabpanel")
                    contentItem.setAttribute("aria-labelledby", "list" + i + "list")
                    contentItem.innerHTML = "<strong> from: " + d.from.emailAddress.address + "</strong><br><br>" + d.bodyPreview + "...";
                    tabContent.appendChild(contentItem);
                }
            });
        }
    }
}

アプリケーションの登録

「シングルページアプリケーション: アプリの登録」の手順に従って、SPA のアプリ登録を作成します。

「リダイレクト URI: MSAL.js 2.0 と認証コードフロー」の手順で、このチュートリアルのアプリケーションを実行する既定の場所である「http://localhost:3000」を入力します。

別のポートを使用する場合は、「http://localhost:<port>」と入力します。ここで、<port> は使用する TCP ポートの番号です。 3000 以外のポート番号を指定した場合は、必要に応じて server.js も、使用するポート番号で更新します。

JavaScript SPA の構成

app フォルダー内に authConfig.js という名前のファイルを作成し、認証用の構成パラメーターを記述します。さらに、次のコードを追加します。

/**
 * 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 
 */
const msalConfig = {
    auth: {
        // 'Application (client) ID' of app registration in Azure portal - this value is a GUID
        clientId: "Enter_the_Application_Id_Here",
        // Full directory URL, in the form of https://login.microsoftonline.com/<tenant-id>
        authority: "Enter_the_Cloud_Instance_Id_HereEnter_the_Tenant_Info_Here",
        // Full redirect URL, in form of http://localhost:3000
        redirectUri: "Enter_the_Redirect_Uri_Here",
    },
    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 msal.LogLevel.Error:		
                        console.error(message);		
                        return;		
                    case msal.LogLevel.Info:		
                        console.info(message);		
                        return;		
                    case msal.LogLevel.Verbose:		
                        console.debug(message);		
                        return;		
                    case msal.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://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
 */
const loginRequest = {
    scopes: ["User.Read"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
const tokenRequest = {
    scopes: ["User.Read", "Mail.Read"],
    forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

引き続き app フォルダー内で、graphConfig.js という名前のファイルを作成します。次のコードを追加して、Microsoft Graph API を呼び出すための構成パラメーターをアプリケーションに指定します。

// Add here the endpoints for MS Graph API services you would like to use.
const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me/messages"
};

次の説明に従って、graphConfig セクションの値を変更します。

Enter_the_Graph_Endpoint_Here は、アプリケーションが通信する必要がある、Microsoft Graph API のインスタンスです。
- グローバル Microsoft Graph API エンドポイントの場合は、この文字列の両方のインスタンスを https://graph.microsoft.com に置き換えます。
- 各国のクラウドのデプロイにおけるエンドポイントの場合は、Microsoft Graph のドキュメントで「各国のクラウドでのデプロイ」を参照してください。

グローバルエンドポイントを使用している場合、graphConfig.js 内の graphMeEndpoint および graphMailEndpoint の値は、次のようにします。

graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
graphMailEndpoint: "https://graph.microsoft.com/v1.0/me/messages"

ポップアップ

app フォルダーで authPopup.js という名前のファイルを作成し、ログインポップアップ用に次の認証とトークン取得のコードを追加します。

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

function selectAccount() {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */

    const currentAccounts = myMSALObj.getAllAccounts();
    if (currentAccounts.length === 0) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add choose account code here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username;
        showWelcomeMessage(username);
    }
}

function handleResponse(response) {

    /**
     * To see the full list of response object properties, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
     */

    if (response !== null) {
        username = response.account.username;
        showWelcomeMessage(username);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginPopup(loginRequest)
        .then(handleResponse)
        .catch(error => {
            console.error(error);
        });
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };

    myMSALObj.logoutPopup(logoutRequest);
}

function getTokenPopup(request) {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */
    request.account = myMSALObj.getAccountByUsername(username);
    
    return myMSALObj.acquireTokenSilent(request)
        .catch(error => {
            console.warn("silent token acquisition fails. acquiring token using popup");
            if (error instanceof msal.InteractionRequiredAuthError) {
                // fallback to interaction when silent call fails
                return myMSALObj.acquireTokenPopup(request)
                    .then(tokenResponse => {
                        console.log(tokenResponse);
                        return tokenResponse;
                    }).catch(error => {
                        console.error(error);
                    });
            } else {
                console.warn(error);   
            }
    });
}

function seeProfile() {
    getTokenPopup(loginRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

function readMail() {
    getTokenPopup(tokenRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMailEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

selectAccount();

リダイレクト

app フォルダーに authRedirect.js という名前のファイルを作成し、ログインリダイレクト用に次の認証とトークン取得コードを追加します。

// Create the main myMSALObj instance
// configuration parameters are located at authConfig.js
const myMSALObj = new msal.PublicClientApplication(msalConfig);

let username = "";

/**
 * A promise handler needs to be registered for handling the
 * response returned from redirect flow. For more information, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/acquire-token.md
 */
myMSALObj.handleRedirectPromise()
    .then(handleResponse)
    .catch((error) => {
        console.error(error);
    });

function selectAccount () {

    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */

    const currentAccounts = myMSALObj.getAllAccounts();

    if (currentAccounts.length === 0) {
        return;
    } else if (currentAccounts.length > 1) {
        // Add your account choosing logic here
        console.warn("Multiple accounts detected.");
    } else if (currentAccounts.length === 1) {
        username = currentAccounts[0].username;
        showWelcomeMessage(username);
    }
}

function handleResponse(response) {
    if (response !== null) {
        username = response.account.username;
        showWelcomeMessage(username);
    } else {
        selectAccount();
    }
}

function signIn() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    myMSALObj.loginRedirect(loginRequest);
}

function signOut() {

    /**
     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
     */

    const logoutRequest = {
        account: myMSALObj.getAccountByUsername(username),
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
    };

    myMSALObj.logoutRedirect(logoutRequest);
}

function getTokenRedirect(request) {
    /**
     * See here for more info on account retrieval: 
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
     */
    request.account = myMSALObj.getAccountByUsername(username);

    return myMSALObj.acquireTokenSilent(request)
        .catch(error => {
            console.warn("silent token acquisition fails. acquiring token using redirect");
            if (error instanceof msal.InteractionRequiredAuthError) {
                // fallback to interaction when silent call fails
                return myMSALObj.acquireTokenRedirect(request);
            } else {
                console.warn(error);   
            }
        });
}

function seeProfile() {
    getTokenRedirect(loginRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

function readMail() {
    getTokenRedirect(tokenRequest)
        .then(response => {
            callMSGraph(graphConfig.graphMailEndpoint, response.accessToken, updateUI);
        }).catch(error => {
            console.error(error);
        });
}

コードの動作

ユーザーが初めて [Sign In] ボタンを選択すると、signIn メソッドによって、ユーザーがサインインするための loginPopup が呼び出されます。 loginPopup メソッドによって、"Microsoft ID プラットフォームエンドポイント" でポップアップウィンドウが開き、ユーザーの資格情報が要求されて検証が行われます。サインインに成功すると、msal.js によって認証コードフローが開始されます。

この時点で、PKCE で保護された認証コードが CORS によって保護されたトークンエンドポイントに送信され、トークンと交換されます。アプリケーションによって ID トークン、アクセストークン、および更新トークンが受信され、msal.js によって処理されて、トークンに含まれる情報がキャッシュされます。

ID トークンには、表示名など、ユーザーについての基本的な情報が含まれています。 ID トークンによって提供されるデータを使用する予定がある場合は、アプリケーションの有効なユーザーに対してトークンが発行されたことを保証するために、バックエンドサーバーはトークンを検証する "必要があります"。

アクセストークンの有効期間は限られており、24 時間後に有効期限が切れます。更新トークンは、新しいアクセストークンを自動的に取得するために使用できます。

このチュートリアルで作成した SPA は、acquireTokenSilent、acquireTokenPopup、またはその両方を呼び出して、Microsoft Graph API に対するユーザープロファイル情報の照会に使用される "アクセストークン" を取得します。 ID トークンを検証するサンプルが必要な場合は、GitHub の active-directory-javascript-singlepageapp-dotnet-webapi-v2 サンプルアプリケーションを参照してください。このサンプルでは、トークンの検証に ASP.NET Web API を使用しています。

ユーザートークンを対話形式で取得する

最初のサインインの後は、保護されたリソースへのアクセスが必要になるたびに、アプリがユーザーに再認証を行うように要求する (つまり、トークンを要求する) べきではありません。このような再認証要求を防ぐには、acquireTokenSilent を呼び出します。ただし、ユーザーに Microsoft ID プラットフォームとのやり取りを強制しなければならない場合があります。次に例を示します。

パスワードの有効期限が切れているため、ユーザーは資格情報を再入力する必要がある。
アプリケーションがリソースへのアクセスを要求し、ユーザーの同意が必要である。
2 要素認証が必須である。

acquireTokenPopup を呼び出すと、ポップアップウィンドウが表示されます (または、acquireTokenRedirect によってユーザーが Microsoft ID プラットフォームにリダイレクトされます)。ユーザーはそのウィンドウ内で、自分の資格情報の確認、必要なリソースへの同意、2 要素認証の完了のいずれかの方法で操作を行う必要があります。

ユーザートークンを自動で取得する

acquireTokenSilent メソッドは、ユーザーの操作なしでトークンの取得や更新を処理します。最初に loginPopup (または loginRedirect) を実行した後、後続の呼び出しでは、通常、acquireTokenSilent メソッドを使用して、保護されたリソースにアクセスするためのトークンを取得します (トークンを要求または更新するための呼び出しは自動的に行われます)。場合によっては、acquireTokenSilent が失敗することがあります。たとえば、ユーザーのパスワードの期限が切れている場合です。アプリケーションでは、この例外を 2 つの方法で処理できます。

すぐに acquireTokenPopup を呼び出し、ユーザーサインインプロンプトをトリガーします。オンラインアプリケーション (ユーザーが使用できる非認証コンテンツが含まれていないアプリケーション) の場合は、一般に、この方法で処理します。このガイドの設定で生成したサンプルでは、このパターンを使用しています。
ユーザーが適切なタイミングでサインインできるようにするか、アプリケーションが後で acquireTokenSilent を再試行できるように、ユーザーに対して対話形式でのサインインが必要であることを視覚的に示します。他に中断なく使用できる機能がアプリケーションにある場合は、一般に、この方法が使用されます。たとえば、使用可能な非認証コンテンツがアプリケーションに含まれている場合が考えられます。この場合、ユーザーは、保護されたリソースにアクセスしたり、古くなった情報を更新したりするためにサインインするタイミングを決定できます。

注意

このチュートリアルでは、既定で loginPopup および acquireTokenPopup メソッドを使用します。 Internet Explorer を使用している場合は、Internet Explorer とポップアップウィンドウに既知の問題があるため、loginRedirect および acquireTokenRedirect メソッドを使用することをお勧めします。リダイレクトメソッドを使用して同じ結果を実現する例については、GitHub の authRedirect.js を参照してください。

Microsoft Graph API を呼び出す

app フォルダーに graph.js という名前のファイルを作成し、Microsoft Graph API への REST 呼び出しを行うために、次のコードを追加します。

/** 
 * Helper function to call MS Graph API endpoint
 * using the authorization bearer token scheme
*/
function callMSGraph(endpoint, token, callback) {
    const headers = new Headers();
    const bearer = `Bearer ${token}`;

    headers.append("Authorization", bearer);

    const options = {
        method: "GET",
        headers: headers
    };

    console.log('request made to Graph API at: ' + new Date().toString());

    fetch(endpoint, options)
        .then(response => response.json())
        .then(response => callback(response, endpoint))
        .catch(error => console.log(error));
}

このチュートリアルで作成するサンプルアプリケーションでは、callMSGraph() メソッドを使用して、トークンが必要な保護されたリソースに対して HTTP GET 要求を実行します。その後、この要求からその内容が呼び出し元に返されます。このメソッドは、取得したトークンを HTTP Authorization ヘッダーに追加します。このチュートリアルで作成したサンプルアプリケーションでは、保護されているリソースは、サインインユーザーのプロファイル情報を表示する Microsoft Graph API me エンドポイントです。

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

これでアプリケーションの作成が完了し、Node.js Web サーバーを起動して、アプリの機能をテストする準備ができました。

プロジェクトフォルダーのルート内から次のコマンドを実行して、Node.js Web サーバーを起動します。
```
npm start
```
ブラウザーで http://localhost:3000 または http://localhost:<port> に移動します。ここで、<port> は、Web サーバーがリッスンしているポートです。 index.html ファイルの内容と [サインイン] ボタンが表示されるはずです。

ブラウザーに index.html ファイルが読み込まれたら、 [サインイン] を選択します。 Microsoft ID プラットフォームにサインインするように求められます。

Web browser displaying sign-in dialog

アプリケーションへの初回サインイン時には、お使いのプロファイルへのアクセスを許可してサインインすることを求められます。

Content dialog displayed in web browser

要求されたアクセス許可に同意すると、Web アプリケーションにはユーザー名が表示されます。これは、ログインが成功したことを示しています。

Results of a successful sign-in in the web browser

Graph API を呼び出す

サインインした後、 [See Profile] を選択して、Microsoft Graph API への呼び出しからの応答で返されるユーザープロファイル情報を表示します。

スコープと委任されたアクセス許可の詳細

Microsoft Graph API には、ユーザーのプロファイルを読み取るための user.read スコープが必要です。既定では、このスコープは、Microsoft Entra 管理センターに登録されているすべてのアプリケーションに自動的に追加されます。 Microsoft Graph の他の API や、バックエンドサーバーのカスタム API には、追加のスコープが必要な場合があります。たとえば、Microsoft Graph API では、ユーザーのメールを一覧表示するために Mail.Read スコープが必要です。

スコープを追加すると、追加したスコープに対して追加の同意を求めるメッセージがユーザーに表示される場合があります。

バックエンド API でスコープを必要としない (推奨されません) 場合は、トークンを取得するための呼び出しでのスコープとして clientId を使用できます。

ヘルプとサポート

サポートが必要な場合、問題をレポートする場合、またはサポートオプションについて知りたい場合は、開発者向けのヘルプとサポートに関するページを参照してください。

次のステップ

次の複数パートのチュートリアルシリーズで、ユーザーをサインインさせる React シングルページアプリケーション (SPA) をビルドして詳細を学習します。

チュートリアル:認証コード フローを使用して、ユーザーをサインインさせ、JavaScript シングルページ アプリ (SPA) から Microsoft Graph API を呼び出す

前提条件

チュートリアル アプリの動作

完成したコード サンプルを入手する