Loginですよ、Firebaseで。
Firebaseでカンタンにユーザー管理ができる。
せっかくなので、Angular使ってユーザー作ってログイン・ログアウト、なーんてことを、さっそく試してみよう。
１）Firebaseの管理画面を開く
プロジェクトを作ってなければ作る。
２）管理画面のAuthenticationを選ぶ
「ログイン方法」というタブがあるので選ぶ。
認証方法として「メール/パスワード」というのがあるので、それを有効にする。
これで下準備完了。
今度はAngularのプロジェクトを作る。
前回、ひな形の作り方を説明したので、まずはその通り作りましょう。
１）Firebase用のライブラリをインストールする
コンソールを開いて以下を実行
ログイン認証が要求されるので認証する。
npm install -g firebase-tools
firebase login上記は、共通の認証処理。次に作成したプロジェクトごとの設定をする。
プロジェクト配下で以下を実行。
npm install firebase@4.12.1 --save
npm install angularfire2@5.0.0-rc.6 --save
npm install @firebase/app@0.1.10 --save２）必要なコンポーネント、サービスを作る
同様に作成します。
ng g component sign-up --module=app
ng g component login --module=app
ng g service core/service/auth
ng g guard authそれぞれ、サインアップコンポーネントと、ログインコンポーネントと、認証サービス、そしてルーティングガードと呼ばれるもの。
３）下準備
では、まず下準備から。
コンポーネントとサービスのインポートをして、そしてルーティングの設定までやってしまいます。
場所：new-project/src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';
import { AppRootingModule } from './app-rooting.module';
import { DashBoardComponent } from './dash-board/dash-board.component';
import { environment } from '../environments/environment';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LoginComponent } from './login/login.component';と、必要なimportを設定。具体的には、Firebase系のモジュールと、サインアップ、ログインのコンポーネントを追加してます。さらに
@NgModule({
declarations: [
AppComponent,
DashBoardComponent,
SignUpComponent,
LoginComponent
],
imports: [
BrowserModule,
SharedModule,
CoreModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
AppRootingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }というように、declarationsとimportsにも同様に設定します。
そして、次はルーティングの設定。
場所：new-project/src/app/app-rooting.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { DashBoardComponent } from './dash-board/dash-board.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { AuthGuard } from './auth.guard';といように、さっき作ったサインアップコンポーネント、ガードのimportを追加。さらに
const routes: Routes = [
{ path: '', component: DashBoardComponent },
{ path: 'signup', component: SignUpComponent, canActivate: [ AuthGuard ] },
{ path: 'login', component: LoginComponent, canActivate: [ AuthGuard ] }
];と、サインアップのパスとコンポーネントのルーティングも設定する。
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [
RouterModule
],
declarations: [],
providers: [
AuthGuard
]
})
export class AppRootingModule { }３）認証サービスをつくる
続いて、認証サービスもつくりましょう。
場所：new-project/src/app/core/service/auth.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import { Router } from '@angular/router';インポートを上記の通り設定。RxJSとFirebaseのモジュール、そしてルーティングモジュールですね。
@Injectable()
export class AuthService {
authSubject = new Subject<any>();
auth$ = this.authSubject.asObservable();
constructor(
private router: Router,
private afAuth: AngularFireAuth) { }
signup(email: string, password: string): void {
this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then(user => {
this.router.navigate(['/']);
});
}
login(email: string, password: string): void {
this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then(user => {
this.router.navigate(['/']);
})
.catch(error => console.error(error));
}
logout(): void {
this.afAuth.auth.signOut()
.then(() => {
this.router.navigate(['/login']);
})
.catch(error => console.error(error));
}
}そして上記のとおりクラスを定義。メソッドとして、サインアップ、ログイン、ログアウトがあります。
最初にFirebaseで設定したとおりメールとパスワードで認証するようにしてあります。
３）ルーティングガードも作成
特に何の説明もなくルーティングガードまで作ってますが。
ルーティングガードってのは、ようは、ログインせずにとあるページにアクセスすると、ログイン画面に飛ばすっていう、あれです。
場所： new-project/src/app/auth.guard.spec.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private afAuth: AngularFireAuth
) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.afAuth.authState.map(user => {
if (!user) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
});
}
}
さて。下準備はこれでOK。
４）サインアップを作る
はりきってサインアップコンポーネントをつくりましょう。
場所：new-project/src/app/sign-up/sign-up.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AuthService } from '../core/service/auth.service';
@Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {
constructor(private authService: AuthService) { }
ngOnInit() {
}
signup(f: NgForm): void {
this.authService.signup(f.value.email, f.value.password);
}
}
ざっと、こちらですね。signupで、先程つくった、認証サービスのsignupメソッドをコールしてますね。
続いて、テンプレート。
場所：new-project/src/app/sign-up/sign-up.component.html
<form #f="ngForm" (ngSubmit)="signup(f)">
<input type="email" ngModel name="email" placeholder="メールアドレス">
<input type="password" ngModel name="password" placeholder="パスワード">
<button type="submit">新規登録</button>
</form>
<a routerLink="/login" >もしくはログイン</a>これでOKです。ngSubmitで先程のsignupメソッドをコールしてます。
引き渡すパラメタfは、ngFormであり、emailとpasswordという名称で値を持っています。
画面で入力されたemailとpasswordが
サインアップコンポーネントのsignupメソッド
↓
認証サービスのsignupメソッド
↓
Firebaseという流れで引き渡されて、ユーザーが作成される。
４）ログインを作る
続いてログインをつくりましょう。
場所： new-project/src/app/login/login.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../core/service/auth.service';
import { NgForm } from '@angular/forms/src/directives/ng_form';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private authService: AuthService) { }
ngOnInit() {
}
login(f: NgForm): void {
this.authService.login(f.value.email, f.value.password);
}
}これでOK。続いてテンプレート。
場所： new-project/src/app/login/login.component.html
<form #f="ngForm" (ngSubmit)="login(f)">
<input type="email" ngModel name="email" placeholder="メールアドレス">
<input type="password" ngModel name="password" placeholder="パスワード">
<button type="submit">ログイン</button>
</form>
<a routerLink="/signup" >もしくは新規登録</a>はい、これだけ。
サインアップと同じく、
ログインコンポーネントのloginメソッド
↓
認証サービスのloginメソッド
↓
Firebaseという流れですね。
５）ログアウトを作る
とりあえずダッシュボードにつくりましょう。
場所： new-project/src/app/dash-board/dash-board.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AuthService } from '../core/service/auth.service';
@Component({
selector: 'app-dash-board',
templateUrl: './dash-board.component.html',
styleUrls: ['./dash-board.component.css']
})
export class DashBoardComponent implements OnInit {
isLogin: boolean;
constructor(
private afAuth: AngularFireAuth,
private authService: AuthService
) { }
ngOnInit() {
this.afAuth.auth.onAuthStateChanged(user => {
if (user) {
this.isLogin = true;
} else {
this.isLogin = false;
}
});
}
logout(): void {
this.authService.logout();
}
}
ngOnInitでなにやらやってますが、これは現在のログイン判定をしています。
続いてテンプレート。
場所： new-project/src/app/dash-board/dash-board.component.html
<div>
ようこそここへ。
<a routerLink="/login" *ngIf="!isLogin">ログイン</a>
<a routerLink="/signup" *ngIf="!isLogin">もしくは新規登録</a>
<a routerLink="/" *ngIf="isLogin" (click)="logout()">ログアウト</a>
</div>さて。これで準備完了。
ng serveで起動してください。
そして、
から登録して、ログアウトとかログインとかできるはずです。
いやー。カンタンです。