Angular&Firebase-エラーメッセージを表示する方法

メガトロン

私が使っているもの

  • Angular
  • Firebase

私が持っているもの

  • ユーザーが新しいメールアドレスと既存のパスワードを入力してメールアドレスを変更できるHTML
  • 新しい電子メールとパスワードが入力されると、それらは認証サービスに渡され、updateEmailメソッドが実行されます。
  • ユーザーが間違ったパスワードを入力した場合、コンソールは次のエラーをログに記録します。

core.es5.js:1020エラーO {コード: "auth / wrong-password"、メッセージ: "パスワードが無効であるか、ユーザーがパスワードを持っていません。"}

質問

  1. このようなエラーメッセージ、またはこのエラーが発生したときにカスタムメッセージを表示するにはどうすればよいですか?(標準のJSアラートを介して)

私の認証サービス

 updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
        // An error happened.
      });
    });
  }

更新

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';


@Injectable()
export class AuthService {
  user: Observable<firebase.User>;
  redirectUrl: string;


  constructor(
    private firebaseAuth: AngularFireAuth,
    private router: Router) {
    this.user = firebaseAuth.authState;
  }


  // Login Form
  login(email: string, password: string): Observable<boolean> {

    this.firebaseAuth.auth
      .signInWithEmailAndPassword(email, password)
      .then(value => {
        this.router.navigate(['projects']);
        return Observable.of(true);
      })
      .catch(err => {
        console.log('Something went wrong:', err.message);
        return Observable.of(false);
      });

    return;
  }


  // Account Management - Re-authenticate the user using the current email and current password, then call the update email and email verification methods
  updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
        // An error happened.
         alert(ErroAuthEn.convertMessage(error['code']));
      });
    });
  }


// Log out of Apollo
  logout() {
    this.firebaseAuth.auth.signOut();
    this.router.navigate(['login']);
  }


  // A method to use to check if the user is logged in or not
  isLoggedIn(): boolean {
    console.log(!!this.firebaseAuth.auth.currentUser);
    return !!this.firebaseAuth.auth.currentUser;
  }
}

export namespace ErroAuthEn {
        export function convertMessage(code: string): string {
          console.log('called');
            switch (code) {
                case 'auth/user-disabled': {
                    return 'Sorry your user is disabled.';
                }
                case 'auth/user-not-found': {
                    return 'Sorry user not found.';
                }

                case 'auth/wrong-password': {
                  return 'Sorry, incorrect password entered. Please try again.';
                }

                default: {
                    return 'Login error try again later.';
                }
            }
        }
 }

エドゥアルドバルガス

最善の解決策は、ドキュメントのエラーメッセージごとに、より理解しやすいユーザーフレンドリーなメッセージを返す関数を実装することです。

export namespace ErroAuthEn {
        export function convertMessage(code: string): string {
            switch (code) {
                case 'auth/user-disabled': {
                    return 'Sorry your user is disabled.';
                }
                case 'auth/user-not-found': {
                    return 'Sorry user not found.';
                }
              .
              .
              .

                default: {
                    return 'Login error try again later.';
                }
            }
        }
 }

次に、コンポーネントで次のように呼び出すことができます。

updateEmailAddress(email: string, password: string) {

    const currentUser = firebase.auth().currentUser;
    const credentials = firebase.auth.EmailAuthProvider.credential(currentUser.email, password);

    currentUser.reauthenticateWithCredential(credentials).then(function () {

      currentUser.updateEmail(email).then(function () {

        currentUser.sendEmailVerification().then(function () {
          // Email Sent
        }).catch(function (error) {
          // An error happened.
        });

      }).catch(function (error) {
      alert( ErroAuthEn.convertMessage(error['code']));
      });
    });
  }

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular&Firebase:ルックアップコレクションから選択した入力を事前入力する方法は?

分類Dev

Angularフォームの検証送信時にエラーメッセージを表示する方法

分類Dev

エラーメッセージを検証して表示する方法-Angular2Material Design?

分類Dev

Angularでエラーメッセージのみを印刷する方法

分類Dev

メールvalがfirebaseデータベースで利用できない場合にエラーメッセージを表示する方法

分類Dev

ngFor Angular2 でユーザーがクリックした要素にのみエラー メッセージを表示する方法

分類Dev

未定義のエラーメッセージを表示するAngular2フォーム検証

分類Dev

バージョン17.0.1および16.0.1のFirebaseエラーメッセージを処理する方法

分類Dev

Angular6でのユーザー入力に基づいてさまざまなエラーメッセージを表示する方法

分類Dev

レイアウトでFirebase通知メッセージを表示する方法

分類Dev

エラーメッセージの後に状態を更新する-Firebase-ReactNative

分類Dev

