クイックスタート: 認可コード フローを使用して React SPA 内でユーザーをサインインさせ、アクセス トークンを取得する

ようこそ。 ご要望のページを表示できません。 問題の修正に取り組んでいますが、次のリンクから目的の記事にアクセスできるかお試しください。

クイック スタート: React を使用して Proof Key for Code Exchange (PKCE) による認可コード フローを使用してシングルページ アプリ (SPA) でユーザーをサインインさせる

ご不便をおかけして申し訳ありませんが、問題が解決するまで今しばらくお待ちください。

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

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

前提条件

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

このコード サンプルでは、 リダイレクト URIhttp://localhost:3000/ が必要 です。

これらの変更を自動的に行う

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

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

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

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

注

Enter_the_Supported_Account_Info_Here

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

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

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

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

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

    npm install
npm start

  2. http://localhost:3000/ を参照します。

  3. [サインイン] を選択してサインイン プロセスを開始してから、Microsoft Graph API を呼び出します。

    初回サインイン時に、自分のプロファイルにアプリケーションがアクセスして自分をサインインさせることについて同意を求められます。 正常にサインインした後、 [Request Profile Information](プロファイル情報をリクエスト) をクリックして、自分のプロファイル情報をページに表示します。

詳細情報

このサンプルのしくみ

シングルページ アプリケーションの認証コード フローを示す図。

msal.js

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

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

npm install @azure/msal-browser @azure/msal-react

次のステップ

React を使用して認可コード フロー アプリケーションを作成する詳細なステップ バイ ステップ ガイドについては、次のチュートリアルを参照してください。

チュートリアル: React シングルページ アプリ (SPA) サインイン ユーザー

  • 最終更新: