ウェブサイトで Firebase Authentication を使ってみる

Firebase Authentication を使用すると、ユーザーがアプリにログインする際に、メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。このチュートリアルでは、Firebase Authentication を使って、メールアドレスとパスワードのログインをアプリに追加する方法から始めます。

アプリを Firebase に接続する

Firebase SDK をインストールします。説明に従って、ウェブページに設定コードを貼り付けてください。

新しいユーザーを登録する

新規ユーザーがメールアドレスとパスワードを使用してアプリに登録できるフォームを作成します。ユーザーがフォームに入力したら、ユーザーから提供されたメールアドレスとパスワードを検証し、それらを createUserWithEmailAndPassword メソッドに渡します。

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});
email-password.html

既存のユーザーをログインさせる

既存のユーザーがメールアドレスとパスワードを使用してログインできるフォームを作成します。ユーザーがフォームに入力したら、signInWithEmailAndPassword メソッドを呼び出します。

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});
email-password.html

認証状態オブザーバーを設定し、ユーザーデータを取得する

ログインしているユーザーに関する情報が必要なアプリのページごとに、グローバル認証オブジェクトにオブザーバーをアタッチします。このオブザーバーは、ユーザーのログイン状態が変わるたびに呼び出されます。

onAuthStateChanged メソッドを使用してオブザーバーを接続します。ユーザーが正常にログインしたら、オブザーバーでユーザーに関する情報を取得できます。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    var displayName = user.displayName;
    var email = user.email;
    var emailVerified = user.emailVerified;
    var photoURL = user.photoURL;
    var isAnonymous = user.isAnonymous;
    var uid = user.uid;
    var providerData = user.providerData;
    // ...
  } else {
    // User is signed out.
    // ...
  }
});
email-password.html

次のステップ

他の ID プロバイダと匿名ゲスト アカウントのサポートを追加する方法を学びます。

• Google ログイン
• Facebook ログイン
• Twitter ログイン
• GitHub ログイン
• 匿名ログイン