Google は、黒人コミュニティのための人種的公平の促進に取り組んでいます。詳細をご覧ください。

Javascriptを使用してパスワードベースのアカウントを使用してFirebaseで認証する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Firebase Authentication を使用すると、ユーザーがメール アドレスとパスワードを使用して Firebase で認証できるようにし、アプリのパスワード ベースのアカウントを管理できます。

あなたが始める前に

  1. Firebase を JavaScript プロジェクトに追加します
  2. アプリを Firebase プロジェクトにまだ接続していない場合は、 Firebase コンソールから接続します。
  3. メール/パスワードによるサインインを有効にする:
    1. Firebase コンソールで、 Authセクションを開きます。
    2. [サインイン方法] タブで、電子メール/パスワードによるサインイン方法を有効にして、[保存] をクリックします。

パスワードベースのアカウントを作成する

パスワードを使用して新しいユーザー アカウントを作成するには、アプリのサインアップ ページで次の手順を実行します。

  1. 新しいユーザーがアプリのサインアップ フォームを使用してサインアップするときは、新しいアカウントのパスワードが正しく入力され、複雑さの要件を満たしていることを確認するなど、アプリで必要な新しいアカウントの検証手順を完了します。
  2. 新しいユーザーの電子メール アドレスとパスワードをcreateUserWithEmailAndPasswordに渡して、新しいアカウントを作成します。

    Web version 9

    import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
    
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });

    Web version 8

    firebase.auth().createUserWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in 
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ..
      });
    新しいアカウントが作成された場合、ユーザーは自動的にサインインします。以下の「次のステップ」セクションを参照して、サインインしているユーザーの詳細を取得してください。

    これは、エラーをキャッチして処理できる場所でもあります。エラー コードのリストについては、 Auth Reference Docsを参照してください。

メールアドレスとパスワードを使用してユーザーにサインインする

パスワードを使用してユーザーをサインインする手順は、新しいアカウントを作成する手順と似ています。アプリのサインイン ページで、次の操作を行います。

  1. ユーザーがアプリにサインインするときに、ユーザーのメール アドレスとパスワードをsignInWithEmailAndPasswordに渡します。

    Web version 9

    import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
    
    const auth = getAuth();
    signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
      });

    Web version 8

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in
        var user = userCredential.user;
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
      });
    以下の「次のステップ」セクションを参照して、サインインしているユーザーの詳細を取得してください。

    これは、エラーをキャッチして処理できる場所でもあります。エラー コードのリストについては、 Auth Reference Docsを参照してください。

推奨: メール列挙保護を有効にする

メール アドレスをパラメータとして受け取る一部の Firebase Authentication メソッドでは、登録が必要なときにメール アドレスが登録されていない場合 (たとえば、メール アドレスとパスワードを使用してサインインする場合)、または未使用である必要があるときに登録された場合 (たとえば、ユーザーのメールアドレスを変更する場合)。これは、ユーザーに特定の救済策を提案するのに役立ちますが、悪意のあるアクターが悪用して、ユーザーが登録した電子メール アドレスを発見することもできます。

このリスクを軽減するには、Google Cloud のgcloudツールを使用して、プロジェクトのメール列挙保護を有効にすることをお勧めします。この機能を有効にすると、Firebase Authentication のエラー報告の動作が変わることに注意してください。アプリがより具体的なエラーに依存していないことを確認してください。

次のステップ

ユーザーが初めてサインインすると、新しいユーザー アカウントが作成され、サインインに使用したユーザーの資格情報 (ユーザー名とパスワード、電話番号、または認証プロバイダー情報) にリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのサインイン方法に関係なく、プロジェクト内のすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを知るための推奨される方法は、 Authオブジェクトにオブザーバーを設定することです。その後、 Userオブジェクトからユーザーの基本的なプロファイル情報を取得できます。ユーザーの管理を参照してください。

  • Firebase Realtime Database と Cloud Storageセキュリティ ルールでは、サインインしているユーザーの一意のユーザー ID をauth変数から取得し、それを使用してユーザーがアクセスできるデータを制御できます。

認証プロバイダーの資格情報を既存のユーザー アカウントにリンクすることで、ユーザーが複数の認証プロバイダーを使用してアプリにサインインできるようにすることができます。

ユーザーをサインアウトするには、 signOutを呼び出します。

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});