YII2 REST

Регистрация пользователя для YII2 REST APi и Angular 4

Это продолжение статьи о авторизациии на Angular 4 и YII2 REST API. Тут я просто приведу регистрацию пользователя со стороны сервера и фронта. На правильность решения я не претендую! Просто делюсь решением!

Со стороны сервера мы добавим новый экшн в контроллер Login

public function actionRegistration()
{
$this->enableCsrfValidation = false;
$user = User::findByEmail(Yii::$app->request->getBodyParam('email'));
if (!$user) {
$user = User::findByUsername(Yii::$app->request->getBodyParam('username'));
if ($user)
$result =  [
'success' => 0,
'message' => 'User with this username already exist',
'code' => 'username_busy'
];
}
else{
$result =  [
'success' => 0,
'message' => 'User with this email already exist',
'code' => 'email_busy'
];
}
if(!$user){
$user = new User();
$user->username = Yii::$app->request->getBodyParam('username');
$user->email = Yii::$app->request->getBodyParam('email');
$user->setPassword(Yii::$app->request->getBodyParam('password'));
$user->generateAuthKey();
$user->save();
$token = $this->genegateToken($user->id);
$result =   [
'success' => 1,
'username' =>  $user->username,
'userId' =>  $user->id,
'payload' => $user,
'token' => $token->token
];
}
return $result;
}

 

На клиенте  (Angular 4 ) я использую следующую функцию

 


 

import {Response, Headers, URLSearchParams, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';  
/* component////.... export class tra-ta-ta.........////////*/
 public registerForm:FormGroup = new FormGroup({
usernameField : new FormControl('', [Validators.required,
Validators.minLength(6),]),
emailField : new FormControl('', [Validators.required,
Validators.minLength(6),]),
passwordField : new FormControl('', [Validators.required,
Validators.minLength(6),]),
passwordRepeatField : new FormControl('', [Validators.required,
Validators.minLength(6),])
});
public register(){ if(!this.registerForm.valid){ this.regiterErrors = 'Check your form!'; return; } var params = new URLSearchParams(); params.set('username',this.registerForm.value.usernameField); params.set('email',this.registerForm.value.emailField); params.set('password',this.registerForm.value.passwordField); var headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); this.http.post('login/registration', params, new RequestOptions({ headers : headers })) .map(res => res.json()) .catch((error:any) =>{ return Observable.throw(error);}).subscribe((data : any) => { console.log(data); if(data.success){ this.UserHttpService.setUser(data); this.isUserLogged = true; this.LoginModalService.closeModal(); } else{ this.regiterErrors = data.message; } }); }

 

 

Ну как то так….У меня запрос отправляется с сервиса Ангуляр а форма находится в главном компоненте и потому всегда находится в хедере и обернута в модальное окно от Bootstrap 4. Так же я поступил и с формой логина…ну это уже по вкусу и потребностям…

Вот так просто реализовать регистрацию с помощь Yii2 и Angular 4.


Добавить комментарий