Azure Easy Authを使用してトークンにアクセスするには？

Question

私はReactとWeb APIを使用して構築された単一ページアプリケーション（SPA）を持っています。どちらもAzureのApp Serviceでホストされています。認証はAzure ADによって提供されます。

JavaScript用のActive Directory認証ライブラリ（ADAL）を使用しています。すべての例はAngularのようですが、私はReactアプリケーションで動作するライブラリの純粋なJavaScript版を手に入れました。私は、OAuth2暗黙的な許可フローを使用して、SPA経由でWeb APIに認証されたアクセスを提供してきました。

すべてがうまく機能しますが、この方法ではログインとログアウトの仕組み（ボタンなど）が必要です。認可コードはURLにフラグメントとして追加され、残りの部分は便宜的にADALが行います。しかし、私はアプリケーション全体を安全な/認証されたいので、私はセットアップ "簡単な認証" - Appサービスを介して認証があります。

「Easy Auth」を使用すると、アプリケーションにサインオンしてもフラグメントにURLが返されないため、ADALを使用してAPIのアクセストークンを取得することはできません。

"Easy Auth"を使用するときに暗黙的な許可に必要なトークンのようなアクセストークンを得る最も良い方法は何ですか？ ADALを「簡単な認証」フローに組み込む方法はありますか？

ありがとうございます。

Answer 1

単一のページアプリケーションとWeb APIを同じAzureのアプリケーションサービスにデプロイし、Easy Authを使用してアプリケーションサービスを保護する場合、単一ページアプリケーションでadalを使用する必要はありません。

この場合、サーバーフロー経由でアプリケーションサービスにログインし、Easy AuthがCookieを介して要求を認証するため、Web APIを直接呼び出すことができます。また、Web APIがトークンを使用して呼び出したい他のクライアントをサーバーしている場合、Azure ADが発行するid_token/access_tokenを使用して、アプリケーションサービスを保護するAzure ADアプリケーションを使用してid_token/access_tokenを取得し、認証トークンを交換する必要があります。この進捗をクライアントフローといいます。

これら2つのフローの詳細は、リンクhereを参照してください。