GitHubContribuir en GitHub: Editar en línea

JavaScript

Leer datos en el mismo dominio (en Mashups)

Utilizando jQuery:

$
    .getJSON('https://Targetprocess/api/v1/UserStories?include=[Id,Name]&take=1000')
    .then(function(data) {
        console.log('Response:', data.Items);
    });

$
    .ajax({url: 'https://Targetprocess/api/v1/UserStories?include=[Id,Name]&take=1000'})
    .then(function(data) {
        console.log('Response XML:', data);
    });

Lo mismo que un mashup con todo el boilerplate necesario:

tau.mashups
    .addDependency('jQuery')
    .addDependency('app.path')
    .addMashup(function($, appPath, config) {
        var apiRoot = appPath.get() + '/api/v1';

        $
            .getJSON(apiRoot + '/UserStories/?include=[Id,Name]&take=1000')
            .then(function(data) {
                console.log('Response:', data.Items);
                // do something with retrieved data
            })
            .fail(function(error) {
                console.log('Error:', error);
                // handle error somehow
            });
    });

❗️ En Targetprocess se deniegan las solicitudes de navegador web de origen cruzado.

Las solicitudes AJAX a los datos de la API de Targetprocess en código de navegador de terceros sólo podrían realizarse en un mashups que se ejecute en el mismo origen que Targetprocess.

Al intentar ejecutar este tipo de solicitudes en otros sitios web recibirá múltiples errores:

  • En Targetprocess respuesta del servidor: HTTP código de estado 405
  • En la consola de errores: XMLHttpRequest no puede cargar https://accountname.tpondemand.com/api/v1/userstories/. La respuesta a la solicitud de verificación previa no pasa la comprobación de control de acceso: La cabecera 'Access-Control-Allow-Origin' no está presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' https://www.yourdomain.com '.

Solución
Utilice en su lugar llamadas JSONP como se describe a continuación.

Lectura de datos a diferentes dominios: Autenticación básica

He aquí un ejemplo de página HTML que contiene código JavaScript incrustado con llamada AJAX a la API REST Targetprocess. Para soportar la compartición de recursos entre orígenes (CORS) y permitir el acceso a los datos de Targetprocess en diferentes dominios, este ejemplo incluye una llamada de retorno JSONP.

El ejemplo utiliza las credenciales de acceso del usuario que ha iniciado sesión en el navegador web. Se utiliza el método de autenticación básica.

🚧 Permitir autenticación básica para peticiones JSONP en la configuración de seguridad de Targetprocess

En Targetprocess Configuración del sistema > Configuración de seguridad El administrador puede permitir o deshabilitar la autenticación básica para las solicitudes JSONP.

La autenticación basada en token siempre está permitida.

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
</body>
<script>
function displayStories(data) {
  var $body = $("body");
  for (var i = 0; i <= data.Items.length; i++) {
    $body.append(data.Items[i].Name).append("<br>");
  }
}

$.getJSON("https://accountname.tpondemand.com/api/v1/userstories?format=json&callback=?", displayStories);
</script>
</html>

El siguiente ejemplo también utiliza la autenticación básica, pero permite definir el nombre de usuario y la contraseña de cualquier usuario activo de Targetprocess y utilizarlos para el acceso posterior.

🚧 Pasar par login:password dentro de la ruta de la aplicación

No utilice el método setRequestHeader('Authorization', 'login', 'password') para su llamada AJAX porque tales cabeceras no se incluyen en tales peticiones JSONP. Origen

var applicationPath = 'https://login:password@accountname.tpondemand.com';
var userStoriesDatePath = applicationPath + '/api/v1/userstories?format=json';

$.ajax({
    type: 'GET',
    url: userStoriesDatePath,
    dataType: 'jsonp',
    success: function(data) {
        console.log('Success', data);
    },
    error: function(request, textStatus, errorThrown) {
        console.log('Error', request.responseText, textStatus, errorThrown);
    }
});

Cuando el par login:password proporcionado en este código script no puede ser verificado por el servidor, el usuario verá una ventana de diálogo emergente solicitando la introducción de credenciales en el navegador web. Estas credenciales se utilizarán para la autenticación posterior.

❗️ Internet Explorer no soporta JSONP con autenticación Básica

La inyección de credenciales en URL no es compatible con el navegador web IE. Utilice el método de autenticación basado en token en IE en lugar del básico.

Lectura de datos a diferentes dominios: Autenticación por token

Este ejemplo de solicitud JSONP AJAX GET a la API REST de Targetprocess utiliza el método de autenticación basado en token.

var hostname = 'https://myaccount.tpondemand.com';
var authenticationToken = 'MTpFQUVXMHdRVGRMN0x1OXJPYWRXZWZaRkc2aDJaSkRyVWdyWm9rK2tFcldBPS==';
var isTokenSetFromUserProfileTab = true;
//use 'true' if token is issued from User Profile > Access Tokens tab
//use 'false' when token is issued from /api/v1/Authentication API endpoint
  
var takeCount = 10;
var entityTypeResourceName = 'userstories';
var filter = '';
var includeFields = '';

