oauth2からのマイクロソフトのログイン

Question

私は、リクエストを処理するためにaxiosライブラリを使用しているReactアプリを持っています。だから、次の投稿次

How to login with username/password using OAuth2 and microsoft login and HTTP request

私はポストマンのアクションを実行することができます。

は、その後、私はPOST

const dataForBody = `${'grant_type=password&' + 
     'username='}${encodeURI(userName)}&` + 
     `password=${encodeURI(userPassword)}&` + 
     `client_id=${encodeURI(clientID)}&` + 
     `resource=${encodeURI('https://graph.microsoft.com')}&` + 
     `client_secret=${encodeURI(clientSecret)}`; 
const messageHeaders = { 
    'Content-Type': 'application/x-www-form-urlencoded' 
}; 

axios({ 
    method: 'post', 
    url: 'https://login.microsoftonline.com/{tenant}/oauth2/token', 
    headers: messageHeaders, 
    data: dataForBody, 
}) 
    .then((response) => { 

    }); 

を実行するためにaxiosライブラリを設定するが、私は次のエラーを取得：

'Access-Control-Allow-Origin': 'https://login.microsoftonline.com', 

をヘッダーに：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://login.microsoftonline.com/ {tenant}/oauth2/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

を私が追加してみましたしかし、それは動作しませんでした。

Allow-Control-Allow-Origin: *​​​クロムエクステンションを追加すると問題が解決しました。

私のアプリは紺碧の上に公開されるので、他のウェブブラウザでリクエストをテストしたところ、うまくいきませんでした。だから、私はユーザーに拡張機能をインストールさせたくない。

私のリクエストに何か問題がありますか？なぜ郵便配達員はヘッダーを設定しないとできますか？

これを達成する他の方法はありますか？

PS：私はadal.jsを使用していると読んでいますが、私はユーザーのことを知っているのでアプリを渡してしまい、手動ログインを避けたいと思っています。

Answer 1

あなたが直面する問題は、AJAX経由でトークンエンドポイントを呼び出そうとしていることにあります。これはCORSヘッダーがないために受け入れられません。あなたはそれを追加することはできません、それはAzure ADの応答から欠落しています。

トークンエンドポイントからアクセストークンを取得する代わりに、OAuth Implicit Grant Flowを使用する必要があります。このフローでは、認証ステージでトークンを直接取得できます。特に、JavaScriptベースのアプリケーション用に設計されています。詳細はこちら：https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant。

これは、フロントエンドではなくバックエンドからの呼び出しを行わない限り、パスワードグラントフローを使用することができないことを意味します。