[Angular 2] Consommer un web service

Version imprimable

Bonsoir,

Je débute dans la programmation sous Angular 2 à l'aide de Ionic, je dois faire appel à un web service qui se trouve en local sur ma machine, je voulais savoir si en TypeScript, il est possible de consommer un web service définit à l'aide de sa wsdl, et si oui, comment.

J'avais voulu faire le test à l'aide de l'exemple présent ici mais vu que ce n'est pas du json, je ne trouve pas de piste.

Dans mon cas, le lien vers la wsdl se trouve à l'adresse suivante :
http://win-9u040a2kpbv:83/adelerh/se...Authentication

Je dois faire appel à la fonction LocalServiceLoginToken, elle a un unique paramètre de type chaine, le nom de ce paramètre est token, en sortie, j'obtiens une chaine, le nom du paramètre de sortie est sessionId.

Merci

EDIT : J'ai mis le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function soapRequest(){
	let jeton='contenu de ma clé token';
	let return_value=	'<?xml version="1.0" encoding="UTF-8"?>'+
						'<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">'+
						'<SOAP-ENV:Header/>'+
						'<SOAP-ENV:Body>'+
						'<ns1:LocalServiceLoginToken xmlns:ns1="http://www.sage.com/fr/line1000/Sage1000Authentication">'+
						'<ns1:token>'+jeton+'</ns1:token>'+
						'</ns1:LocalServiceLoginToken>'+
						'</SOAP-ENV:Body>'+
						'</SOAP-ENV:Envelope>'; 
 
	return return_value;
}
 
function readBody(xhr) {
    let data;
    if (!xhr.responseType || xhr.responseType === "text") {
        data = xhr.responseText;
    } else if (xhr.responseType === "document") {
        data = xhr.responseXML;
    } else {
        //data = xhr.response;
		data = xhr.responseText;
    }
    return data;
}	
 
function Autentication_get_sessionId() { 
	//ne sachant pas laquelle des 2 adresses est la bonne, je les met dans 2 variables différents et j'échange les numéros dans mes tests
	let url_autentication2='http://win-9u040a2kpbv:83/adelerh/server/soap.l1000?wsdl=Sage1000Authentication';
	let url_autentication1='http://win-9u040a2kpbv:83/adelerh/server/soap.l1000';
 
 
	let xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', url_autentication1, true);
 
	xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4) {
                   alert(readBody(xmlhttp));
                }
            }
    // Send the POST request
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xmlhttp.send(soapRequest());
}

Puis, quand je fais appel à Autentication_get_sessionId, j'ai un message vide qui s'affiche.

Re-coucou, notre web service a été modifié car il avait été mal conçu, il n'était pas adapté pour fonctionner sur des appareils mobiles, du coup, mes collègues sont en train de le retravailler.

Là, j'aimerais faire appel à une méthode de type GET, je dois ajouter 2 paramètres dans le header, qui sont Accept et Content-Type, tous les 2 ont une valeur commune qui est application/json

J'ai crée une page homte-service.ts avec le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class HomeService {
  data: any;
  url_ws: string;
 
  constructor(private http: Http) {
	this.data = null;
	this.url_ws="http://win-9u040a2kpbv:8081/sdata/WSMobiliteAdeleRH/";
  }
 
  loginUser(param_email, param_pwd) {
	let url_connection=this.url_ws+"DonnerConnexion?aLogin="+param_email+"&aMDP="+param_pwd;
 
	alert(url_connection);
 
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
	}
 
    // don't have the data yet
 	let myHeaders = new Headers();
    myHeaders.append('Accept', 'application/json');
    myHeaders.append('Content-Type', 'application/json');
 
 
	this.http.get(url_connection,{"headers" : myHeaders})
	.subscribe(
		data => alert('data'), //this.product = JSON.stringify(data),
		err=>alert(err)
		);
 
  }
}

Dans ma page home.ts, j'ai mis le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {PagePersonnellePage} from '../page-personnelle/page-personnelle'
import {HomeService} from './home-service'
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
 
//declare var atlan: any; 
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [HomeService]
})
export class HomePage {
	public connection_email: string;
	public connection_pwd: string;
 
  constructor(public navCtrl: NavController, public http: Http, public HomeService : HomeService) {
 
  }
 
  doConnection(){
	  let var_email=this.connection_email;
	  let var_pwd=this.connection_pwd;
 
		if (var_email==undefined || var_email=="")
		{
			alert("Please mention the email address");
			return;
		}
 
		if (validateEmail(var_email)==false)
		{
			alert("Invalid email address")
			this.connection_email="";
			return;
		}
 
		if (var_pwd==undefined)
			{
				var_pwd='';
			}
 
	if (this.Autentication_get_sessionId(var_email, var_pwd)) 
	{
		//change page
		this.navCtrl.push(PagePersonnellePage, {
			firstPassed: var_email,
			secondPassed: var_pwd
		});
		this.connection_email='';
		this.connection_pwd='';
	} //if (this.Autentication_get_sessionId()) 
  } //doConnection
 
  MDPOublie(){
	  alert("ok")
  } //MDPOublie
 
Autentication_get_sessionId(param_email, param_pwd) { 
	let ws_ok=false;
 
	this.HomeService.loginUser(param_email, param_pwd)
		{
 
		};
 
	ws_ok=true;
	   return ws_ok;
} //Autentication_get_sessionId
} //export class HomePage
 
function validateEmail(email) {
    let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

Dans la fonction Authentication_get_sessionId, j'aimerais qu'elle renvoie la valeur True quand les identifiants ont été correctement saisis, d'où la présence d'un booléen, mais je verrais cela dans un second temps où je dois voir comment faire appel à une méthode GET, quand je teste, j'ai ce message d'erreur qui est remonté:

Citation:

Response with status: 0 for URL: null

Pourriez-vous m'aider à résoudre ce nouveau problème?
Merci

29/09/2017, 14h34
Biomega
Salut ,

Tu ne t'abonne pas a ton service.
Code:

1 2 3 this.HomeService.loginUser(param_email, param_pwd).subscribe((response)=>{ alert(response); })
Un truc du genre .

Mais je pense que tu aborde le problème avec un mauvais angle :) .
je te renvoi vers le tuto sur les services .

https://angular.io/tutorial/toh-pt4
02/10/2017, 15h33
Invité

Bonjour Biomega,

Voyant que je n'arrivais pas à grand chose avec l'usage des promesses (ou des observables), j'ai procédé différemment, je ne sais pas si c'est une méthode conseillée, mais chez moi, ça marche : j'ai supprimé le fichier module.ts de homepage, j'ai juste gardé le fichier home.ts, ce dernier fait appel à app-service.ts où j'ai implémenté des fonctions qui ne font que générer des url pour consommer les différents web services, du coup, dans home.ts, je récupère l'url du web service et je consomme mes web services dans ce dernier.