office 365 graph api da javascript: come autenticare correttamente

Question

Io non odio Oauth, ma mi odio per non essere in grado di avvolgere la mia mente attorno al concetto. Detto questo, ecco la mia domanda: sto cercando di chiamare l'API di Office Graph REST da vanilla javascript. Quindi eseguo regolarmente XMLHttpRequest su graph.microsoft.com da una pagina che viene eseguita sul mio sito di SharePoint Online (pertanto il codice deve essere eseguito dal mio contesto di sicurezza, poiché sono connesso). La chiamata restituisce 403 Autenticazione richiesta. Suppongo di dover registrare un'applicazione in Azure AD e l'ho fatto, quindi ho un ID cliente e un segreto. Tuttavia, non riesco a trovare cosa fare a livello di programmazione (I penso Capisco il concetto, devo ottenere un token che devo fornire quando si chiama il grafico api). Sembra che ci sia un sacco di codice di esempio per qualsiasi cosa, ad eccezione di javascript. Qualcuno ha dei suggerimenti?

Aggiornamento: Conosco il coinvolgimento del token e questa è la parte che non riesco a comprendere (vedi domanda/commento originale); Ho un ID cliente, ho un segreto, e non ho questo codice (molto comune):

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(); 
}; 

domanda è: che cosa devo fare per stabilire il token e inviarlo al API?

Answer 1

Se si sta eseguendo tutto questo lato client in JavaScript, è probabile che si desideri implementare il cosiddetto flusso di "concessione implicita". Azure ha una descrizione del processo qui: https://azure.microsoft.com/en-us/documentation/articles/active-directory-v2-protocols-implicit/.

Fondamentalmente la pagina dovrebbe avere un collegamento di "accesso" o accedere automaticamente alla pagina di autorizzazione di Azure con tutti i parametri codificati nell'URL come l'ID cliente e gli ambiti che si richiedono al grafico. Se necessario, l'utente dovrà accedere, ma nel tuo caso potrebbe non doverlo fare. Una volta che l'utente accede con le proprie credenziali (di nuovo, se necessario), gli sarebbe richiesto di concedere il consenso per consentire alla propria app di accedere ai propri dati. Supponendo che dica sì, Azure reindirizza nuovamente alla tua pagina con il token di accesso in un hash di query. Dovresti avere il codice JS per estrarre il token di accesso dall'hash. Ad esempio, il reindirizzamento sarebbe simile:

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-passi

1. al caricamento della pagina, verificare se c'è già un token di accesso nel frammento URL.
   1. Se è così, questo indica il caricamento dopo un reindirizzamento dell'autorizzazione e si può procedere a effettuare le chiamate del grafico.
   2. In caso contrario, è necessario richiedere all'utente o il reindirizzamento automatico all'endpoint di autorizzazione.
2. È necessario passare il token nell'intestazione http Authorization http quando si chiama Graph. È possibile farlo aggiungendo la seguente riga di codice (prima della send): xmlhttp.setRequestHeader("Authorization", "Bearer " + token);

Ma perché devo fare questo?

La risposta è che OAuth riguarda l'esecuzione come app, non in esecuzione come utente. Pertanto, il vecchio modello dell'app che esegue l'autenticazione come utente non si applica. L'utente deve concedere le autorizzazioni all'app per accedere ai propri dati.

Quindi quello che sta succedendo qui non è che l'app debba "ricominciare come utente", deve autenticarsi come se stessa! Questo è ciò che stai facendo (fornendo il tuo ID cliente). Come parte di tale processo, l'utente può effettuare il login per confermare la propria identità, quindi fornire il consenso.

Il tuo segreto cliente non verrebbe utilizzato affatto nel flusso implicito. In sostanza, la tua app "dimostrerebbe" che è realmente essa stessa utilizzando l'ID cliente e che è presente all'URL registrato come parte della registrazione dell'app.

Answer 2

La libreria ADAL.js semplificherà la vita di tutte le autenticazioni OAuth contro Azure AD, compreso ciò che si sta tentando di fare utilizzando il consenso OAuth implicito all'interno di un blocco js di SharePoint.

1. Registrare un'applicazione nella sezione delle applicazioni di Azure AD. Modifica il manifest e attiva OAuth implicito. Aggiungi "https://mytenant.sharepoint.com" all'elenco Rispondi URL.
2. inserire questo JS codice in uno SharePoint Script Editor Webpart per autorizzare l'utente, ottenere un token di accesso e chiamare l'API Grafico:

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