Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
96
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@niusounds

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

ユーザー登録やログインはどんな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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
96
Help us understand the problem. What are the problem?