Microsoft Login von oauth2 Problem

Question

Ich habe eine React App mit axios Bibliothek für die Bearbeitung von Anfragen. So nach dem nächsten Beitrag:

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

ich die Aktion auf Postman durchführen konnte.

Dann stelle ich die axios Bibliothek, um die 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) => { 

    }); 

auszuführen, aber ich erhalte den folgenden Fehler:

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).

Ich habe versucht, und fügte hinzu:

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

zu den Headern , aber es hat nicht funktioniert.

So fügte Allow-Control-Allow-Origin: *​​​ Chrome Erweiterung mein Problem behoben.

Die Sache ist, meine App soll auf azurblau veröffentlicht werden, also habe ich die Anfrage auf anderen Webbrowsern getestet und es hat nicht funktioniert. Daher möchte ich nicht, dass meine Benutzer die Erweiterung installieren.

Ist etwas falsch mit meiner Anfrage? Warum kann der Postbote das tun, ohne Header einzurichten?

Gibt es einen anderen Ansatz, um es zu erreichen?

PS: Ich lese über die Verwendung adal.js, aber ich möchte nicht den Anmeldebildschirm von Microsoft verwenden, weil ich Benutzer kenne und für die App passiere, und ich möchte manuelle Anmeldung vermeiden.

Answer 1

Das Problem, mit dem Sie konfrontiert sind, liegt daran, dass Sie versuchen, den Token-Endpunkt über AJAX aufzurufen, was er aufgrund des fehlenden CORS-Headers nicht akzeptiert. Sie können es nicht hinzufügen, es fehlt in der Antwort von Azure AD.

Sie müssen statt des Zugriffstokens vom Token-Endpunkt den OAuth Implicit Grant Flow verwenden. Dieser Flow ermöglicht es Ihnen, die Token direkt in der Autorisierungsphase zu erhalten und ist speziell für JavaScript-basierte Apps konzipiert. Mehr Infos hier: https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant.

Dies bedeutet, dass Sie den Passwortzuschussfluss nicht so verwenden können, wie Sie es jetzt tun, es sei denn, Sie führen die Anrufe von Ihrem Backend statt vom Frontend aus.