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

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

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

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

あなたが始める前に

  1. JavaScriptプロジェクトにFirebaseを追加します
  2. アプリをFirebaseプロジェクトにまだ接続していない場合は、 Firebaseコンソールから接続します。
  3. 電子メール/パスワードのサインインを有効にする:
    1. Firebaseコンソールで、[認証]セクションを開きます。
    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;
        // ..
      });
    新しいアカウントが作成された場合、ユーザーは自動的にサインインします。サインインしたユーザーの詳細を取得するには、以下の「次のステップ」セクションを参照してください。

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

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

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

  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;
      });
    サインインしたユーザーの詳細を取得するには、以下の「次のステップ」セクションを参照してください。

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

次のステップ

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

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

  • FirebaseRealtimeデータベースとCloudStorageのセキュリティルールでは、ログインしたユーザーの一意のユーザー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.
});