MSAL v1.x から MSAL v2.x への移行

MSAL を初めて使用する場合は、 ここから始める必要があります。 MSAL v1.x から来ている場合は、このガイドに従って、MSAL v2.x を使用するようにコードを更新できます

1. アプリケーションの登録を更新する

テナントのMicrosoft Entra 管理センターに移動し、アプリの登録を確認します。 MSAL 2.x の 新しい登録 を作成することも、MSAL 1.x に使用している登録の 既存の登録を更新 することもできます。

2. msal-browser パッケージをプロジェクトに追加する

npm を使用して、次のコマンドを使用します。

npm install @azure/msal-browser

3. コードを更新する

MSAL 1.x では、次のようにアプリケーション インスタンスを作成しました。

import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

MSAL 2.x では、新しい PublicClientApplication オブジェクトを使用するようにこれを更新できます。

import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

渡される構成オブジェクトには、いくつかの小さな違いがある場合があります。 UserAgentApplication オブジェクトにさらに高度な構成を渡す場合は、新しいアプリ オブジェクト構成オプションの詳細については、こちらを参照してください。

要求と応答のオブジェクトシグネチャが変更されました。 acquireTokenSilent 対話型 API とは別のオブジェクト署名が作成されました。 要求 API の構成の詳細については、 こちらを 参照してください。

MSAL 1.x のほとんどの API は、変更なしで MSAL 2.x に引き継がれたものです。 一部の関数は削除されました。

  • handleRedirectCallback
  • urlContainsHash
  • getCurrentConfiguration
  • getLoginInProgress
  • getAccount
  • getAccountState
  • isCallback

MSAL 2.x では、MSAL が応答から承認コードを解析するとすぐにトークン交換が実行されるため、ハッシュからの応答の処理は非同期操作です。 このため、MSAL は、リダイレクト呼び出しを実行するときに、MSAL によって完全に処理されたときに解決される promise を返す handleRedirectPromise 関数を提供します。 リダイレクト メソッドを使用する場合、 redirectUri として使用されるページは、応答が処理され、リダイレクトから戻るときにトークンがキャッシュされるように、 handleRedirectPromise を実装する必要があります。

const myMSALObj = new msal.PublicClientApplication(msalConfig); 

// Register Callbacks for Redirect flow
myMSALObj.handleRedirectPromise().then((tokenResponse) => {
    let accountObj = null;
    if (tokenResponse !== null) {
        accountObj = tokenResponse.account;
        const id_token = tokenResponse.idToken;
        const access_token = tokenResponse.accessToken;
    } else {
        const currentAccounts = myMSALObj.getAllAccounts();
        if (!currentAccounts || currentAccounts.length === 0) {
            // No user signed in
            return;
        } else if (currentAccounts.length > 1) {
            // More than one user signed in, find desired user with getAccountByUsername(username)
        } else {
            accountObj = currentAccounts[0];
        }
    }
    
    const username = accountObj.username;
   
}).catch((error) => {
    handleError(error);
});

function signIn() {
    myMSALObj.loginRedirect(loginRequest);
}

async function getTokenRedirect(request) {
    return await myMSALObj.acquireTokenSilent(request).catch(error => {
        this.logger.info("silent token acquisition fails. acquiring token using redirect");
        // fallback to interaction when silent call fails
        return myMSALObj.acquireTokenRedirect(request)
    });
}

loginPopup、acquireTokenPopup、またはacquireTokenSilentの呼び出し中に、約束が解決されるのを待つことができます。

const myMSALObj = new msal.PublicClientApplication(msalConfig); 

async function signIn(method) {
    try {
        const loginResponse = await myMSALObj.loginPopup(loginRequest);
    } catch (err) {
        handleError(error);
    }

    const currentAccounts = myMSALObj.getAllAccounts();
    if (!currentAccounts || currentAccounts.length === 0) {
        // No user signed in
        return;
    } else if (currentAccounts.length > 1) {
        // More than one user signed in, find desired user with getAccountByUsername(username)
    } else {
        accountObj = currentAccounts[0];
    }
}

async function getTokenPopup(request) {
    return await myMSALObj.acquireTokenSilent(request).catch(async (error) => {
        this.logger.info("silent token acquisition fails. acquiring token using popup");
        // fallback to interaction when silent call fails
        return await myMSALObj.acquireTokenPopup(request).catch(error => {
            handleError(error);
        });
    });
}

使用方法の詳細については、 ログイン と トークンの取得 に関するドキュメントを参照してください。

リフレッシュ トークンがトークン応答の一部として返されるようになり、ライブラリでユーザーの操作や iframe を使用せずにアクセス トークンを更新するために使用されます。 トークンの更新の詳細については、 トークンの有効期間 に関するドキュメントを参照してください。

他のすべての API は、以前と同様に機能する必要があります。 MSAL 2.0 の動作例については、既定のサンプルを参照することをお勧めします。

  • Last updated on