次の方法で共有

クイック スタート: シングルページ アプリ (SPA) でユーザーをサインインさせ、Microsoft Graph API を呼び出す

適用対象: 白いチェック マークが付いた緑色の円。 従業員テナント緑 の円と白いチェック マーク記号。 外部テナント (詳細)

このクイック スタートでは、サンプルシングルページ アプリ (SPA) を使用して、Proof Key for Code Exchange (PKCE) で 承認コード フロー を使用してユーザーをサインインさせ、Microsoft Graph API を呼び出す方法を示します。 このサンプルでは、 Microsoft 認証ライブラリ を使用して認証を処理します。

[前提条件]

  • アクティブなサブスクリプションを持つ Azure アカウント。 アカウントをまだお持ちでない場合は、 無料でアカウントを作成してください。
  • この Azure アカウントには、アプリケーションを管理するためのアクセス許可が必要です。 以下のいずれの Microsoft Entra ロールにも、必要なアクセス許可が含まれています。
    • アプリケーション管理者
    • アプリケーション開発者
  • 従業員テナント。 既定のディレクトリを使用するか、 新しいテナントを設定できます。
  • Visual Studio Code または別のコード エディター。

サンプル アプリケーションを複製またはダウンロードする

サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。

  • サンプルを複製するには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。

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

  • .zip ファイルをダウンロードします。 名前の長さが 260 文字未満のファイル パスに抽出します。

プロジェクトを構成する

  1. IDE で、サンプルを含むプロジェクト フォルダー ms-identity-docs-code-javascript を開きます。

  2. vanillajs-spa/App/public/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: {
         clientId: "Enter_the_Application_Id_Here",
         // WORKFORCE TENANT
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //  Replace the placeholder with your tenant info
         // EXTERNAL TENANT
         // authority: "https://Enter_the_Tenant_Subdomain_Here.ciamlogin.com/", // Replace the placeholder with your tenant subdomain
        redirectUri: '/', // You must register this URI on App Registration. Defaults to window.___location.href e.g. http://localhost:3000/
        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request ___location before processing the auth code response.
    },
    cache: {
        cacheLocation: 'sessionStorage', // Configures cache ___location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
        storeAuthStateInCookie: false, // set this to true if you have to support IE
    },
    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://learn.microsoft.com/en-us/entra/identity-platform/permissions-consent-overview#openid-connect-scopes
 */
const loginRequest = {
    scopes: ["User.Read"],
};

/**
 * An optional silentRequest object can be used to achieve silent SSO
 * between applications by providing a "login_hint" property.
 */

// const silentRequest = {
//   scopes: ["openid", "profile"],
//   loginHint: "example@___domain.net"
// };

// exporting config object for jest
if (typeof exports !== 'undefined') {
    module.exports = {
        msalConfig: msalConfig,
        loginRequest: loginRequest,
    };
}
    • clientId - アプリケーションの識別子 。クライアントとも呼ばれます。 引用符で囲まれたテキストを、前に記録した アプリケーション (クライアント) ID 値に置き換えます。
    • authority - 機関は、MSAL がトークンを要求できるディレクトリを示す URL です。 Enter_the_Tenant_Info_Hereを、先ほど記録したディレクトリ (テナント) ID の値に置き換えます。
    • redirectUri - アプリケーションの リダイレクト URI 。 必要に応じて、引用符で囲まれたテキストを、前に記録したリダイレクト URI に置き換えます。

アプリケーションを実行してサインインしてサインアウトする

Node.js を使用して Web サーバーでプロジェクトを実行します。

  1. サーバーを起動するには、プロジェクト ディレクトリ内から次のコマンドを実行します。

    cd vanillajs-spa/App
npm install
npm start

  2. ターミナルに表示される https URL (https://localhost:3000など) をコピーし、ブラウザーに貼り付けます。 プライベートまたはシークレット のブラウザー セッションを使用することをお勧めします。

  3. 手順に従い、Microsoft アカウントでサインインするために必要な詳細を入力します。 ワンタイム パスコードを送信できるように、メール アドレスが要求されます。 メッセージが表示されたら、コードを入力します。

  4. アプリケーションは、アクセス権を付与したデータへのアクセスを維持し、サインインしてプロファイルを読み取るアクセス許可を要求します。 [ 承諾] を選択します。 次のスクリーンショットは、アプリケーションにサインインし、Microsoft Graph API からプロファイルの詳細にアクセスしたことを示しています。

    API 呼び出しの結果を示す JavaScript アプリのスクリーンショット。

[前提条件]

サンプル SPA を複製またはダウンロードする

サンプル アプリケーションを取得するには、GitHub から複製するか、.zip ファイルとしてダウンロードします。

  • サンプルを複製するには、コマンド プロンプトを開き、プロジェクトを作成する場所に移動し、次のコマンドを入力します。

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

  • サンプルをダウンロードします。 名前の長さが 260 文字未満のファイル パスに抽出します。

サンプル SPA を構成する

  1. App/public/authConfig.js開き、次の値を Microsoft Entra 管理センターから取得した値に置き換えます。

    • Enter_the_Application_Id_Here を、前に登録したアプリのアプリケーション (クライアント) ID に置き換えます。
    • Enter_the_Tenant_Subdomain_Here をディレクトリ (テナント) サブドメインに置き換えます。 たとえば、テナントのプライマリ ドメインが contoso.onmicrosoft.com の場合は、contoso を使用します。 テナント名がない場合は、 テナントの詳細を読み取る方法について説明します。

  2. ファイルを保存します。

プロジェクトを実行してサインインする

  1. サーバーを起動するには、プロジェクト ディレクトリ内から次のコマンドを実行します。

    cd 1-Authentication\0-sign-in-vanillajs\App
npm install
npm start

  2. ターミナルに表示される https URL (https://localhost:3000など) をコピーし、ブラウザーに貼り付けます。 プライベートまたはシークレット のブラウザー セッションを使用することをお勧めします。

  3. テナントに登録されているアカウントでサインインします。

  4. 次のスクリーンショットは、アプリケーションにサインインし、Microsoft Graph API からプロファイルの詳細にアクセスしたことを示しています。

    API 呼び出しの結果を示す JavaScript アプリのスクリーンショット。

アプリケーションからサインアウトする

  1. ページの [サインアウト ] ボタンを見つけて選択します。
  2. サインアウト元のアカウントを選択するように求められます。 サインインに使用したアカウントを選択します。

サインアウトしたことを示すメッセージが表示されます。ブラウザー ウィンドウを閉じることができるようになりました。

関連コンテンツ