入れ子になったアプリ認証を使用して Office アドインでシングル サインオンを有効にする

MSAL ライブラリを初期化する

次に、MSAL を初期化し、 パブリック クライアント アプリケーションのインスタンスを取得する必要があります。

taskpane.js または taskpane.ts ファイルに次のコードを追加します。 Enter_the_Application_Id_Here プレースホルダーを、前に保存したAzureアプリ ID に置き換えます。 次のコード ノートについて:

• initMsal関数は、createNestablePublicClientApplicationを呼び出して MSAL を初期化します。 これにより、Outlok での SSO をサポートする入れ子になったパブリック クライアント アプリケーションが作成されます。
• initMsal関数は、職場と学校のアカウントまたは個人の Microsoft アカウントをサポートする共通の権限を設定します。 1 つのテナントまたはその他のアカウントの種類を構成する場合は、「追加の権限 オプションのアプリケーション構成オプション 」を参照してください。

let msalInstance = undefined;

/**
 * Initialize MSAL as a nestable public client application.
  */
async function initMsal() {
  if (!msalInstance) {
    const clientId = "Enter_the_Application_Id_Here";
    const msalConfig = {
      auth: {
        clientId: clientId,
        authority: "https://login.microsoftonline.com/common"
      },
      cache: {
        cacheLocation: "localStorage"
      }
    };
    msalInstance = await createNestablePublicClientApplication(msalConfig);
  }
}

最初のトークンを取得する

NAA 経由で MSAL.js によって取得されたトークンは、Azure アプリ登録 ID に対して発行されます。 このコード サンプルでは、Microsoft Graph APIのトークンを取得します。 ユーザーがMicrosoft Entra IDでアクティブなセッションを持っている場合、トークンはサイレントで取得されます。 そうでない場合、ライブラリは対話形式でサインインするようにユーザーに求めます。 その後、トークンを使用して Microsoft Graph APIを呼び出します。

次の手順は、トークンの取得に使用するパターンを示しています。

1. スコープを指定します。 NAA では増分同意と動的同意がサポートされているため、コードがタスクを完了するために必要な最小限のスコープを常に要求します。
2. acquireTokenSilent を呼び出します。 これにより、ユーザーの操作を必要とせずにトークンが取得されます。
3. acquireTokenSilent失敗した場合は、acquireTokenPopupを呼び出して、ユーザーの対話型ダイアログを表示します。 acquireTokenSilent トークンの有効期限が切れている場合、またはユーザーが要求されたすべてのスコープにまだ同意していない場合は失敗する可能性があります。

次のコードは、この認証パターンを独自のプロジェクトに実装する方法を示しています。

1. taskpane.jsまたはtaskpane.tsのrun関数を次のコードに置き換えます。 このコードでは、ユーザーのファイルを読み取るために必要な最小スコープを指定します。

   export async function run() {
     await initMsal();
     // Specify minimum scopes needed for the access token.
     const tokenRequest = {
       scopes: ["Files.Read", "User.Read"],
     };
     let accessToken = null;
   
     // TODO 1: Use msalInstance to get an access token.
   
     // TODO 2: Call the Microsoft Graph API.
   }
   

   重要

   トークン要求には、 offline_access、 openid、 profile、または email以外のスコープが含まれている必要があります。 前のスコープの任意の組み合わせを使用できますが、少なくとも 1 つの追加スコープを含める必要があります。 そうでない場合、トークン要求は失敗する可能性があります。

2. TODO 1 を次のコードに置き換えます。 このコードは acquireTokenSilent を呼び出してアクセス トークンを取得します。

   try {
     const userAccount = await msalInstance.acquireTokenSilent(tokenRequest);
     console.log("Acquired token silently.");
     accessToken = userAccount.accessToken;
   } catch (silentError) {
     // TODO 1a: Handle acquireTokenSilent failure.
   
   }
   

