Upgrading from IONIC 1 to 3: How to log in to JSON?

Question

I’m migrating from Ionic 1 to 3, and how many changes.

I created my login API, with token:

Here I put my authorization code to access the API.

And here the result in JSON:

ion-content padding id="page8" style="background-color:#050505;">
    <img src="assets/img/XJWNOP1BQ3WQ94lyrnTe_logo.gif" style="display:block;width:60%;height:auto;margin-left:auto;margin-right:auto;" />
    <form>
        <!--    <div style="width:100%;height:220px;margin:0px 0px;line-height:250px;background-color:#e8ebef;text-align:center;">
            <i class="icon ion-image" style="font-size:64px;color:#888;vertical-align:middle;"></i>
        </div> -->
        <div class="spacer" style="width:300px;height:37px;"></div>
        <ion-list>
            <ion-item>
                <ion-label floating>
                    Email
                </ion-label>
                <ion-input type="email" [(ngModel)]="usuario.email" name="email" placeholder=""></ion-input>
            </ion-item>
            <ion-item>
                <ion-label floating>
                    Senha
                </ion-label>
                <ion-input type="password" [(ngModel)]="usuario.senha" name="senha" placeholder=""></ion-input>
            </ion-item>
        </ion-list>
        <div class="spacer" style="height:40px;"></div>
        <button (click)="submit()" ion-button color="stable" block>
      Entrar
    </button>
        <button ion-button color="positive" block icon-left (click)="loginWithFB()">
      <ion-icon name="facebook"></ion-icon>
      Entrar pelo Facebook
    </button>
        <button ion-button clear color="positive" block on-click="goToCriarConta()">
      Crie sua conta
    </button>

        <button ion-button clear color="positive" block>
      Esqueci a Senha
    </button>

    </form>

So far, so good...

But now comes the update: How can I pass these parameters to my API and log in? I’m doing it this way, but it doesn’t work, it’s wrong:

submit(){
    var link = 'http://localhost/rest/usuario/read_one.php';
    var data = '?email='+ JSON.stringify(this.usuario.email)  + '&senha='+ JSON.stringify(this.usuario.senha);


    this.http.get(link)
      .subscribe(data => {
       this.data.response = data._body;

       if(this.data.response != "[]"){
        var resposta = this.data.response;
        console.log(resposta);

        // tinha que pegar o ID do usuário.... :/
         sessionStorage.setItem("usuarioEmail", this.usuario.email);
         //sessionStorage.setItem("idUsusario", resposta[0].idusuarios);
         sessionStorage.setItem("flagLogado", "sim");

         this.navCtrl.setRoot(WellFitPage, {}, {animate: true, direction: "forward"});
        }else{
          let alert = this.alertCtrl.create({
            title: 'Usuário Não encontrado!',
            subTitle: 'Verifique se digitou seu e-mail e senha corretamente.',
            buttons: ['OK']
          });
          alert.present();
       }
    })
  }

How can I do it correctly? I’m not getting it. I need help. I’ve read all about tutorial...

Answer 1

Ramos, your API expects to receive a POST request and you are sending a GET.

   this.http.get(link)

To send the data in the correct way use

var data = JSON.stringify(this.usuario);
this.http.post(link , data)
.subscribe(response => { *Continue...* });