Büro 365 Graph API von javascript: Wie man richtig authentifizieren

Question

Ich hasse Oauth nicht, aber ich hasse mich selbst für nicht in der Lage, meinen Kopf um das Konzept zu wickeln. Nachdem ich das gesagt habe, hier ist meine Frage: Ich versuche, die Office Graph REST API von Vanille Javascript zu nennen. Also mache ich eine reguläre XMLHttpRequest zu graph.microsoft.com, von einer Seite, die auf meiner SharePoint Online-Site läuft (daher sollte der Code von meinem Sicherheitskontext ausgeführt werden, wenn ich eingeloggt bin). Der Aufruf gibt eine 403 Authentifizierung erforderlich zurück. Ich nehme an, dass ich eine App in Azure AD registrieren muss, und ich habe das getan, also habe ich eine Client-ID und ein Geheimnis. Jedoch kann ich nicht finden, was als nächstes programmgesteuert zu tun ist (I denken Ich verstehe das Konzept, ich muss ein Token erhalten, das ich zur Verfügung stellen muss, wenn ich das Diagramm api rufe). Es scheint, dass es Tonnen von Beispielcode für fast alles gibt, mit Ausnahme von Javascript. Hat jemand Zeiger?

Update: Ich kenne die Beteiligung des Token, und das ist der Teil, den ich nicht meinen Kopf wickeln kann (siehe ursprüngliche Frage/Kommentar); Ich habe eine Client-ID, Ich habe ein Geheimnis, und ich habe diese (sehr häufig) Code:

function graphRead(whatToRead) { 
switch(whatToRead) { 
    case "userinfo" : 
     officeUser = JSON.Parse(loadXMLDoc("GET","https://graph.microsoft.com/v1.0/me")); 
     break; 
    default: 
    }; 
}; 

function loadXMLDoc(mMethod,uURL) { 
    var xmlhttp; 

    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
      if(xmlhttp.status == 200){ 
       return(xmlhttp.responseText); 
      } 
      else if(xmlhttp.status == 400) { 
       alert('There was an error 400') 
      } 
      else { 
       alert('something else other than 200 was returned') 
      } 
     } 
    }; 

    xmlhttp.open(mMethod, uURL, true); 
    xmlhttp.send(); 
}; 

Frage ist: Was muss ich tun, um das Token zu etablieren und an die API senden?

Answer 1

Wenn Sie dies in JavaScript alle clientseitig tun, möchten Sie wahrscheinlich den so genannten "impliziten Grant" -Fluss implementieren. Azure hat eine Beschreibung des Prozesses hier: https://azure.microsoft.com/en-us/documentation/articles/active-directory-v2-protocols-implicit/.

Grundsätzlich hat Ihre Seite entweder einen "Anmelden" -Link oder navigiert automatisch zur Azure-Autorisierungsseite mit allen in die URL kodierten Parametern wie Ihrer Client-ID und den Bereichen, die Sie für das Diagramm anfordern. Bei Bedarf muss sich der Benutzer anmelden, in Ihrem Fall jedoch nicht. Sobald sich der Benutzer mit seinen Anmeldeinformationen anmeldet (bei Bedarf erneut), werden Sie aufgefordert, die Zustimmung zu erteilen, damit Ihre App auf ihre Daten zugreifen kann. Angenommen, sie würden ja sagen, würde Azure mit einem Zugriffstoken in einem Abfrage-Hash auf Ihre Seite umleiten. Sie müssten dort JS-Code haben, um das Zugriffstoken aus dem Hash zu extrahieren. Zum Beispiel würde sich die Umleitung so etwas wie:

https://localhost/myapp/# 
access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q... 
&token_type=Bearer 
&expires_in=3599 
&scope=https%3a%2f%2fgraph.microsoft.com%2fmail.read 
&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6Ik5HVEZ2ZEstZnl0aEV1Q... 
&state=12345 

Pseudo-Schritte

1. Auf Seite zu laden, überprüfen, ob es bereits ein Zugriffstoken in dem URL-Fragmente.
   1. Wenn dies der Fall ist, zeigt dies das Laden nach einer Autorisierungsumleitung an, und Sie können fortfahren, Ihre Graph-Aufrufe durchzuführen.
   2. Wenn nicht, dann müssen Sie den Benutzer auffordern oder automatisch zum Autorisierungsendpunkt umleiten.
2. Sie müssen das Token im HTTP-Header Authorization übergeben, wenn Sie Graph aufrufen. Sie können dies tun, indem Sie die folgende Zeile zu Ihrem Code hinzufügen (vor dem send): xmlhttp.setRequestHeader("Authorization", "Bearer " + token);

Aber warum habe ich dies zu tun?

Die Antwort ist, dass OAuth dreht sich alles um das Ausführen als die App, nicht als der Benutzer ausgeführt wird. Daher gilt das alte Modell der App, das als Benutzer authentifiziert wird, nicht. Der Benutzer muss der App Berechtigungen für den Zugriff auf ihre Daten erteilen.

Also wirklich, was hier passiert ist nicht, dass die App "auth wieder als der Benutzer" muss, muss es als selbst authentifizieren! Das ist wirklich was du tust (indem du deine Klienten ID zur Verfügung stellst). Als Teil dieses Prozesses muss sich der Benutzer anmelden, um seine Identität zu bestätigen, und dann die Zustimmung geben.

Ihr Clientgeheimnis wird im impliziten Fluss überhaupt nicht verwendet. Im Wesentlichen "beweist" Ihre App, dass sie wirklich selbst ist, indem sie die Client-ID verwendet und unter der URL vorhanden ist, die Sie als Teil Ihrer App-Registrierung registrieren.

Answer 2

Die ADAL.js-Bibliothek wird das Leben für alle OAuth-Authentifizierungen gegenüber Azure AD erheblich vereinfachen, einschließlich der Versuche, die Sie mithilfe der impliziten OAuth-Zustimmung innerhalb eines SharePoint js-Blocks durchführen möchten.

1. Registrieren Sie eine App in Ihrem Azure AD-Anwendungsabschnitt. Bearbeiten Sie das Manifest und aktivieren Sie den impliziten OAuth. Fügen Sie "https://mytenant.sharepoint.com" zu der App-Antwort-URL-Liste hinzu.
2. Legen Sie diesen Code in eine Sharepoint-Skript-Editor Webpart JS um den Benutzer zu autorisieren, ein Zugriffstoken und rufen Sie die Graph API erhalten:

<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.10/js/adal.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<body> 
 
    <div><a href="#" onclick="login();return false;">login</a> 
 
    </div> 
 
    <div><a href="#" onclick="getToken();return false;">get access token and user info</a> 
 
    </div> 
 

 
</body> 
 
<script type="text/javascript"> 
 
    var configOptions = { 
 
    clientId: "insert Azure App ClientId here", 
 
    postLogoutRedirectUri: window.location.origin, 
 
    } 
 

 
    var accessToken = null; 
 

 
    window.authContext = new AuthenticationContext(configOptions); 
 

 
    var isCallback = authContext.isCallback(window.location.hash); 
 
    authContext.handleWindowCallback(); 
 

 
    function getToken() { 
 
    authContext.acquireToken("https://graph.microsoft.com", function(error, token) { 
 
     console.log(error); 
 
     console.log(token); 
 
     accessToken = token; 
 
     getUsers(); 
 
    }) 
 
    } 
 

 
    function login() { 
 
    authContext.login(); 
 
    } 
 

 
    function getUsers() { 
 

 
    $.ajax({ 
 
     url: "https://graph.microsoft.com/v1.0/me", 
 
     type: 'GET', 
 
     headers: { 
 
     "Authorization": "Bearer " + accessToken 
 
     }, 
 
     crossDomain: true, 
 
     success: function(response) { 
 
     console.log(response); 
 
     alert(response.userPrincipalName); 
 
     } 
 
    }); 
 

 
    } 
 
</script>