IONIC call webservice token

Ionic Framework ionic-v3
1

Hello,
i am trying to create an login app
in order to receive token from a webservice.
Can anyone help me out?

2

Check the documentation of the webservice you use. This will explain how to use it.

1 Like
3

the problem is that i got issues with the syntax in the ionic …

4

What code do you already have?
Show us that + the place where the syntaxerror happens

6

import { Component, ViewChild } from ‘@angular/core’;
import { Nav, Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import {HttpParams,HttpClient} from “@angular/common/http”;
import { HomePage } from ‘…/pages/home/home’;
import { ListPage } from ‘…/pages/list/list’;
import {DemoService} from “./demo.service”;

@Component({
templateUrl: ‘app.html’,
selector:‘my-app’,
template:`

Demo App

foods

  • {{food.name}}
`})

export class Appcomponent{
name:string;

constructor(private http:HttpClient) {
this.http.get(‘http://192.168.0.6:81/EBSWebApi/api/login/’);
let params = new HttpParams();
params = params.append(‘SubscriptionID’, ‘3D’);
params = params.append(‘SubscriptionPassword’, ‘passx’);
params = params.append(‘BridgeID’, ‘’);
params = params.append(‘UserID’, ‘khcadmin’);
params = params.append(‘Password’, ‘P@ssw0rd’);
params = params.append(‘BranchID’, ‘01’);
params = params.append(‘LangID’, ‘en-US’);

}

8

but you called get before the setup …

in my code

var u='http://'+self.ourserveraddress+'/files?'+encodeURI(urlstring);
 	 	this.http.get(u,{},{})
			.then(function(response)

if u need to pass params, then you have to add stuff to the api request parms,
where i have {}

9

var u=‘http://’+self.ourserveraddress+’/files?’+encodeURI(urlstring);
this line is made up for what exactly reason?

10

i don’t understand the question. i used a variable because I wanted to

the POINT was that you needed to pass some parameters to the request, but didn’t

11

You may have to change your way to consume your web service, change the “get” method to “post”.
The code I use to consume a web service is like this :

constructor(private http:Http)
{
//your code here
}

To consume a web service :

this.http.post("http://address_and_methodName_of_my_webservice", "my parameter in JSON format",getOptions())
.subscribe(restp=>{//your code here if you can correctly consume your ws}
.err=>alert(err)
);
12

my custom web service has 4 http methods

get, post, put and delete

post and put take a body, get and delete do not

13

“get” and “post” are the same method

14

not… get does NOT take a body, and is an operation to get data FROM the endpoint.
post is an operation to SEND data TO the endpoint. (above URL parms, this is called a request body)

15

the get method takes a body but the it’s visible in the url address, the trouble is the fact that you can’t count on the get method to send advanced data, like json or xml files, only some basic text.
get also sends data to an endpoint

16

ok, granted, you CAN send body data with GET … never seen it used that way

17

well and how am i supposed to add my parameters?

18

the doc on http get says

get(url, parameters, headers)

and parameters and headers are objects, not strings
so (I can’t find what HttpParams object does)

let params = {
‘SubscriptionID’: ‘3D’,
'SubscriptionPassword’: ‘passx’,
‘BridgeID’: '',
'UserID’, ‘khcadmin’,
‘Password’: ‘P@ssw0rd’,
‘BranchID’: ‘01’,
‘LangID’: ‘en-US’};
this.http.get(‘http://192.168.0.6:81/EBSWebApi/api/login/’, params);
1 Like
19

image
image.png1919×165 19.2 KB

i used a similar code,
it worked better ,
many thanks for your help but
i am still getting an issue.
I uploaded a screenshot with the issue as you can see

20

ok, you need an http header set… that is the last parm of the http get

the message tells you which header… I will let you research it (google search)

1 Like
21

// in folder -> app/providers/loginservice/loginservice.ts

import { HttpClient } from ‘@angular/common/http’;
import { Injectable } from ‘@angular/core’;
import ‘rxjs/add/operator/map’;
import {Observable} from “rxjs/Observable”;

@Injectable()
export class LoginServiceProvider {
url;
params : {
SubscriptionID: string;
SubscriptionPassword: string;
BridgeID: string;
UserID: string;
Password: string;
BranchID: string;
LangID: string;
}
constructor(public http: HttpClient) {
console.log(‘Hello LoginServiceProvider Provider’);
this.url=‘http://192.168.0.6:81/EBSWebApi’;
}

getLogin(SubscriptionID,SubscriptionPassword,BridgeID,
UserID,Password,BranchID,LangID):Observable{
return this.http.get(this.url,)
}}

// in different folder -> app/pages/home/home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {LoginServiceProvider} from “…/…/providers/login-service/login-service”;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
params : {
SubscriptionID: string;
SubscriptionPassword: string;
BridgeID: string;
UserID: string;
Password: string;
BranchID: string;
LangID: string;
}
constructor(public navCtrl: NavController,
private loginServiceprovider:LoginServiceProvider) {

}
ionViewWillEnter(){
this.params={
SubscriptionID: “3D”,
SubscriptionPassword: “passx”,
BridgeID: “”,
UserID: “khcadmin”,
Password: “P@ssw0rd”,
BranchID: “01”,
LangID: “en-US”
};

this.loginServiceprovider.getLogin(this.params.SubscriptionID,
this.params.SubscriptionPassword,
this.params.BridgeID,this.params.UserID,
this.params.Password,this.params.BranchID,this.params.LangID)
.subscribe(login=>{
console.log(login);
});
}}

Thats my whole code…
its a bit different to yours

22

I installed a plug-in in Chrome and it fixed my first error for the
Allow-access-header-origin .
My second error still exists…

photo:
image

in more details:

image
image.png1474×202 21.5 KB