私のアプリケーションは、ASP.NET Core MVC をバックエンドとして使用するハイブリッド アプローチです。フロントエンドがデータベースからデータを取得し、MS Graph で API 呼び出しを行うために使用するさまざまなコントローラーがあります。次のプログラム.cs ファイルを使用して、ユーザーが初めて Web サイトにログインするときに認証を開始します:
リーリーAzure AD ポータルでは、アプリケーションは Web アプリケーションとして登録されています。したがって、ユーザーが最初に Web サイトにアクセスすると、https://login.microsoftonline.com/blahblah にリダイレクトされ、ログイン プロセスが開始されます。これは、Azure AD ID プラットフォームによって自動的に実行されます。その後、ログインが行われると、VueJS spa がロードされるローカルホスト (localhost:43862) にリダイレクトされます。私のスパでは、コントローラーへのさまざまな axios リクエストを使用して、データをプルし、vue ルーターを使用してコンポーネントをロードします。ただし、私の問題は、Cookieの有効期限が切れたか、別のタブでログアウトしたため、ユーザーが再度ログインする必要があることです。期限切れのセッションからの次の axios 要求では、ユーザーは Azure ログイン画面にリダイレクトされず、CORS エラーが発生します。したがって、axios 要求でページを Azure AD ログイン画面に強制的にリダイレクトする必要があります (CORS ポリシーによってエラーが発生するため、これはおそらく最悪のアイデアです)。または、localhost/login にリダイレクトして戻す必要があります。 Azure AD ログイン ボタンを使用した独自のカスタム ログイン画面は CORS に影響を与えません。では、この Azure AD リダイレクトを Azure AD ログインにインターセプトして、自分のものに置き換えるにはどうすればよいでしょうか?
また、axios リクエストでそれを確認できるように 401 エラー コードを返してみましたが、役に立ちませんでした。そこにブレークポイントを置くと、このコードにヒットしますが、応答のステータス コードは変更されず、依然として 302 が返されます。私のコードはイベントに追加しようとしています:
リーリー他の考えとしては、login.microsoft.com からのリダイレクトを許可するように CORS ポリシーを設定する必要があるのではないかということです。それともこれは悪い習慣なのでしょうか？
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
質問の一部にはお答えできます... まず、Azure AD で保護された API アプリケーションの場合、API が行うべきことは、要求の要求ヘッダーに正しいアクセス トークンが含まれていることを確認し、含まれている場合は出力を与えることです。応答しない場合は、401 や 403 などのエラーが表示されます。通常の API アプリケーションには、ユーザーをログインさせるための UI は必要ありません。とにかく、MVC プロジェクトで API を公開したい場合は問題ありませんが、API 自体には UI を含めるべきではありません。
以下の例を見てみましょう。.net 6 Web API プロジェクトがあります。これは私の
リーリーprogram.cs:そして、appsetting.json で構成する必要があります。
リーリーこれはコントローラーです:
リーリーAzure AD アプリケーションがあり、次の API を公開しています:
同じ Azure AD アプリにこの API も追加しました。
それではテストをしてみましょう。この API を直接呼び出すと、401 エラーが発生します:
リクエストで期限切れのトークンを使用すると、401 エラーが発生します:
しかし、正しいトークンを使用すると (https://jwt.io にアクセスしてトークンをデコードすると、それに正しいスコープが含まれていることがわかります。私にとっては
"scp ": "Tiny.Read",)、応答が返されます:この時点で、API 部分は完了しました。クライアント SPA を見てみましょう。 SPA の場合は、ユーザーが Azure AD 経由でログインし、MS グラフ API または独自の API を呼び出すためのアクセス トークンを生成できるように、
MSALを統合する必要があります。アクセス トークンを生成するコードは同じである必要がありますが、API ごとに異なるscopesを設定する必要があります。私のシナリオでは、API にはスコープTiny.Readが必要なので、クライアント アプリケーションで設定する必要があります。これは、React での 生成アクセス トークン のスクリーンショットです。コード内でスコープを設定する必要があります。
アクセス トークンを生成する方法がわかったので、API URL はすでにわかっています。次に、API の呼び出し、AJAX の使用、フェッチの使用などのリクエストを送信できます。http リクエストを送信するだけです。また、API を呼び出す部分では、応答も処理する必要があります。応答コードが 401 の場合は、ログイン ページにリダイレクトするなど、何らかのロジックを実行する必要があります。ここで問題が発生し、CORS の問題が発生していると言いました。この部分はお答えできません。 Azure AD ログイン ページにリダイレクトする方法によって異なると思います。恐れ入りますが、ユーザーをログインしてグラフ API を呼び出す方法については、この例をご覧ください。