javascript - mkyong - spring security oauth2 rest example

¿Cómo implemento el consumo seguro de OAuth2 en Javascript?

Question

Estoy en el proceso de diseñar una API en PHP que usará OAuth2.0. Mi objetivo final es construir una aplicación de front-end en javascript (usando AngularJS) que acceda directamente a esta API. Sé que, tradicionalmente, no hay forma de asegurar las transacciones en javascript y, por lo tanto, acceder directamente a una API no es posible. El front-end necesitaría comunicarse con el código del servidor que a su vez se comunicaba directamente con la API. Sin embargo, al investigar OAuth2 parece que User-Agent Flow está diseñado para ayudar en esta situación.

Lo que necesito ayuda es implementar OAuth2 User-Agent Flow en javascript (particularmente AngularJS si es posible ya que eso es lo que estoy usando para mi front-end). No he podido encontrar ejemplos o tutoriales que hagan esto. Realmente no tengo idea de por dónde empezar y no quiero leer toda la especificación de OAuth2 sin al menos ver un ejemplo de lo que voy a ver hacer. Entonces, cualquier ejemplo, tutorial, enlace, etc. sería muy apreciado.

Answer 1

El flujo de concesión implícita (al que se refiere como flujo de agente de usuario ) es exactamente el camino a seguir:

La concesión implícita es un flujo de código de autorización simplificado optimizado para clientes implementado en un navegador que utiliza un lenguaje de scripting como JavaScript.

Para comprender el flujo, la documentación de Google para aplicaciones del lado del cliente es un buen lugar para comenzar. Tenga en cuenta que le recomendamos que tome un paso de validación de token adicional para evitar problemas de ayudantes confusos .

Aquí hay una breve implementación de ejemplo del flujo utilizando Soundcloud API 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 enviar XMLHttpRequests (qué hace la función ajax() en jQuery) usando AngularJS, consulte su documentación del servicio $http .

Si desea conservar el estado, al enviar al usuario al punto final de la autorización, consulte el parámetro de state .

Answer 2

Hay un ejemplo de enfoque de Authorization Code Grant de Authorization Code Grant para obtener un token del servidor OAuth. Usé jQuery ( $ ) para hacer algunas operaciones.

Primero, redirija al 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 dio el pase de autorización para obtener el 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.
}

Puede implementar la Resource Owner Password Credentials Grant del Resource Owner Password Credentials Grant de la misma manera utilizando jQuery o XMLHttpRequest puro y no hacer redirecciones, porque en cada redirección perderá el estado de su aplicación.

Para mí, utilicé el almacenamiento local HTML5 para persistir en el estado de mi aplicación en busca de datos que no suponían una amenaza para la seguridad.