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

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

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

ionic + Firebase authenticationをざっくりと知りたい場合は[こちら](https://qiita.com/se_fy/items/386418f123fc30c306e6)を参考に。

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

って感じ。



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

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

#ログインページにパスワード忘れのボタンを配置
```html: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>
```

```typescript:login.page.ts
gotoReset() {
    this.router.navigateByUrl('/reset-password');
  }
```

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

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

```typescript: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);
      });
}
```

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

```html: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`で書いたメソッドを注入する。

```typescript: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);
  }
}

```

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

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

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

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

<img width="1239" alt="スクリーンショット 2019-10-31 20.10.37.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/3a35f43c-5c6d-733a-085f-38514013c1dd.jpeg">