クイックスタート: JavaScript シングルページアプリでユーザーをサインインさせる - Microsoft identity platform

[アーティクル]
04/09/2024

このクイックスタートでは、JavaScript シングルページアプリケーション (SPA) でユーザーをサインインし、Microsoft Graph を呼び出す方法を示すコードサンプルをダウンロードして実行します。このコードサンプルでは、Microsoft Graph API または任意の Web API を呼び出すためのアクセストークンを取得する方法も示します。

図については、「このサンプルのしくみ」を参照してください。

前提条件

ヒント

この記事の手順は、開始するポータルによって若干異なる場合があります。

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Node.js
Visual Studio Code (プロジェクトファイルの編集に使用)

クイックスタートアプリケーションを登録してダウンロードする

クイックスタートのアプリケーションを起動するには、次のオプションのいずれかを使用します。

オプション 1 (簡易): アプリを登録して自動構成を行った後、コードサンプルをダウンロードする

Azure portal のアプリの登録クイックスタートエクスペリエンスにサインインします。
アプリケーションの名前を入力します。
[サポートされているアカウントの種類] で、 [Accounts in any organizational directory and personal Microsoft accounts](任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント) を選択します。
[登録] を選択します。
指示に従って新しいアプリケーションをダウンロードし、自動構成します。

オプション 2 (手動): アプリケーションを登録し、アプリケーションとコードサンプルを手動で構成する

手順 1:アプリケーションの登録

Azure portal にサインインします。
複数のテナントにアクセスできる場合は、上部のメニューの [設定] アイコンを使って、アプリケーションを登録するテナントを選びます。
[ID] を探して選択します。
[管理] で [アプリの登録]>[新規登録] の順に選択します。
アプリケーションの [名前] を入力します。この名前は、アプリのユーザーに表示される場合があります。また、後で変更することができます。
[サポートされているアカウントの種類] で、 [Accounts in any organizational directory and personal Microsoft accounts](任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント) を選択します。
[登録] を選択します。後で使用するために、アプリの [概要] ページで、 [アプリケーション (クライアント) ID] の値を書き留めます。
このクイックスタートでは、暗黙的な許可フローを有効にする必要があります。 [管理] で、 [認証] を選択します。
[プラットフォーム構成]>[プラットフォームを追加] を選択します。 [Web] を選択します。
[リダイレクト URI] の値を http://localhost:3000/ に設定します。
[暗黙的な許可およびハイブリッドフロー] で、[アクセストークン] と [ID トークン] を選択します。
[構成] をクリックします。

手順 1:Azure portal でのアプリケーションの構成

このクイックスタートのコードサンプルを動作させるには、リダイレクト URI (http://localhost:3000/) を追加し、 [暗黙の付与] を有効にします。

これらの変更を行います

構成済みアプリケーションはこれらの属性で構成されています。

手順 2:プロジェクトのダウンロード

Node.js を使用して Web サーバーでプロジェクトを実行するために、コアプロジェクトファイルをダウンロードします。

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

コードサンプルをダウンロードします

手順 3:JavaScript アプリの構成

JavaScriptSPA フォルダーで、authConfig.js を編集し、msalConfig の下にある clientID、authority、および redirectUri の値を設定します。


 // Config object to be passed to Msal on creation
 const msalConfig = {
   auth: {
     clientId: "Enter_the_Application_Id_Here",
     authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
     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
   }
 };

注意

Enter_the_Supported_Account_Info_Here

各値の説明:

Enter_the_Application_Id_Here は、登録したアプリケーションのアプリケーション (クライアント) ID です。

[アプリケーション (クライアント) ID] の値を見つけるには、Azure portal でアプリの [概要] ページに移動します。
Enter_the_Cloud_Instance_Id_Here は、Azure クラウドのインスタンスです。メイン (グローバル) Azure クラウドの場合は、単に「 https://login.microsoftonline.com/ 」と入力します。各国のクラウド (中国など) の場合は、「各国のクラウド」を参照してください。
Enter_the_Tenant_info_here には、次のオプションのいずれかが設定されます。
- アプリケーションで "この組織のディレクトリ内のアカウントのみ" がサポートされる場合は、この値をテナント ID またはテナント名 (例: contoso.microsoft.com) に置き換えます。
[ディレクトリ (テナント) ID] の値を見つけるには、Azure portal でアプリ登録の [概要] ページに移動します。
- アプリケーションで "任意の組織のディレクトリ内のアカウント" がサポートされる場合は、この値を organizations に置き換えます。
- アプリケーションで "任意の組織のディレクトリ内のアカウントと個人用の Microsoft アカウント" がサポートされる場合は、この値を common に置き換えます。 "個人用の Microsoft アカウントのみ" にサポートを制限するには、この値を consumers に置き換えます。
[サポートされているアカウントの種類] 値を見つけるには、Azure portal でアプリ登録の [概要] ページに移動します。
Enter_the_Redirect_Uri_Here は http://localhost:3000/ です。

手順 3:アプリが構成され、実行準備ができる

アプリのプロパティの値を使用してプロジェクトを構成しました。

次に、引き続き同じフォルダー内の graphConfig.js ファイルを編集して、apiConfig オブジェクトの graphMeEndpoint と graphMeEndpoint を設定します。

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

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

各値の説明:

<Enter_the_Graph_Endpoint_Here> は、API 呼び出しの対象となんるエンドポイントです。メインまたはグローバル Microsoft Graph API サービスの場合は、単に「https://graph.microsoft.com/」と入力します。詳細については、各国のクラウドのデプロイに関する記事をご覧ください。

手順 4:プロジェクトを実行する

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

サーバーを起動するために、プロジェクトのディレクトリから次のコマンドを実行します。
```
npm install
npm start
```
Web ブラウザーを開き、http://localhost:3000/ に移動します｡
[サインイン] を選択してサインインを開始してから、Microsoft Graph API を呼び出します。

ブラウザーにアプリケーションが読み込まれたら、 [サインイン] を選択します。初回サインイン時に、アプリケーションがユーザーのプロファイルにアクセスし、ユーザーをサインインすることへの同意を求められます。正常にサインインした後は、ユーザープロファイル情報がページに表示されている必要があります。

詳細情報

このサンプルのしくみ

サンプル JavaScript SPA のしくみ: 1. SPA がサインインを開始します。2. SPA は Microsoft ID プラットフォームから ID トークンを取得します。3. SPA がトークン取得を呼び出します。4. Microsoft ID プラットフォームは SPA にアクセストークンを返します。5. SPA はアクセストークンを使用して、Microsoft Graph API に HTTP GET 要求を行います。6. Graph API は SPA に HTTP 応答を返します。

msal.js

MSAL ライブラリは、ユーザーをサインインさせ、Microsoft ID プラットフォームによって保護された API へのアクセスに使用されるトークンを要求します。クイックスタートの index.html ファイルにはこのライブラリへの参照が含まれています。

<script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.1/js/msal.js" integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script>

上記のバージョンは、MSAL.js のリリースに関するページにある最新のリリースバージョンに置き換えることができます。

別の方法として、Node.js がインストール済みの場合は、次のようにして最新バージョンを Node.js Package Manager (npm) を介してダウンロードすることもできます。

npm install msal

MSAL の初期化

クイックスタートのコードには、MSAL ライブラリを初期化する方法も示されています。

  // Config object to be passed to Msal on creation
  const msalConfig = {
    auth: {
      clientId: "00001111-aaaa-2222-bbbb-3333cccc4444", // this is a fake id
      authority: "https://login.microsoftonline.com/common",
      redirectUri: "http://localhost:3000/",
    },
    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
    }
  };

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