var dataUrl = hostname + '/api/v1/' + entityTypeResourceName + '?format=json' +
    '&where=' + filter +
    '&take=' + takeCount +
    (includeFields.length > 0 ? '&include=' + includeFields : '') +
    '&' + (isTokenSetFromUserProfileTab ? 'access_token' : 'token') + '=' + authenticationToken;

$.ajax({
    type: 'GET',
    url: dataUrl,
    dataType: 'jsonp',
    success: function(data) {
        console.log('Success', data);
    },
    error: function(request, textStatus, errorThrown) {
        console.log('Error', request.responseText, textStatus, errorThrown);
    }
});

Modificar datos del mismo dominio (en Mashups)

Este es un ejemplo de Mashup básico para Targetprocess. Crea una nueva historia de usuario en la cuenta donde se instala. Utiliza un método de autenticación basado en tokens. Cuando se crea una nueva historia, su ID numérico se escribe en la consola del navegador web.

tau.mashups
.addDependency('jQuery')
.addDependency('app.path')
.addMashup(function($, appPath, config) {

  var authenticationToken = 'MTpFQUVXMHdRVGRMN0x1OXJPYWRXZWZaRkc2aDJaSkRyVWdyWm9rK2tFcldBPS==';
  var isTokenSetFromUserProfileTab = true;
  //use 'true' if token is issued from User Profile > Access Tokens tab
  //use 'false' when token is issued from /api/v1/Authentication API endpoint

  var entityTypeResourceName = 'userstories';
  var resultIncludeFields = '[Id,Name,CreateDate]';

  var dataUrl = appPath.get() + '/api/v1/' + entityTypeResourceName + '?format=json' 
  + '&resultInclude=' + resultIncludeFields
  + '&' + (isTokenSetFromUserProfileTab ? 'access_token' : 'token') + '=' + authenticationToken;

   $.ajax({
    type: 'POST',
    url: dataUrl,
    contentType: 'application/json',
    dataType: 'json',
    data: '{"Project" : {"ID" : 2}, "Name": "Test User Story Name", "Description": "Test User Story Description"}',
    success: function(data) {
      console.log(data);
    },
    error: function(request, textStatus, errorThrown) {
      console.log(request.responseText);
      console.log(textStatus);
      console.log(errorThrown);
    }
    });
});

Modificar datos de distintos dominios

❗️ Se deniegan las solicitudes de navegador web de origen cruzado en Targetprocess

Las solicitudes AJAX a los datos de la API de Targetprocess en código de navegador de terceros sólo podrían realizarse en un mashups que se ejecute en el mismo origen que Targetprocess.

Al intentar ejecutar este tipo de solicitudes en otros sitios web recibirá múltiples errores:

  • En Targetprocess respuesta del servidor: HTTP código de estado 405
  • En la consola de errores: XMLHttpRequest no puede cargar https://accountname.tpondemand.com/api/v1/userstories/. La respuesta a la solicitud de verificación previa no pasa la comprobación de control de acceso: La cabecera 'Access-Control-Allow-Origin' no está presente en el recurso solicitado. Por lo tanto, no se permite el acceso al origen ' https://www.yourdomain.com '.

Existen múltiples soluciones posibles, todas ellas o bien son complejas y requieren configurar algunos servicios adicionales, o bien no son seguras:

  • Realizar solicitudes POST a Targetprocess REST API desde su lado backend. Deje que su navegador web envíe llamadas AJAX a su backend. Añadir proxy / reenvío de secuencias de comandos o servicios a su backend que se comunicará con Targetprocess REST API y enviar los resultados de vuelta al navegador web.
  • Desactive la Política de Mismo Origen en la configuración de su navegador web. Aprende a hacerlo.

Entonces podrás publicar llamadas AJAX en el mismo formulario que se realizan desde el mismo dominio.

//this script works in a web browser only with Same Origin Policy disabled

var hostname = 'https://myaccount.tpondemand.com';
var authenticationToken = 'MTpFQUVXMHdRVGRMN0x1OXJPYWRXZWZaRkc2aDJaSkRyVWdyWm9rK2tFcldBPS==';
var isTokenSetFromUserProfileTab = true;
//use 'true' if token is issued from User Profile > Access Tokens tab
//use 'false' when token is issued from /api/v1/Authentication API endpoint
  
var entityTypeResourceName = 'userstories';
var resultIncludeFields = '[Id,Name,Description,CreateDate]';

var dataUrl = hostname + '/api/v1/' + entityTypeResourceName + '?format=json' 
+ '&resultInclude=' + resultIncludeFields
+ '&' + (isTokenSetFromUserProfileTab ? 'access_token' : 'token') + '=' + authenticationToken;

 $.ajax({
    type: 'POST',
    url: dataUrl,
    contentType: 'application/json',
    dataType: 'json',
		data: '{"Project" : {"ID" : 2}, "Name": "User Story Name", "Description": "User Story Description"}',
		success: function (data) {
			console.log(data);
		},
		error: function (request, textStatus, errorThrown) {
			console.log(request.responseText);
			console.log(textStatus);
			console.log(errorThrown);
		}
   });