نقاط الدرس
client side
- انشاء دالة submit بصفحة register التي تنقل بيانات المترشح وترسل طلب الى ملف الخدمة
- اضافة حاوية الاخطاء بملف register.html في حال وجود خطأ .سيقوم بعرضه
- انشاء دالة register() بملف الخدمة التي تتصل بالخادم وتنقل اليه البيانات المدخلة من طرف المستخدم
server side
- انشاء نمودج- فورم لتسجيل الدخول RegisterForm الدي سنضع بداخله القواعد والقوانين التي تتقيد بها حقول جدول user
- انشاء الميثود actionRegister التي تقوم بمعالجة البيانات وانشاء المستخدم ثم ترسل رد للتطبيق
- تضمين مسار register في مدير المسارات config
تفاصيل الدرس
register.ts
import { Component } from '@angular/core';
import { NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { AuthenticationProvider } from '../../providers/authentication/authentication';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HomePage } from '../home/home';
import { LoginPage } from '../login/login';
/**
* Generated class for the RegisterPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@Component({
selector: 'page-register',
templateUrl: 'register.html',
})
export class RegisterPage {
public _registerForm:FormGroup;
public _submitted:boolean = false;
public errorFields:string = ''; // +
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public authenticationProvider: AuthenticationProvider,
public _formBuilder:FormBuilder,
public loadingCtrl: LoadingController,
private alertCtrl: AlertController,
) {
this.createForm(); // تمهيد حقول فورم تسجيل الدخول مباشرة بعد اقلاع الصفحة
}
ionViewDidLoad() {
console.log('ionViewDidLoad RegisterPage');
}
public createForm(){
this._registerForm = this._formBuilder.group({
username: ['', Validators.required],
lastname: ['', Validators.required],
firstname: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.compose([Validators.required, Validators.minLength(4)])],
});
}
homePage(){ // في اعلى صفحة تسجيل الدخول ستجد زر يوجهك نحو الصفحة الرئيسية
this.navCtrl.push(HomePage);
}
loginPage(){ // الزر الدي يوجهك نحو صفحة تسجيل الدخول
this.navCtrl.push(LoginPage);
}
onSubmit(dataForm: any) {
this._submitted = true; //handler مقبض يعلن عن انه تم الضغط على زر الدخول
let data:any = { // بناء كائن يمثل بيانات تسجيل الدخول ثم ارسالها الى ملف الخدمة
firstname: dataForm.firstname,
lastname: dataForm.lastname,
username: dataForm.username,
email: dataForm.email,
password: dataForm.password,
}
let loading = this.loadingCtrl.create({ // انشاء نافدة انتظار
content: 'Please wait...'
});
loading.present();
this.authenticationProvider.register(data)
.subscribe(
result => {
let response:any = result;
setTimeout(() => { // غلق نافدة الانتظار
loading.dismiss();
}, 500);
let alert = this.alertCtrl.create({ // انشاء نافدة بعد نجاح التسجيل
title: 'User Registered',
subTitle: 'User was added successfully',
buttons: [ // الازارار التي ستظهر بالنافدة
{
text: 'OK',
role: 'cancel',
handler: () => { // حدث مابعد الضغط على الزر
this.navCtrl.setRoot(LoginPage); // توجيه المستخدم نحو صفحة الدخول بعد نجاح عملية التسجيل
}
},
],
enableBackdropDismiss: false ,
});
alert.present();
},
errors => {
setTimeout(() => { // غلق نافدة الانتظار
loading.dismiss();
}, 500);
if(errors.status==422){
// let errorFields = JSON.parse(errors.error.message); // تحويل محتوى الرسالة الى كائن json
this.errorFields = errors.error.message;
}
}
);
}
}
register.html
<ion-header >
<div class="main-header">
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
<strong>Register</strong> Account
</ion-title>
<ion-buttons end>
<button ion-button tappable (click)="homePage()">
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</div>
</ion-header>
<ion-content>
<form [formGroup]="_registerForm" (ngSubmit)="onSubmit(_registerForm.value)">
<ion-row>
<ion-col text-center>
<ion-icon name="person"></ion-icon>
</ion-col>
</ion-row>
<ion-row *ngIf="errorFields"> <!-- شرط توفر الخطأ -->
<ion-col [innerHTML]="errorFields" style="color: #a91010;font-weight: 700;"></ion-col>
</ion-row>
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['username']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Lastname</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['lastname']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Firstname</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['firstname']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Email</ion-label>
<ion-input type="text" [formControl]="_registerForm.controls['email']"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" [formControl]="_registerForm.controls['password']"></ion-input>
</ion-item>
</ion-list>
<button ion-button type="submit" [disabled]="!_registerForm.valid">Register</button> or
<button ion-button type="button" (click)='loginPage()'>Login</button>
</form>
</ion-content>
authentication.ts
register(data:any){
const httpOptions = {
headers: new HttpHeaders({
'charset': 'UTF-8',
})
};
let url:string = this.baseUrl+'/user/register';
return this.httpClient
.post(url,data ,httpOptions) // عملية post
.pipe(
map((response) => {
return response; // تحويل النتيجة الى المكون
})
);
}
server side
انشاء نمودج تسجيل الدخول RegisterForm.php والدي سنضع به القواعد وقوانين الحقول التي يتقيد بها فورم تسجيل المستخدم
api/v1/models/RegisterForm.php
<?php
namespace api\modules\v1\controllers;
use Yii;
use yii\filters\VerbFilter;
use yii\helpers\Html;
use yii\rest\ActiveController;
use api\modules\v1\models\LoginForm;
use yii\web\HttpException;
use yii\filters\auth\CompositeAuth;
use yii\filters\auth\HttpBearerAuth;
use api\modules\v1\models\RegisterForm;
class UserController extends ActiveController{
public $enableCsrfValidation = false;
public $modelClass = 'api\modules\v1\models\User'; // ربط الكونترولر بالموديل
public function behaviors(){
$behaviors = parent::behaviors();
// نأمر الخادم بأن يسمح لجميع المصادر بطلب بيانات هده الصفحة
$behaviors['corsFilter' ] = [
'class' => \yii\filters\Cors::className(),
'cors' => [
'Origin' => ['*'], // star allows all domains
'Access-Control-Request-Method' => [ 'POST', 'GET', 'OPTIONS'], // allows 'POST', 'OPTIONS' Methods
'Access-Control-Request-Headers' => ['*'],
],
];
// JSON نأمر الخادم بأن يرجع البيانات على شكل
$behaviors['contentNegotiator'] = [
'class' => \yii\filters\ContentNegotiator::className(),
'formats' => [
'application/json' => \yii\web\Response::FORMAT_JSON,
],
];
//وضع جدار ناري بالكونترولر وحمايته بالكود المميز الا في دالة تسجيل الدخول
$behaviors['authenticator'] = [
'class' => CompositeAuth::className(),
'authMethods' => [
HttpBearerAuth::className(),
],
'except'=>['options', 'login','register'], // استثناء دالة تسجيل الدخول ودالة تسجيل مستخدم جديد
];
return $behaviors;
}
// التطبيق سيتصل بهده الميثود وسيمرر اليها بيانات تسجيل الدخول
// يفترض ان ترجع هده الميثود الكود المميز توكن الى التطبيق في حال صحة البيانات
// في حال وجود خطأ ما تقوم الدالة برمي خطأ لكي يلتقطه التطبيق ويقوم بعرضه للمستخدم
public function actionLogin(){
$model = new LoginForm();
if(isset(Yii::$app->request->isPost)){ // equivalent => if isset($_POST)
$_POST = Yii::$app->getRequest()->getBodyParams();
$data['LoginForm'] = [ // انشاء بيانات الدخول
'username' => $_POST['username'],
'password' => $_POST['password'],
];
if($model->load($data) && $model->login()) { // تحميل البيانات والتحقق من صحتها بقاعدة البيانات
$user = $model->getUser(); // $model->getUser() is user Model
$user->generateAccessTokenAfterUpdatingClientInfo(true); // توليد الكود token
$response = \Yii::$app->getResponse(); //بناء رد من السرفر
$response->setStatusCode(200); // success code
$id = implode(',', array_values($user->getPrimaryKey(true))); // ID user from db
$responseData = [
'id' => (int)$id,
'access_token' => $user->access_token, // الدي تم انشاءه token
];
return $responseData; // ارجاع النتيجة للمستخدم
}else{
// رمي خطأ كلمة مرور خاطئة او عدم فهم البيانات القادمة او أن البيانات المستلمة غير مفهومة
# الكود اربعمئة واثنين وعشرين يعبر عن استقبال البيانات ولكن لم يتمكن الخادم من فهمها أو تحليلها
throw new HttpException(422, json_encode($model->errors));
}
}else{
throw new HttpException(500, json_encode('Internal Server Error'));
}
}
public function actionRegister(){
$model = new RegisterForm(); // نمودج موديل لتسجيل مستخدم .
//نستخدم هدا النوع من النمادج لوضع شروط وقواعد
$data['RegisterForm'] = Yii::$app->getRequest()->getBodyParams(); // البيانات التي استقبلها الخادم من التطبيق POST
if ($model->load($data)) { // شحن نمودج الموديل
if ($user = $model->signup()) { // تسجيل البيانات بالجدول في قاعدة البيانات
return true;
}else{
$errors = Html::errorSummary($model, ['header' => '']);
throw new HttpException(422, $errors); # Validation error //رمي خطأ ادا لم تتطابق القواعد مع البيانات المستقبلة
}
}else{
throw new HttpException(500, json_encode('action model')); # Validation error
}
}
public function actionProfile(){
$model = \api\modules\v1\models\User::find()
->select(['id','lastname','firstname', 'username','email'])
->where(['id' => Yii::$app->user->getId()])
->one();
return $model;
}
}
نضيف الميثود actionRegister بالكونترولر UserController
public function actionRegister(){
$model = new RegisterForm(); // نمودج موديل لتسجيل مستخدم .
//نستخدم هدا النوع من النمادج لوضع شروط وقواعد
$data['RegisterForm'] = Yii::$app->getRequest()->getBodyParams(); // البيانات التي استقبلها الخادم من التطبيق POST
if ($model->load($data)) { // شحن نمودج الموديل
if ($user = $model->signup()) { // تسجيل البيانات بالجدول في قاعدة البيانات
return true;
}else{
$errors = Html::errorSummary($model, ['header' => '']);
throw new HttpException(422, $errors); # Validation error //رمي خطأ ادا لم تتطابق القواعد مع البيانات المستقبلة
}
}else{
throw new HttpException(500, json_encode('action model')); # Validation error
}
}
في اعلى الكنترولر قم بتضمين ملف النمودج RegisterForm
// use ...
use api\modules\v1\models\RegisterForm;
// use ...
في دالة behaviors نقوم بالسماح الى الميثود actionRegister بعدم وضع جدار حماية عليها حتى يتمكن المستخدم من الوصول اليها وتنفيدها دون الحاجة الى تصريح بالوصول
// add register in except array
$behaviors['authenticator'] = [
'class' => CompositeAuth::className(),
'authMethods' => [
HttpBearerAuth::className(),
],
'except'=>['options', 'login','register'], // استثناء دالة تسجيل الدخول ودالة تسجيل مستخدم جديد
];
اضف المسار الميثود register بملف api/config/main.php
,
[
'class' => 'yii\rest\UrlRule',
'controller' => 'v1/user',
'pluralize' => false,
'tokens' => [
'{id}' => '<id:\d+>',
],
'extraPatterns' => [
'POST login' => 'login',
'OPTIONS login' => 'options',
'GET profile' => 'profile',
'OPTIONS profile' => 'options',
'POST register' => 'register', //+
'OPTIONS register' => 'options', //+
],
],
اضف خانة الاسم واللقب بقاعدة البيانات لاننا قمنا باضافتها بنمودج التسجيل
ALTER TABLE `user` ADD `firstname` VARCHAR(100) NULL DEFAULT NULL AFTER `username`, ADD `lastname` VARCHAR(100) NULL DEFAULT NULL AFTER `firstname`;
النتيجة
