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

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

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

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

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の追加

login.module.ts, register.module.ts and app.module.tsに追加
全部のmuduleでやってください。

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

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

まとめ

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

The following two tabs change content below.

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

WINDII

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

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日