Where	説明
`clientId`	Azure portal に登録されているアプリケーションのアプリケーション ID。
`authority`	(省略可能) 先ほど構成に関するセクションで説明したように、アカウントの種類をサポートする機関 URL。既定の機関は `https://login.microsoftonline.com/common`です。
`redirectUri`	アプリケーション登録の構成済みの応答およびリダイレクト URI。例では、 `http://localhost:3000/`が使用されます。
`cacheLocation`	(省略可能) 認証状態のブラウザーストレージを設定します。既定では sessionStorage です。
`storeAuthStateInCookie`	(省略可能) 認証フローの検証に必要な認証要求の状態をブラウザーの Cookie に格納するライブラリ。この Cookie は、特定の既知の問題に対処するために、IE および Edge ブラウザー用に設定されます。

使用できる構成オプションの詳細については、クライアントアプリケーションの初期化に関する記事を参照してください。

次のコードスニペットは、ユーザーをサインインする方法を示しています。

// Add scopes for the id token to be used at Microsoft identity platform endpoints.
const loginRequest = {
    scopes: ["openid", "profile", "User.Read"],
};

myMSALObj.loginPopup(loginRequest)
    .then((loginResponse) => {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});

Where	説明
`scopes`	(省略可能) サインイン時にユーザーの同意を得るために必要なスコープが含まれます。たとえば、Microsoft Graph の場合は `[ "user.read" ]`、カスタム Web API (つまり、`api://<Application ID>/access_as_user`) の場合は `[ "<Application ID URL>/scope" ]` になります。

あるいは、loginRedirect メソッドを使用して、現在のページをポップアップウィンドウではなくサインインページにリダイレクトすることもできます。

トークンの要求

MSAL では、acquireTokenRedirect、acquireTokenPopup、acquireTokenSilent の 3 つのメソッドを使用してトークンを取得します。

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

acquireTokenSilent メソッドは、ユーザーの操作なしでトークンの取得や更新を処理します。最初に loginRedirect または loginPopup メソッドが実行され、その後の呼び出しでは、保護されたリソースにアクセスするトークンを取得するために acquireTokenSilent メソッドが通常使用されます。トークンを要求または更新するための呼び出しは自動的に行われます。


const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenSilent(tokenRequest)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });

Where	説明
`scopes`	API のアクセストークンで返されるように要求されているスコープを含めます。たとえば、Microsoft Graph の場合は `[ "mail.read" ]`、カスタム Web API (つまり、`api://<Application ID>/access_as_user`) の場合は `[ "<Application ID URL>/scope" ]` になります。

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

ユーザーに Microsoft ID プラットフォームとのやり取りを強制する場合があります。次に例を示します。

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

ほとんどのアプリケーションでお勧めしている通常のパターンは、最初に acquireTokenSilent を呼び出し、例外をキャッチしてから、acquireTokenPopup (または acquireTokenRedirect) を呼び出して、対話型要求を開始するというものです。

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

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
    scopes: ["Mail.Read"]
};

myMSALObj.acquireTokenPopup(requestObj)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });

注意

このクイックスタートでは、Microsoft Internet Explorer の場合は loginRedirect および acquireTokenRedirect メソッドを使用しています。これは、Internet Explorer によるポップアップウィンドウの処理に関連した既知の問題があるためです。

次のステップ

このクイックスタート用アプリケーションの構築に関する詳細なステップバイステップガイドについては、次を参照してください。

チュートリアル: ユーザーをサインインさせて Microsoft Graph を呼び出す

クイック スタート:JavaScript SPA 内でユーザーをサインインさせ、アクセス トークンを取得する

前提条件

クイック スタート アプリケーションを登録してダウンロードする

オプション 1 (簡易): アプリを登録して自動構成を行った後、コード サンプルをダウンロードする

オプション 2 (手動): アプリケーションを登録し、アプリケーションとコード サンプルを手動で構成する