128
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Firebase Authentication これだけは覚えておけ!テストに出るぞ!

Last updated at Posted at 2016-12-14

ユーザー登録やログインはどんなWebアプリケーションでもほぼ必須なのに、いざ実装するとなるといろいろ考えることが多くて(主にパスワードの保存方法とか漏洩対策とか)正直しんどい。
Firebaseには最初からメールアドレスとパスワードを使ったユーザー認証の仕組みが用意されていて、プロジェクトを作って管理コンソールで有効にするだけですぐに利用することができる。ここの仕組みだけでもFirebaseを使う価値は十分にあるかもしれない。

サインイン

メールアドレスとパスワードを使ったサインインの実装。

// なんらかの方法でユーザーの入力したユーザー名とパスワードを取得する。
// 例:
let email = document.getElementById('input-email').value;
let password = document.getElementById('input-password').value;

firebase.auth().signInWithEmailAndPassword(email, password)
  .then(user => {
    // ログイン成功
    // ページを移動する、ユーザーの情報を取得して処理を行う、等する
    // user.uid をユーザーIDとして使用する
  }, err => {
    // エラーを表示する等
  });

サインアウト

サインインをするということは、サインアウトもしなければいけないだろう。

firebase.auth().signOut()
  .then(_ => {
    // ログイン画面に戻る等
  }, err => {
    // エラーを表示する等
  });

現在サインインしているかどうかを判定する

マイページのような機能は、サインインしている状態でアクセスしなければならない。サインインをしていない状態だったらサインインする画面に遷移させたりしたい。

firebase.auth().onAuthStateChanged((user) => {
  if (!user) {
    // サインインしていない状態
    // サインイン画面に遷移する等
    // 例:
    location.href = '/signin.html';
  } else {
    // サインイン済み
  }
});

作っているのが社内用アプリだったりテスト用だったりする場合は、ひとまずこれくらい押さえておけば大丈夫だ!

あとは公式のドキュメント見てください。
https://firebase.google.com/docs/auth/web/password-auth

128
97
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
128
97

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?