Ionic4＋firebaseで認証をする方法【ログイン、ログアウト機能の実装】

フロントエンド
840 view

Ionic4＋firebaseで認証をする方法【ログイン、ログアウト機能の実装】

最終更新日:2019/07/06

多分、認証先にやって画面OnsenUIで画面を作る方が簡単だなと、やり直したのですが、OnsenUIのTABとionic start sidemenuで作られるものが競合してエラーが発生しました。
状況としてはこの人と同じ。
解決策が英語で調べても出てこないし、冷静にsidemenuいらないのでやり直します。
ついでなのでIonic4+firebase連携を記事にします。

できるのはこんな感じの認証Ionic4

基本的には以下の記事と同じ内容なのですが、微妙に解説を加えたりしています。
Ionic 4 Firebase Login Registration by Email and Password

Ionicアプリの作成起動&npのインストール
必要なコンポーネントを作成
サービスの内容を書き換え
自分のfirebaseプロジェクトの情報をenvironment.tsに貼り付ける
app.module.tsでangularfire
ReactiveFormsModuleの追加
まとめ
- - WINDII
  - 最新記事 by WINDII (全て見る)

Ionicアプリの作成起動&npのインストール

ionic start project-name blank
cd ~/project-name
ionic serve
npm install firebase @angular/fire --save

必要なコンポーネントを作成

ng g　componentでもできるけど、ionicでは、pageを指定するといいらしい。
moduleが各フォルダに作成され、なんかすると早くなるとか。
まーとりあえず、pageがいいらしい。

つまりコンポーネント3つとサービスを１つ作成

ionic g page login
ionic g page register
ionic g page dashboard
ionic g service services/authentication

サービスの内容を書き換え

src/app/services/authentication.service.ts”

以下のコードをペタ。ログインログアウトをfirebaseにpushする処理を書いてくれています。
Rick Ghoshさんありがとうございます。

import { Injectable } from "@angular/core";
import * as firebase from 'firebase/app';

@Injectable()
export class AuthenticateService {

  constructor(){}

  registerUser(value){
   return new Promise<any>((resolve, reject) => {
     firebase.auth().createUserWithEmailAndPassword(value.email, value.password)
     .then(
       res => resolve(res),
       err => reject(err))
   })
  }

  loginUser(value){
   return new Promise<any>((resolve, reject) => {
     firebase.auth().signInWithEmailAndPassword(value.email, value.password)
     .then(
       res => resolve(res),
       err => reject(err))
   })
  }

  logoutUser(){
    return new Promise((resolve, reject) => {
      if(firebase.auth().currentUser){
        firebase.auth().signOut()
        .then(() => {
          console.log("LOG Out");
          resolve();
        }).catch((error) => {
          reject();
        });
      }
    })
  }

  userDetails(){
    return firebase.auth().currentUser;
  }
}

自分のfirebaseプロジェクトの情報をenvironment.tsに貼り付ける

firebaseを自分のアプリに追加する方法はこういう記事を参考にしてください

firebase入門ユーザー認証を行う方法まとめ

/src/environments/environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzXXXXXXXXXXXXXXXWZMPN90HFrp4",
    authDomain: "test-projeXXXXXXX.firebaseapp.com",
    databaseURL: "https://test-projeXXXXXXX.firebaseio.com",
    projectId: "test-projeXXXXXXX7",
    storageBucket: "test-projeXXXXXXXX.appspot.com",
    messagingSenderId: "446XXXXXX105"
  }
 };

app.module.tsでangularfire

AngularFireAuthModuleや、firebase先ほど作ったサービスを読み込む

app.module.ts

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { environment } from 'src/environments/environment';
import { AuthenticateService } from './services/authentication.service';
import { AngularFireAuthModule } from '@angular/fire/auth';

import * as firebase from 'firebase';

firebase.initializeApp(environment.firebase);

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireAuthModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthenticateService,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

ReactiveFormsModuleの追加

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ReactiveFormsModule,//これを追加
    RouterModule.forChild(routes)
  ],

これよりあとはひたすら、本家のサイトからコピペするのみです！

まとめ

Rick Ghoshさんはレジェンド
このあとはーOnsenUIでタブを実装していきますが、記事にするかは未定です。

この記事を書いた人
最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

WINDIIテック