クイックスタート: 認可コード フローを使用して React SPA 内でユーザーをサインインさせ、アクセス トークンを取得する
ようこそ。 ご要望のページを表示できません。 問題の修正に取り組んでいますが、次のリンクから目的の記事にアクセスできるかお試しください。
ご不便をおかけして申し訳ありませんが、問題が解決するまで今しばらくお待ちください。
このクイックスタートでは、認可コード フローを使用して、JavaScript React シングルページ アプリケーション (SPA) でユーザーをサインインさせ、Microsoft Graph を呼び出す方法を示すコード サンプルをダウンロードして実行します。 このコード サンプルでは、Microsoft Graph API または任意の Web API を呼び出すためのアクセス トークンを取得する方法を示します。
図については、「このサンプルのしくみ」を参照してください。
前提条件
- Azure サブスクリプション - Azure サブスクリプションを無料で作成する
- Node.js
- Visual Studio Code または別のコード エディター
手順 1:Azure portal でのアプリケーションの構成
このコード サンプルでは、 リダイレクト URIhttp://localhost:3000/ が必要 です。
アプリケーションはこれらの属性で構成されています。
手順 2:プロジェクトのダウンロード
Node.js を使用して Web サーバーでプロジェクトを実行する
注意
Enter_the_Supported_Account_Info_Here
手順 3:アプリが構成され、実行準備ができる
アプリのプロパティの値を使用してプロジェクトを構成しました。
手順 4:プロジェクトを実行する
Node.js を使用して Web サーバーでプロジェクトを実行します。
サーバーを起動するために、プロジェクト ディレクトリ内から次のコマンドを実行します。
npm install npm starthttp://localhost:3000/を参照します。[サインイン] を選択してサインイン プロセスを開始してから、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 を使用して認可コード フロー アプリケーションを作成する詳細なステップ バイ ステップ ガイドについては、次のチュートリアルを参照してください。