Comment puis-je implémenter la consommation sécurisée d'OAuth2 en version Javascript?

Je suis en train de concevoir une API en PHP qui utilisera OAuth2.0. Mon objectif final est de créer une application front-end dans javascript (utilisant AngularJS) qui accède directement à cette API. Je sais que traditionnellement il n'y a aucun moyen de sécuriser les transactions en javascript et que l'accès direct à une API n'est pas possible. Le front-end devra communiquer avec le code du serveur qui, à son tour, communique avec l'API directement. Cependant, lors de la recherche de OAuth2, il semble que le flux de l'agent utilisateur soit conçu pour aider dans cette situation.

Ce dont j'ai besoin d'aide, c'est la mise en œuvre du flux d'agent utilisateur OAuth2 dans javascript (en particulier AngularJS, si possible, car c'est ce que j'utilise pour mon front-end). Je n'ai pas pu trouver d'exemples ou de tutoriels qui le font. Je n'ai vraiment aucune idée par où commencer et je ne veux pas lire toutes les spécifications OAuth2 sans avoir au moins un exemple de ce que je vais faire. Donc, des exemples, des tutoriels, des liens, etc. seraient grandement appréciés.

Le flux de la subvention implicite (celui auquel vous parlez en tant que flux utilisateur-agent ) est exactement le chemin à parcourir:

La subvention implicite est un flux simplifié de code d'autorisation optimisé pour les clients implémentés dans un navigateur à l'aide d'un langage de script tel que JavaScript.

Pour comprendre le flux, la documentation de Google pour les applications côté client est vraiment un bon endroit pour commencer. Notez qu'ils vous recommandent de prendre une étape additionnelle de validation des jetons pour éviter les problèmes confondus des adjoints .

Voici un court exemple d'implémentation du flux à l'aide de Soundcloud API et jQuery, tiré de cette réponse :

<script type="text/javascript" charset="utf-8"> $(function () { var extractToken = function(hash) { var match = hash.match(/access_token=([\w-]+)/); return !!match && match[1]; }; var CLIENT_ID = YOUR_CLIENT_ID; var AUTHORIZATION_ENDPOINT = "https://soundcloud.com/connect"; var RESOURCE_ENDPOINT = "https://api.soundcloud.com/me"; var token = extractToken(document.location.hash); if (token) { $('div.authenticated').show(); $('span.token').text(token); $.ajax({ url: RESOURCE_ENDPOINT , beforeSend: function (xhr) { xhr.setRequestHeader('Authorization', "OAuth " + token); xhr.setRequestHeader('Accept', "application/json"); } , success: function (response) { var container = $('span.user'); if (response) { container.text(response.username); } else { container.text("An error occurred."); } } }); } else { $('div.authenticate').show(); var authUrl = AUTHORIZATION_ENDPOINT + "?response_type=token" + "&client_id=" + clientId + "&redirect_uri=" + window.location; $("a.connect").attr("href", authUrl); } }); </script> <style> .hidden { display: none; } </style> <div class="authenticate hidden"> <a class="connect" href="">Connect</a> </div> <div class="authenticated hidden"> <p> You are using token <span class="token">[no token]</span>. </p> <p> Your SoundCloud username is <span class="user">[no username]</span>. </p> </div> 

Pour envoyer XMLHttpRequests (ce que la fonction ajax() fait dans jQuery) en utilisant AngularJS, reportez-vous à leur documentation du service $http .

Si vous souhaitez conserver l'état, lorsque vous envoyez l'utilisateur au point final d'autorisation, vérifiez le paramètre d' state .

Il existe un exemple d' Authorization Code Grant approche pour obtenir un jeton du serveur OAuth. J'ai utilisé jQuery ( $ ) pour effectuer certaines opérations.

D'abord, rediriger l'utilisateur vers la page d'autorisation.

 var authServerUri = "http://your-aouth2-server.com/authorize", authParams = { response_type: "code", client_id: this.model.get("clientId"), redirect_uri: this.model.get("redirectUri"), scope: this.model.get("scope"), state: this.model.get("state") }; // Redirect to Authorization page. var replacementUri = authServerUri + "?" + $.param(authParams); window.location.replace(replacementUri); 

Lorsque l'on a accordé l'autorisation pour obtenir un jeton:

 var searchQueryString = window.location.search; if ( searchQueryString.charAt(0) === "?") { searchQueryString = searchQueryString.substring(1); } var searchParameters = $.deparam.fragment(searchQueryString); if ( "code" in searchParameters) { // TODO: construct a call like in previous step using $.ajax() to get token. } 

Vous pouvez implémenter la Resource Owner Password Credentials Grant la Resource Owner Password Credentials Grant de la même manière en utilisant jQuery ou XMLHttpRequest pur et ne faites pas de redirecteurs – car sur chaque redirection, vous perdrez l'état de votre application.

Pour moi, j'ai utilisé la mémoire locale HTML5 pour persister l'état de ma demande pour les données qui n'étaient pas susceptibles de constituer une menace pour la sécurité.