Autentifikácia v Ionic (ver.5) 응용 프로그램 REST API (2.časť)

우리는 REST API를 통해 정보를 얻을 수 있습니다.
Pokračujem vytvorením funkcionality "Registrácia"v Ionic (ver.5) 앱.

Najprv si vytvoriť 모델 "사용자", 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;
}

시도한 "사용자"는 "인증"서비스를 제공하기 위해 인증된 사용자입니다.
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)
    );
  }
}

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>

ktorý vykreslí na stránke registračný 공식:


V súbore logiky stránky "register.page.ts"다음 코드를 사용할 수 있습니다.

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();
      }
    );
  }

}

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 {}

kde는 "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 {}

Testovanie 기능 "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.
Laravel 백엔드 응용 프로그램 이전에 서버를 개발할 때 REST API를 사용할 수 있습니다. V adresári, kde mám túto Laravel aplikáciu spustiť príkazom:

php artisan serve

개발 서버, vyskúšať cez REST klienta(napr.utilitu "Insomnia"alebo "Postman") či v uvádzané request-y fungujú(tj.odpovedajú):




이제 REST API는 곰팡이로 "Zije"를 생성합니다.
Vykonaním tohto request-u v db-tabuľke "users"pribudol nový používateľ:



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

ionic serve

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

http://localhost:8100/home

다음:


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


registrovať ho cez [등록] a:


Ionic 응용 프로그램은 db-tabuľky "users"pridaný nový používateľ를 사용하여 REST API를 확장할 수 있도록 합니다.


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