Authentication with Ioni2, Angular 2

Asked

Viewed 127 times

1

I have the class ts Authprovider

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class AuthProvider {
  baseUrl:string = 'http://tutaapp.azurewebsites.net/';
  constructor(public http: Http) {
  }

  createAuthorizationHeader(headers: Headers){
    headers.append('Authorization', window.localStorage.getItem('token'));

  }

  private(){
    let headers = new Headers();
    this.createAuthorizationHeader(headers);
    return this.http.get(this.baseUrl+'token', {
      headers: headers
    }).map(res => res.json());

  }

  login(data){
    return this.http.post(this.baseUrl+'token', data)
    .map(this.extractData);
  }

  isLogged(){
    if(window.localStorage.getItem('Token')){
      return true
    }else{
      return false;
    }
  }

  logout(){
    window.localStorage.removeItem('Token');
    return true;
  }

  private extractData(res: Response){
    let body = res.json();
    if(body.succes === true){
      window.localStorage.setItem('Token', body.Token);
    };
    return body || {};
  }

}

and the login class ts

import { Component } from '@angular/core';
import { NavController, NavParams, AlertController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { AuthProvider } from '../../providers/auth/auth';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(
    public navCtrl: NavController,
    private auth: AuthProvider,
    public alertCrtl: AlertController
  ) {}

  login(FormLogin){
    this.auth.login(FormLogin.value).subscribe(data => {
      if(data.succes === true){
        this.navCtrl.setRoot(HomePage);
      }else{
        FormLogin.password = '';
        let alert = this.alertCrtl.create({
          title: 'Login Failed',
          subTitle: data.message,
          buttons: ['OK']
        })
        alert.present();
      }
    })
  }

}

and html

<!--
  Generated template for the LoginPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <form #FormLogin="ngForm" (ngSubmit)="login(FormLogin)">
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input [(ngModel)]="FormLogin.username" name="username" type="text" required></ion-input>
    </ion-item>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input [(ngModel)]="FormLogin.password" name="password" type="password" required></ion-input>
    </ion-item>
    <ion-item>
      <button [disabled]="!FormLogin.form.valid" type="submit" full ion-button>Login</button>
    </ion-item>
  </form>
</ion-content>

giving the following error

"{"error":"unsupported_grant_type"}"

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.