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;
}
最後に
以下はメアドとパスワードの変更方法です。参考にどうぞ〜！
Author And Source
この問題について(Ionic + Firebase ユーザーのdisplayName（名前）を変更する方法), 我々は、より多くの情報をここで見つけました https://qiita.com/kokogento/items/c4aecadc85a928050cc8著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .