ionic + Firebase パスワードのリセットリンクを送る

#はじめに
この記事はionic + Firebase authenticationを使った、パスワード再設定の方法を紹介。

アプリのユーザー認証関連の事を全てFirebaseに任せている方なら、必須ではないだろうか

ionic + Firebase authenticationをざっくりと知りたい場合はこちらを参考に。

全体の流れをしては
ログインページ→パスワードリセットのページ→メールアドレスを入力して、リンクを送信→リンク先でパスワードを再設定

って感じ。

#パスワードリセットのページを作成
ionic g page reset-password

でパスワードリセットのページを作成。

#ログインページにパスワード忘れのボタンを配置

login.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>ログイン</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2">
        <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" #emailCtrl="ngModel">
            </ion-input>
          </ion-item>
          <ion-item *ngIf="!emailCtrl.valid && emailCtrl.touched" lines="none">
            <ion-label color="danger">メールアドレスを入力してね！</ion-label>
          </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" #passwordCtrl="ngModel"
              minlength="6">
            </ion-input>
          </ion-item>
          <ion-item *ngIf="!passwordCtrl.valid && passwordCtrl.touched" lines="none">
            <ion-label color="danger">パスワードは6文字以上</ion-label>
          </ion-item>
        
          <ion-button class="submitBtn" [disabled]="!f.form.valid" (click)="userLogin()" seize="large" expand="block">
            ログイン
          </ion-button>
        </form>
      </ion-col>
    </ion-row>
  <ion-row>
    <ion-col size="12" size-sm="8" offset-sm="2">
      <ion-button class="subLink" (click)="gotoSignup()" fill="clear">
        アカウント登録はこちらから
      </ion-button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col size="12" size-sm="8" offset-sm="2">
      <ion-button class="subLink" (click)="gotoReset()" fill="clear">
        パスワードを忘れた方はこちら
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

login.page.ts

gotoReset() {
    this.router.navigateByUrl('/reset-password');
  }

これでとりあえず何もないreset-password.page.htmlに行けた。

#auth.serviceにパスワードリセットの処理を書く
今回はserviceを使って、reset-passwordのページに処理を注入する。

auth.service.ts

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

@Injectable({
  providedIn: 'root'
})

export class AuthService {

constructor(
    private afAuth: AngularFireAuth
  ) {}

resetPassword(email: string) {
    return this.afAuth.auth.sendPasswordResetEmail(email)
      .then(res => {
        console.log('メール送信された');
      }).catch(error => {
        console.log(error);
      });
}

#パスワードリセットのボタンを用意

reset-password.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>パスワードのリセット</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col>
      <ion-item class="ion-margin-bottom" lines="none" text-center>
        パスワードをリセットするリンクを送ります。
      </ion-item>
      <form #f="ngForm">
        <ion-item class="formItem">
          <ion-label position="floating">
            <ion-icon name="mail"></ion-icon>
            メールアドレス
          </ion-label>
          <ion-input required email [(ngModel)]="email" type="email" name="email" #emailCtrl="ngModel">
          </ion-input>
        </ion-item>
        <ion-button class="submitBtn" [disabled]="!f.form.valid" (click)="onSubmit()" seize="large" expand="block">
          送信
        </ion-button>
      </form>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

serviceで書いたメソッドを注入する。

reset-password.page.ts

import { AuthService } from './../auth/auth.service';
import { Component, OnInit } from '@angular/core';

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

  constructor(
    private authService: AuthService
  ) { }

  ngOnInit() {
  }

  onSubmit() {
    this.authService.resetPassword(this.email);
  }
}

これで入力したメールアドレスに、パスワードリセットのリンクが届く。

#メールのテンプレートを日本語にする

送られてくるメールが英語なので、日本語に変えてみる。

メールのテンプレートを変更するには以下の所でする。