Help us understand the problem. What is going on with this article?

Ionic4+Firebase ゼロから10分でユーザ認証を実装する

はじめに

Ionic+Firebaseでユーザ認証が簡単に実装できたので、IonicやFirebaseを使ったことが無い方でも実装できるように紹介します。
今回はメールアドレスとパスワードによるユーザ認証を実装します。
以下のようなログイン・ログアウト画面が実装できます。
output.gif

Ionicとは

Ionic Frameworkは、Webテクノロジー(HTML、CSS、JavaScript)を使って、高性能かつ高品質なモバイルとデスクトップアプリケーションをつくるためのオープンソースのUIフレームワークです。

Ionicは、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App(PWA)として実行することができ、すべてシングルコードで実装可能です。

開発環境

$ node -v
v12.1.0
$ npm -v
6.9.0
$ ionic --version
5.1.0

Ionicのインストール

ターミナルで以下のコマンドを実行してインストール

$ sudo npm install -g ionic cordova

Ionicプロジェクトを作成

開発用のディレクトリを作成し、Ionicプロジェクトを作成

$ cd
$ mkdir ionic
$ cd ./ionic
$ ionic start testAuth blank --type=angular

プロジェクト名:testAuth
テンプレート:blank

Ionicアプリを動かす

ionic serve でIonicアプリが起動する

$ cd testAuth
$ ionic serve

ブラウザで以下のような画面が表示される
スクリーンショット 2019-07-06 9.41.38.png

Firebaseのセットアップ

1.Firebaseのサイトにアクセス
https://firebase.google.com/?hl=ja
2.Googleアカウントでログイン
3.「プロジェクトを追加」をクリック
4.以下のように設定して「プロジェクトを作成」をクリック
スクリーンショット 2019-07-06 9.49.33.png

FirebaseでAuthenticationの設定

1.「Authentication」をクリック
2.「ログイン方法を設定」をクリック
3.今回はメール/パスワードでの認証方法を利用する
4.「有効にする」にチェックして保存
5.「ユーザーを追加する」をクリックしてテスト用のユーザを作成する
スクリーンショット 2019-07-06 11.11.36.png
6.「Project Overview」をクリックし、以下の赤枠をクリック
スクリーンショット 2019-07-06 9.57.39.png
7.クリックすると、Firebaseプロジェクトを利用するために必要な情報が表示されるのでコピーする

IonicでFirebaseを使えるようにする

1.Firebaseの機能を利用するためのパッケージをインストール

$ cd ~/ionic/testAuth
$ npm install firebase @angular/fire --save

2./src/environments/enviroments.tsにコピーした情報を貼り付ける

/src/environments/enviroments.ts
export const environment = {
  production: false,
  firebase:{
    apiKey: "*******************************",
    authDomain: "******************************",
    databaseURL: "*******************************",
    projectId: "**************",
    storageBucket: "",
    messagingSenderId: "*********"
  }
};

3./src/app/app.module.tsを以下のように変更してFirebaseを使えるように設定

/src/app/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';

//Firebase設定情報ファイルをインポート
import { environment } from '../environments/environment';

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';

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

ログイン用のページを作る

1.ログインページ用のファイルを生成

$ ionic g page login

2.ログインページの作成

/src/app/login/login.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>ログイン</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item class="loginHeader" lines="none" text-center>
  </ion-item>
  <form #f="ngForm" class="loginForm">
    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="mail"></ion-icon>
        メールアドレス
      </ion-label>
      <ion-input
        required
        email
        [(ngModel)]="login.email"
        type="email"
        name="login.email"
      ></ion-input>
    </ion-item>

    <ion-item class="formItem">
      <ion-label position="floating">
        <ion-icon name="key" padding-right></ion-icon>パスワード
      </ion-label>
      <ion-input
        required
        [(ngModel)]="login.password"
        type="password"
        name="login.password"
      ></ion-input>
    </ion-item>

    <ion-button class="submitBtn" [disabled]="!f.form.valid" (click)="userLogin()" seize="large" expand="block">
      ログイン
    </ion-button>
  </form>
</ion-content>

3.ログイン処理を実装

/src/app/login/login.page.ts
import { Component, OnInit } from '@angular/core';
import { ToastController } from '@ionic/angular';
import { Router } from '@angular/router';

//Firebase
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  login: {
    email: string;
    password: string;
  } = {
    email: '',
    password: ''
  };

  constructor(
    private router: Router,
    private afAuth: AngularFireAuth
  ) {}

  ngOnInit() {}

  userLogin() {
    this.afAuth.auth
    .signInWithEmailAndPassword(this.login.email, this.login.password)
    .then(async user => {
      //ログインできたらホームに移動
      this.router.navigate(['/home']);
    })
  }
}

ログアウトを実装する

1.ホームページのヘッダーにログアウトボタンを作成する

/src/app/home/home.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>

    <ion-buttons slot="end">
      <ion-button (click)="logout()">
        ログアウト
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

2.ログアウト処理を実装

/src/app/home/home.page.ts
import { Component} from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private afAuth: AngularFireAuth,
    private router: Router
  ) {}

  // ログアウト処理
  logout() {
    this.afAuth.auth
        .signOut()
        this.router.navigateByUrl('/login');
  }
}

動作確認

以下のリンクから作成したログインページが確認できます。
Firebaseのコンソールで設定したユーザ以外はログインできないことが確認できると思います。
http://localhost:8100/login

おわりに

Ionic+Firebaseで簡単にユーザ認証が実装できました。
インストールなどの待ち時間を除けば、10分もかからずに実装できたのではないでしょうか。
続きはこちら

参考

Ionic Framework - Ionic Framework 日本語ドキュメンテーション
https://qiita.com/lighthouse/items/a08f8405358112fcda1d

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away