Ionic + Firebase ユーザーのdisplayName（名前）を変更する方法

はじめに

FirebaseのAuthenticationでユーザーを管理している人が対象となります。

こちらを参考にやっていきます！

流れとしては
①ion-inputに新しい名前を入力
②ボタンを押して変更
③確認のアラートが出る

こんな感じ

htmlを用意

適当にこんな感じの画面で行きます。

ion-inputに入力された文字列が、そのまま新しいdisplayNameになります。

home.page.ts

<ion-content *ngIf="currentUser" class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col size="12" size-sm="8" offset-sm="2">
        <ion-card>
          <ion-card-header class="ion-text-center">
            <ion-card-title>名前の変更</ion-card-title>
          </ion-card-header>
          <ion-card-content class="ion-text-center">
            <div>
              <h2 class="ion-margin-bottom">現在の名前</h2>
              <p>
                <ion-icon name="person"></ion-icon>{{ currentUser.displayName }}
              </p>
            </div>
            <ion-item>
              <ion-label position="stacked">
               新しい名前
              </ion-label>
              <ion-input [(ngModel)]="newName" type="text"></ion-input>
            </ion-item>
            <ion-button class="ion-margin-bottom ion-margin-top" expand="full" fill="solid" color="tertiary"
              (click)="changeName()">
              <ion-icon name="create" slot="start"></ion-icon>
              名前を変更する
            </ion-button>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
  </ion-grid>
</ion-content>

tsファイル

htmlの[(ngModel)]="newName"がtsファイルのnewNameと紐ずけされている。

<ion-input [(ngModel)]="newName" type="text"></ion-input>

home.page.ts

import { AngularFireAuth } from '@angular/fire/auth';
import { AlertController } from '@ionic/angular';
import { User } from '../auth/auth.service';
import { Router } from '@angular/router';


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

currentUser: User;
  newName: string;

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

 ngOnInit() {
    this.afAuth.auth.onAuthStateChanged(user => {
      if (user != null) {
        this.currentUser = user;
      } else {
        this.router.navigateByUrl('/auth');
      }
    });
  }

private showAlert(header: string, message: string) {
    const alert = this.alertCtrl
      .create({
        header: header,
        message: message,
        buttons: ['OK']
      })
      .then(alertEl => alertEl.present());
    return alert;
  }

changeName() {
    const user = this.afAuth.auth.currentUser;
    user
      .updateProfile({
        displayName: this.newName
      }).then(() => {
        // Update successful.
        const header = 'プロフィールを変更';
        const message = `名前が${this.newName}になったよ〜！`
        this.showAlert(header, message);
      }).catch(error => {
        // An error happened.
        const header = 'エラーが発生しました';
        const message = '通信状況を確認してもう一度お試しください。。。';
        this.showAlert(header, message + error);
      });
}

Userのモデルはこんな感じ

auth.service.ts

export interface User {
  uid: string;
  email: string;
  displayName?: string;
  myCustomData?: string;
  photoURL?: string;
}

最後に

以下はメアドとパスワードの変更方法です。参考にどうぞ〜！

Firebase Authenticationを使った、登録ユーザーのメールアドレスの変更方法

[ionic + Firebase パスワードのリセットリンクを送る] (https://qiita.com/kokogento/items/1462312a24ce593db8ed)