3. TODO 1a を次のコードに置き換えます。 このコードは、 acquireTokenSilent が InteractionRequiredAuthErrorをスローしたかどうかを確認します。 その場合、コードは acquireTokenPopup を呼び出して、MSAL がポップアップ ダイアログを使用してユーザーと対話できるようにします。 多要素承認の完了など、さまざまな理由で対話が必要になる場合があります。

   if (silentError instanceof InteractionRequiredAuthError) {
     console.log(`Unable to acquire token silently: ${silentError}`);
     // Silent acquisition failed. Continue to interactive acquisition.
     try {
       const userAccount = await msalInstance.acquireTokenPopup(tokenRequest);
       console.log("Acquired token interactively.");
       accessToken = userAccount.accessToken;
     } catch (popupError) {
       // Acquire token interactive failure.
       console.error(`Unable to acquire token interactively: ${popupError}`);
       return;
     }
   } else {
     // Acquire token silent failure. Error can't be resolved through interaction.
     console.error(`Unable to acquire token silently: ${silentError}`);
     return;
   }
   

API を呼び出す

トークンを取得した後、それを使用して API を呼び出します。 次の例では、Authorization ヘッダーにトークンがアタッチされた fetch を呼び出して、Microsoft Graph APIを呼び出す方法を示します。

• TODO 2 を次のコードに置き換えます。

  // Call the Microsoft Graph API with the access token.
  const response = await fetch(
    `https://graph.microsoft.com/v1.0/me/drive/root/children?$select=name&$top=10`,
    {
      headers: { Authorization: `Bearer ${accessToken}` },
    }
  );
  
  if (response.ok) {
    // Write file names to the console.
    const data = await response.json();
    const names = data.value.map((item) => item.name);
  
    // Be sure the taskpane.html has an element with Id = item-subject.
    const label = document.getElementById("item-subject");
  
    // Write file names to task pane and the console.
    const nameText = names.join(", ");
    if (label) label.textContent = nameText;
    console.log(nameText);
  } else {
    const errorText = await response.text();
    console.error("Microsoft Graph call failed - error text: " + errorText);
  }
  

前のすべてのコードが run 関数に追加されたら、作業ウィンドウのボタンが run 関数を呼び出していることを確認します。 その後、アドインをサイドロードし、コードを試すことができます。

MSAL ライブラリを初期化する

次に、MSAL を初期化し、 パブリック クライアント アプリケーションのインスタンスを取得する必要があります。 これは、必要に応じアクセス トークンを取得するために使用されます。 パブリック クライアント アプリケーションを作成するコードを Office.onReady メソッドに配置することをお勧めします。

1. 次の initMsal 関数を taskpane.js または taskpane.ts ファイルに追加します。 を呼び出して、NAA を使用するように MSAL インスタンスを初期化します。
2. Enter_the_Application_Id_Here プレースホルダーを、前に保存したAzureアプリ ID に置き換えます。

let msalInstance = null; // MSAL instance

/**
 * Initialize MSAL as a nestable public client application.
 */
async function initMsal() {
  if (!msalInstance) {
    const clientId = "Enter_the_Application_Id_Here";
    const msalConfig = {
      auth: {
        clientId: clientId,
        authority: "https://login.microsoftonline.com/common"
      },
      cache: {
        cacheLocation: "localStorage"
      }
    };
    msalInstance = await createNestablePublicClientApplication(msalConfig);
  }
}

ログイン ヒントを取得する関数を追加する

ブラウザーでWord、Excel、またはPowerPointで実行する場合は、正しいアカウントを識別するために MSAL にログイン ヒントを指定する必要があります。 ログイン ヒントは、Office authContext.userPrincipalName プロパティから取得できます。 ログイン ヒントを取得するために、いつでも呼び出すことができる次の関数を追加します。

taskpane.js または taskpane.ts ファイルに次の関数を追加します。

/**
 * Get the login hint from Office.AuthContext for a better SSO experience.
 * This is especially important for Office in a browser.
 */
async function getLoginHint() {
    try {
        if (typeof Office !== "undefined" && Office.context) {
            const authContext = await Office.auth.getAuthContext();
            if (authContext?.userPrincipalName) return authContext.userPrincipalName;
        }
    } catch (error) {
        console.warn("Could not get login hint:", error);
    }
    return null;
}

アクセス トークンを取得する

アクセス トークンを取得する関数を構築します。

taskpane.js または taskpane.ts ファイルに次の関数を追加します。 次のコード ノートについて:

• ブラウザーでWord、Excel、またはPowerPointで実行するときに必要なログイン ヒントを取得します。
• ssoSilent (acquireTokenSilentではなく) を呼び出してアクセス トークンを取得します。
• ssoSilent失敗した場合は、対話が必要かどうかを確認します。 その場合は acquireTokenPopup を呼び出して、MSAL がユーザーと対話できるようにします。

/**
 * Acquire an access token silently, or interactively if needed.
 * @param {Array} scopes - The scopes for which the token is requested.
 * @returns {Promise<string>} - The acquired access token.
 */
async function acquireAccessToken(scopes) {
  await initMsal();

  const request = {
    scopes: scopes,
    loginHint: await getLoginHint()
  }

  let authResult = null;
  try {
    authResult = await msalInstance.ssoSilent(request);
  } catch (error) {
    if (error instanceof InteractionRequiredAuthError) {
      authResult = await msalInstance.acquireTokenPopup(request);
    } else {
      console.error("Silent token acquisition failed:", error);
    }
  }
  if (!authResult) {
    throw new Error("Could not acquire access token");
  }
  console.log(authResult);
  return authResult.accessToken;

}

トークンを取得し、Graph APIを呼び出す

トークンを取得した後、それを使用して API を呼び出します。 次の例では、Authorization ヘッダーにトークンがアタッチされた fetch を呼び出して、Microsoft Graph APIを呼び出す方法を示します。

次のコードに一致するように、taskpane.js または taskpane.ts ファイルのrun関数を更新します。 次のコード ノートについて:

• 前に作成した acquireAccessToken 関数を呼び出し、 Files.Read と User.Read スコープを渡します。 トークン要求には、 offline_access、 openid、 profile、または email以外のスコープが含まれている必要があります。 前のスコープの任意の組み合わせを使用できますが、少なくとも 1 つの追加スコープを含める必要があります。 そうでない場合、トークン要求は失敗する可能性があります。
• アクセス トークンを使用して、Microsoft Graph APIを呼び出して、OneDrive からユーザーのファイル名を 10 個取得します。

export async function run() {
  let accessToken;
  try {
    // Acquire an access token for Microsoft Graph.
    accessToken = await acquireAccessToken(["Files.Read", "User.Read"]);
    console.log("Access token acquired:", accessToken);
  }
  catch (error) {
    console.error("Error acquiring access token:", error);
    return;
  }

  // Call the Microsoft Graph API with the access token.
  const response = await fetch(
    `https://graph.microsoft.com/v1.0/me/drive/root/children?$select=name&$top=10`,
    {
      headers: { Authorization: `Bearer ${accessToken}` },
    }
  );

  if (response.ok) {
    // Write file names to the console.
    const data = await response.json();
    const names = data.value.map((item) => item.name);

    // Be sure the taskpane.html has an element with Id = item-subject.
    const label = document.getElementById("item-subject");

    // Write file names to task pane and the console.
    const nameText = names.join(", ");
    if (label) label.textContent = nameText;
    console.log(nameText);
  } else {
    const errorText = await response.text();
    console.error("Microsoft Graph call failed - error text: " + errorText);
  }
}

前のすべてのコードが run 関数に追加されたら、作業ウィンドウのボタンが run 関数を呼び出していることを確認します。 その後、アドインをサイドロードし、コードを試すことができます。