Firebase認証のカスタムエラーメッセージを作成する

分類Dev

クエリの結果を使用してトーストメッセージを表示し、Firebase Firestoreで新しいユーザーを作成する方法

分類Dev

Angular-特定のインデックスでのみエラーメッセージを表示します-ngRepeat内

分類Dev

AngularでformControlNameの検証メッセージを表示する

分類Dev

Angular7-フォームを送信するときにフォームの子コンポーネントにエラーメッセージを表示する方法

分類Dev

pwaを追加しようとしているAngular6の新しいプロジェクトでエラーメッセージが表示されます

分類Dev

Angularでカスタムバリデーターのカスタムバリデーターエラーメッセージを追加する方法

分類Dev

Angularフォームの検証中にメッセージを表示しているときにエラーが発生します

分類Dev

動的データテーブルangularで空のメッセージを表示する方法

分類Dev

Angularアプリケーションですべてのコンソールエラーメッセージを取得する方法

分類Dev

Firebaseチャットアプリでメッセージ表示機能を実装する方法

分類Dev

FirebaseメッセージングrefreshTokenをテストする方法

分類Dev

受信メッセージをfirebase DBに保存する方法

分類Dev

Flutterを使用して、AuthServiceクラス内でキャッチされたFirebase Authエラーメッセージを別のログインページウィジェット内に表示するにはどうすればよいですか?

分類Dev

Angular 4:サブスクライブでエラーメッセージを取得する

分類Dev

Angular 4:サブスクライブでエラーメッセージを取得する

分類Dev

AngularアプリケーションでHttpErrorResponseからエラーメッセージを取得する

分類Dev

Firebaseを使用して電話でログインする方法は?「reCAPTCHAコンテナが見つからないか、すでに内部要素が含まれています!」というエラーメッセージが表示されます。

Related 関連記事

  1. 1

    Angular&Firebase:ルックアップコレクションから選択した入力を事前入力する方法は?

  2. 2

    Angularフォームの検証送信時にエラーメッセージを表示する方法

  3. 3

    エラーメッセージを検証して表示する方法-Angular2Material Design?

  4. 4

    Angularでエラーメッセージのみを印刷する方法

  5. 5

    メールvalがfirebaseデータベースで利用できない場合にエラーメッセージを表示する方法

  6. 6

    ngFor Angular2 でユーザーがクリックした要素にのみエラー メッセージを表示する方法

  7. 7

    未定義のエラーメッセージを表示するAngular2フォーム検証

  8. 8

    バージョン17.0.1および16.0.1のFirebaseエラーメッセージを処理する方法

  9. 9

    Angular6でのユーザー入力に基づいてさまざまなエラーメッセージを表示する方法

  10. 10

    レイアウトでFirebase通知メッセージを表示する方法

  11. 11

    エラーメッセージの後に状態を更新する-Firebase-ReactNative

  12. 12

    Firebase認証のカスタムエラーメッセージを作成する

  13. 13

    クエリの結果を使用してトーストメッセージを表示し、Firebase Firestoreで新しいユーザーを作成する方法

  14. 14

    Angular-特定のインデックスでのみエラーメッセージを表示します-ngRepeat内

  15. 15

    AngularでformControlNameの検証メッセージを表示する

  16. 16

    Angular7-フォームを送信するときにフォームの子コンポーネントにエラーメッセージを表示する方法

  17. 17

    pwaを追加しようとしているAngular6の新しいプロジェクトでエラーメッセージが表示されます

  18. 18

    Angularでカスタムバリデーターのカスタムバリデーターエラーメッセージを追加する方法

  19. 19

    Angularフォームの検証中にメッセージを表示しているときにエラーが発生します

  20. 20

    動的データテーブルangularで空のメッセージを表示する方法

  21. 21

    Angularアプリケーションですべてのコンソールエラーメッセージを取得する方法

  22. 22

    Firebaseチャットアプリでメッセージ表示機能を実装する方法

  23. 23

    FirebaseメッセージングrefreshTokenをテストする方法

  24. 24

    受信メッセージをfirebase DBに保存する方法

  25. 25

    Flutterを使用して、AuthServiceクラス内でキャッチされたFirebase Authエラーメッセージを別のログインページウィジェット内に表示するにはどうすればよいですか?

  26. 26

    Angular 4:サブスクライブでエラーメッセージを取得する

  27. 27

    Angular 4:サブスクライブでエラーメッセージを取得する

  28. 28

    AngularアプリケーションでHttpErrorResponseからエラーメッセージを取得する

  29. 29

    Firebaseを使用して電話でログインする方法は?「reCAPTCHAコンテナが見つからないか、すでに内部要素が含まれています!」というエラーメッセージが表示されます。

ホットタグ

アーカイブ