プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. フロントエンド

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のインストール

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

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

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

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

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.

ぞえ

実務未経験から1年でフリーランスエンジニアになって給料が6倍になった男/アル中の記憶ない系/しかも190cmの巨人。今は週3勤務しながら@ryudoi1と当メディア運営中 詳細なプロフ ぞえのプロフィール!! Twitterアカウント Twitter 技術系の雑談や、質問の行える無料サロンもやっています。 windii social

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP