DEV Community

Juraj Chovan
Juraj Chovan

Posted on • Updated on

Autentifikácia v Ionic (ver.5) aplikácii cez REST API (2.časť) - registrácia

V prvej časti sú iba informácie o tom, aké sú REST API volania a čo (v prípade úspechu) vracajú.
Pokračujem vytvorením funkcionality "Registrácia" v Ionic (ver.5) aplikácii.

Najprv si vytvoriť model "User", tj.vytvoriť si nový (prázdny) súbor "../src/app/models/user.ts" v ktorom pridať kód:

export class User {
  id?: string;
  name?: string;
  email?: string;
  password?: string;
}
Enter fullscreen mode Exit fullscreen mode

Triedu "User" budem využívať pri autentifikácii používateľa cez servis "auth".
V servise "auth" (tj.v súbore "auth.service.ts") doplniť kód:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  private url = 'http://127.0.0.1:8000/api';

  constructor(
    private http: HttpClient
  ) { }

  // registracia noveho pouzivatela:
  register(user: User) {
    return this.http.post(`${this.url}/register`, user);
  }
  // login existujuceho pouzivatela:
  login(credentials: User): Observable<string> {
    return this.http.post<{access_token: string}>(`${this.url}/login`, credentials).pipe(
      map(response => response.access_token)
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Teraz si upravím kód pre stránku "Register" - do súboru layout-u stránky "register.page.html" si pridám kód:

<ion-header>
  <ion-toolbar>
    <ion-title>Register</ion-title>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <form [formGroup]="form" (submit)="onSubmit()">
    <ion-item>
      <ion-label position="floating">Name:</ion-label>
      <ion-input type="text" required formControlName="name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Email:</ion-label>
      <ion-input type="text" required formControlName="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Password:</ion-label>
      <ion-input type="password" required formControlName="password"></ion-input>
    </ion-item>
    <ion-button type="submit" class="ion-margin-top" expand="block" [disabled]="form.invalid">Register</ion-button>
  </form>
</ion-content>
Enter fullscreen mode Exit fullscreen mode

ktorý vykreslí na stránke registračný formulár:

Image description
V súbore logiky stránky "register.page.ts" pridám tento kód:

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AlertController, LoadingController, ToastController } from '@ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage {

  constructor(
    private authService: AuthService,
    private alertCtrl: AlertController,
    private toastCtrl: ToastController,
    private loadingCtrl: LoadingController,
    private router: Router,
  ) { }

  form = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.minLength(6)]),
    password: new FormControl('', [Validators.required, Validators.minLength(3)]),
  });

  // odosle registracny formular s udajmi (pre registraciu noveho pouzivatela):
  async onSubmit() {
    console.log(this.form.value);
    const loading = await this.loadingCtrl.create({
      message: 'Registering ...'
    });
    await loading.present();
    this.authService.register(this.form.value).subscribe(
      // ak je uspesna registracia:
      async () => {
        const toast = await this.toastCtrl.create({
          message: 'New user registered',
          duration: 2000,
          color: 'dark'
        });
        await toast.present();
        loading.dismiss();
        this.form.reset();
        this.router.navigateByUrl('/');
      },
      // ak sa vyskytla nejaka chyba:
      async () => {
        const alert = await this.alertCtrl.create({
          message: 'There is an error',
          buttons: ['OK']
        });
        loading.dismiss();
        this.form.reset();
        await alert.present();
      }
    );
  }

}
Enter fullscreen mode Exit fullscreen mode

a ešte je potrebné upraviť kód aj v súbore "register.module.ts":

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { RegisterPageRoutingModule } from './register-routing.module';

import { RegisterPage } from './register.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RegisterPageRoutingModule
  ],
  declarations: [RegisterPage]
})
export class RegisterPageModule {}
Enter fullscreen mode Exit fullscreen mode

kde som pridal "ReactiveFormsModule".
Nakoniec je ešte potrebné v súbore "app.module.ts" upraviť takto:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Otestovanie funkcionality "Registrácia"

Je potrebné štartnúť MySQL databázový server (v mojom prípade je to "WAMP server", ktorý mám zinštalovaný na lokálnom PC), tj.databáza musí bežať a v nej musím mať vhodné db-tabuľky.
Tiež musím spustiť developovací server pre Laravel backend aplikáciu, ktorá zabezpečuje spomínané REST API rozhranie. V adresári, kde mám túto Laravel aplikáciu spustiť príkazom:

php artisan serve
Enter fullscreen mode Exit fullscreen mode

developovací server, a vyskúšať cez REST klienta (napr.utilitu "Insomnia" alebo "Postman") či v prvej časti uvádzané request-y fungujú (tj.odpovedajú):

Image description

Image description
čo znamená, že REST API rozhranie "žije" a funguje.
Vykonaním tohto request-u v db-tabuľke "users" pribudol nový používateľ:

Image description

Teraz si odskúšam samotnú Ionic aplikáciu - spustiť (v adresári Ionic projektu) developovací server, príkazom:

ionic serve
Enter fullscreen mode Exit fullscreen mode

v prehliadači si zobraziť Ionic aplikáciu, tj.URL:

http://localhost:8100/home
Enter fullscreen mode Exit fullscreen mode

čo zobrazí:

Image description
Prejsť na stránku "Register", kde vyplniť potrebné informácie k registrácii nového používateľa:

Image description
registrovať ho cez [Register] a:

Image description
Ionic aplikácia je presmerovaná na svoju domovskú stránku a cez REST API rozhranie bol do db-tabuľky "users" pridaný nový používateľ:

Image description
čo znamená, že funkcionalita "Registrácia" v Ionic aplikácii je funkčná.
...

Top comments (0)