How to send an authenticated request using ionic native http plugin


#1

Hi all
I need to send a request to Shopify server.
I get data from Shopify server using postman without any error but I don’t know how to format my request in ionic native http request.
please help someone I’m new in ionic

my code
code

error I get

postman screen shot

please write someone the proper request format


#2

You’re using the http.get wrong!
this.http.get(url, {}, headers) should be -> this.http.get(url, headers)

a .get doesn’t take a payload with the request.

AND PLEASE!
Don’t share screenshots of your code. COPY PASTE, so we can easily copy paste too : )


#3

Thanks @bilow for answering
ionic native http.get() requires 3 parameters
can you please write the correct one to work

my code

getCustomers() {
const username = “ca692bd88cb5cca6a58e4a2b4026804d”;
const password = “9b9a671663c92cc49b4aeda2edc07804”;
const encoded = btoa(username + “:” + password);
const url: string = “https://nawrooz.myshopify.com/admin/customers.json”;
const headers = new Headers();
headers.append(‘Authorization’, Basic ${encoded});

this.http.get(url, {}, headers)
  .then(
    res => {
      console.log("Result ", res)
    },
    err => {
      console.log("Error: ", JSON.stringify(err))
    })

}


#4

Can I see your import of the HTTP?

import { xxx } from “xxx”;


#5

import { HTTP } from ‘@ionic-native/http’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController, private provider: DataProvider, public http: HTTP) {
}


#6

username = “ca692bd88cb5cca6a58e4a2b4026804d”
password = “9b9a671663c92cc49b4aeda2edc07804”
url = “https://nawrooz.myshopify.com/admin/customers.json”

these are my credentials in case you need (working in postman)


#7

Ahh, you’re using the old HTTP module. Please consider using the new (Angular) Http module.

Todo:
in app.module.ts:

import { HttpClientModule } from "@angular/common/http";
...
  imports: [
    ...
    HttpClientModule,
    ...
    ]

in home.ts:

import { HttpClient, HttpHeaders } from "@angular/common/http";
...
constructor( ..., private http: HttpClient, ...){ ... }
...
getCustomers(){
    const username = “ca692bd88cb5cca6a58e4a2b4026804d”;
    const password = “9b9a671663c92cc49b4aeda2edc07804”;
    const encoded = btoa(username + “:” + password);
    const url: string = “https://nawrooz.myshopify.com/admin/customers.json 1”;
    const headers: HttpHeaders = new HttpHeaders({
      Authorization: `Basic ${encoded}`,
    });

    this.http.get(url, { headers })
      .subscribe( (res) => {
          console.log("Result ", res);
        }, (err) => {
          console.log("Error: ", err);
        });
}

Something like this… (not tested :slight_smile: )


#8

dear @bilow
I get this error now

[13:31:04] console.log: Ionic Native: deviceready event fired after 14862 ms
[13:31:06] console.log: Error: [object Object]
[13:31:15] console.log: Error: [object Object]

if I stringfy the error shows the following when I click send request button

[13:33:53] console.log: Ionic Native: deviceready event fired after 14103 ms
[13:33:57] console.log: Error:
{“headers”:{“normalizedNames”:{},“lazyUpdate”:null,“headers”:{}},“status”:0,“statusText”:“Unknown
Error”,“url”:null,“ok”:false,“name”:“HttpErrorResponse”,“message”:“Http failure response for (unknown url):
0 Unknown Error”,“error”:{“isTrusted”:true}}

the code
getCustomers() {
const username = “ca692bd88cb5cca6a58e4a2b4026804d”;
const password = “9b9a671663c92cc49b4aeda2edc07804”;
const encoded = btoa(username + “:” + password);
const url: string = “https://nawrooz.myshopify.com/admin/customers.json”;
const headers: HttpHeaders = new HttpHeaders({
Authorization: Basic ${encoded},
});

this.http.get(url, { headers })
  .subscribe((res) => {
    console.log("Result ", res);
  }, (err) => {
    console.log("Error: ", JSON.stringify(err));
  });

}


#9

hi @bilow
I used angular HttpClient instead of “ionic native http plugin” I faced to the to CORS problem, then I create a proxy in ionic.config.json like bellow

{
“name”: “test1”,
“app_id”: “1d1a5e77”,
“type”: “ionic-angular”,
“integrations”: {
“cordova”: {}
},
“proxies”: [
{
“path”: “/api”,
“proxyUrl”: “https://nawrooz.myshopify.com
}
]
}

this is the code
getCustomers() {
const username = “ca692bd88cb5cca6a58e4a2b4026804d”;
const password = “9b9a671663c92cc49b4aeda2edc07804”;
const encoded = btoa(username + “:” + password);
const url = “api/admin/customers.json”;
const headers: HttpHeaders = new HttpHeaders({
Authorization: Basic ${encoded},
});
this.http.get(url, { headers })
.subscribe((res) => {
console.log("Result: ", res);
}, (err) => {
console.log("Error: ", err);
});
}
but now I get this error


please help me what is wrong