Ionic2 / Angular 2 - Wordpress generate cookie auth from from app - wordpress

Question

I am trying to generate a cookie auth from an ionic app as a front-end, and Wordpress as back-end (I'm using this JSON API USER plugin).
The first step is to generate the nonce : MYURLBASE/api/get_nonce/?controller=user&method=generate_auth_cookie
Then generate cookie: MYURLBASE/api/user/generate_auth_cookie/?nonce=375034fjwfn39u8&username=john&passsword=PASSWORD-HERE
I can get the nonce, but I'm having trouble building the service handling the request.
Here is my login.html:
<form [ngFormModel]="loginForm" (submit)="login(username, password)" style="padding-top: 50px">
<ion-list>
<ion-item>
<ion-label stacked-label>Nom d'utilisateur ou Email</ion-label>
<ion-input type="text" [(ngFormControl)]="username" value=""></ion-input>
</ion-item>
<ion-item>
<ion-label stacked-label>Mot de passe</ion-label>
<ion-input type="password" [(ngFormControl)]="password" value=""></ion-input>
</ion-item>
</ion-list>
<div>
<button block type="submit">Connexion</button>
</div>
</form>
This is my login.ts:
import {Page, NavController, Alert} from 'ionic-angular';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl, Control } from 'angular2/common';
import { Http, Headers, RequestOptions, Request, RequestMethod, Response } from 'angular2/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import {LoginService} from './login.service';
import {WooPage} from '../woo/woo';
#Page({
templateUrl: 'build/pages/ecommerce/login/login.html',
providers:[LoginService],
})
export class LoginPage {
loginForm: ControlGroup;
username: AbstractControl;
password: AbstractControl;
response;
constructor(private loginService:LoginService, public nav: NavController,
fb: FormBuilder){
this.loginForm = fb.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
this.username = this.loginForm.controls['username'],
this.password = this.loginForm.controls['password']
}
// For test purposes
getNonce() {
this.loginService.getNonce()
.subscribe(
response => this.response = response,
error => console.log(error));
}
// For test purposes
generateCookie() {
this.loginService.generateCookie(this.loginService.getNonce())
.subscribe(
response => this.response = response,
error => console.log(error));
}
login(
username:string,
password:string) :void {
this.loginService.login(
username = this.username.value,
password = this.password.value
)
.subscribe(
response => this.response = response,
error => console.log(error)
);
}
}
And finally my login.service.ts:
import {Injectable,Inject} from 'angular2/core';
import {Http,Headers,Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {NavController, Alert} from 'ionic-angular';
#Injectable()
export class LoginService {
private nonceUrl = 'https://MYURL/api/get_nonce/?controller=user&method=generate_auth_cookie'
private cookieUrlBase = 'https://MYURL/api/user/generate_auth_cookie/?nonce='
constructor(private http:Http) {}
getNonce() {
let nonce = this.http.get(this.nonceUrl).map(res => res.json().nonce);
return nonce;
}
generateCookie(nonce) {
return this.http.get(this.cookieUrlBase+nonce+'&username='+'chuckNorris'+'&password='+'chuckchuck')
}
// TODO: login(
// username: string,
// password: string):Observable<any> {
//
// const body = JSON.stringify(username + password);
// let headers = new Headers();
//
// headers.append('Content-Type', 'application/x-www-form-urlencoded');
// return this.http.post(, body, {
// headers : headers
// }).map(res => res.json());
// }
}
When I call the generateCookie function, I get the following url generated:
https://MYURL/api/user/generate_auth_cookie/?nonce=[object%20Object]&username=chuckNorris&password=chuckchuck
How can I pass the nonce value, as not to be an object?
Is there a better way to achieve the login authentification?
Thanks for the help, as I'm pretty lost here...
Yin.

Answer 1

try with:
getNonce() {
return new Promise(resolve => {
this.http.get(this.nonceUrl)
.map(res => res.json())
.subscribe(data => {
console.log(data);
});
});
}
Then, the result is something like:
{"status":"ok","controller":"user","method":"generate_auth_cookie","nonce":"66e6054397"}
So, then pass only the "nonce" property and not the entire object: result.nonce
this.cookieUrlBase+result.nonce+'&username='+'chuckNorris'+'&password='+'chuckchuck'