45 votos

¿Cómo puedo implementar segura OAuth2 consumo en Javascript?

Estoy en el proceso de diseño de una API en PHP que uso OAuth2.0. Mi objetivo final es construir una aplicación front-end de javascript (utilizando AngularJS) que acceda a esta API directamente. Sé que tradicionalmente no hay manera de asegurar las transacciones en javascript y así acceder directamente a una API no es factible. El front-end tendría que comunicarse con el servidor de código que a su vez comunica directamente con la API. Sin embargo, en la investigación de OAuth2 parece como si el Agente de Usuario de Flujo está diseñado para ayudar en esta situación.

Lo que necesito ayuda es la aplicación de la OAuth2 de Agente de Usuario de Flujo de javascript (en particular AngularJS si es posible, ya que es lo que estoy usando para mi front-end). No he sido capaz de encontrar ejemplos o tutoriales que hacer esto. Realmente no tengo idea de por donde empezar y no quiero leer a través de todo el OAuth2 spec sin al menos ver un ejemplo de lo que estoy mirando en hacer. Así que cualquiera de los ejemplos, tutoriales, enlaces, etc, sería muy apreciado.

49voto

Jan Gerlinger Puntos 4906

El Implícita flujo de Subvenciones (la que usted se refiere como el Agente de Usuario de Flujo) es exactamente el camino a seguir:

El implícito de la subvención es una simplificado de autorización de flujo de código optimizado para los clientes implementado en un navegador, utilizando un lenguaje de scripting como JavaScript.

Para entender el flujo de la documentación de Google para aplicaciones del lado cliente es realmente un buen lugar para empezar. Se nota que le recomendamos que tome un token de validación de paso para evitar confundir el diputado problemas.

Aquí hay un ejemplo de aplicación del flujo utilizando la API de Soundcloud y jQuery, tomado de esta respuesta:

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

Para el envío de XMLHttpRequests (lo que el ajax() función en jQuery) utilizando AngularJS, consulte la documentación de la $http de servicio.

Si desea conservar el estado, al momento de enviar al usuario a la autorización extremo, echa un vistazo a la state parámetro.

1voto

Artem Oboturov Puntos 2292

Hay un ejemplo Authorization Code Grant enfoque para obtener un token de OAuth servidor. He usado jQuery ($) para realizar algunas operaciones.

En primer lugar, redirigir usuario a la página de autorización.

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

Cuando uno de ellos le dio autorización pasar para obtener token:

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

Se puede aplicar el Resource Owner Password Credentials Grant de la misma manera usando jQuery o puro XMLHttpRequest y no hacer ningún tipo de redirecciones - porque en cada redirigir pierdes estado de su solicitud.

Para mí, he utilizado el almacenamiento local HTML5 para persistir el estado de mi solicitud de datos que no fueron capaces de representar una amenaza para la seguridad.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X