更新日:

Firebase JavaScript メールアドレスログイン パスワードリセット 成果物あり

タグ

成果物

成果物


ソースコード

src/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firebase メールアドレスログイン</title>

    <!-- Bootstrap5 -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- ローディング画面 -->
    <div id="loading">
      <div
        class="
          position-absolute
          h-100
          w-100
          m-0
          d-flex
          align-items-center
          justify-content-center
        "
      >
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </div>
    <!-- ローディング画面ここまで -->

    <!-- ログイン・新規作成・パスワードリセット画面 -->
    <div id="index" style="display: none">
      <button
        type="button"
        class="btn btn-success"
        data-bs-toggle="modal"
        data-bs-target="#loginModal"
      >
        ログイン
      </button>

      <br />
      <br />

      <form name="loginForm">
        <div class="modal" id="loginModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">ログイン</h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                ></button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label>メールアドレス</label>
                  <input
                    type="email"
                    name="email"
                    class="form-control"
                    required
                  />
                </div>
                <div class="form-group">
                  <label>パスワード</label>
                  <input
                    type="password"
                    name="password"
                    class="form-control"
                    required
                  />
                </div>
              </div>
              <div class="modal-footer">
                <input type="submit" class="btn btn-success" value="ログイン" />
              </div>
            </div>
          </div>
        </div>
      </form>

      <button
        type="button"
        class="btn btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#createModal"
      >
        新規登録
      </button>

      <br />

      <form name="createForm">
        <div class="modal" id="createModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">新規登録</h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <div class="form-group">
                  <label>メールアドレス</label>
                  <input
                    type="email"
                    name="email"
                    class="form-control"
                    required
                  />
                </div>
                <div class="form-group">
                  <label>パスワード</label>
                  <input
                    type="password"
                    name="password"
                    class="form-control"
                    required
                    minlength="6"
                  />
                </div>
              </div>
              <div class="modal-footer">
                <input type="submit" class="btn btn-primary" value="新規登録" />
              </div>
            </div>
          </div>
        </div>
      </form>

      <br />

      <button type="button" class="btn btn-warning" id="reset">
        パスワードリセット
      </button>
    </div>
    <!-- ログイン・新規作成・パスワードリセット画面ここまで -->

    <!-- 認証後画面 -->
    <div id="authenticated" style="display: none">
      <div id="uid"></div>
      <button id="logout" class="btn btn-danger">ログアウト</button>
    </div>
    <!-- 認証後画面ここまで -->

    <!-- Firebaseのライブラリ -->
    <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.8.1/firebase-auth.js"></script>
    <!-- Firebaseのライブラリここまで -->

    <!-- Bootstrapライブラリ -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>

    <script>
      firebase.initializeApp({
        apiKey: 'AIzaSyCJvDavxfMyXiVEHlot2o7mkKSTMcCgIhE',
        authDomain: 'bbbb-e7413.firebaseapp.com',
        projectId: 'bbbb-e7413',
        storageBucket: 'bbbb-e7413.appspot.com',
        messagingSenderId: '116768241950',
        appId: '1:116768241950:web:6fb268411c24535f87310f',
        measurementId: 'G-Q62DCB3QVZ',
      });

      // uid取得
      const getUId = async () => {
        return new Promise(resolve => {
          firebase.auth().onAuthStateChanged(async () => {
            resolve(await firebase.auth().currentUser?.uid);
          });
        });
      };

      // 新規登録
      document.forms['createForm'].onsubmit = e => {
        const formElements = document.forms['createForm'];

        if (!formElements.checkValidity()) {
          return;
        }

        e.preventDefault();

        const email = formElements.email.value;
        const password = formElements.password.value;

        firebase
          .auth()
          .createUserWithEmailAndPassword(email, password)
          .then(() => {
            alert('新規登録しました');
            window.location.reload();
          })
          .catch(e => {
            alert('既に登録されているメールアドレスです');
          });
      };

      // ログイン
      document.forms['loginForm'].onsubmit = e => {
        const formElements = document.forms['loginForm'];

        if (!formElements.checkValidity()) {
          return;
        }
        e.preventDefault();

        const email = formElements.email.value;
        const password = formElements.password.value;

        firebase
          .auth()
          .signInWithEmailAndPassword(email, password)
          .then(() => {
            alert('ログイン成功');
            window.location.reload();
          })
          .catch(e => {
            alert('ログイン失敗');
          });
      };

      // パスワードリセット
      document.getElementById('reset').onclick = () => {
        const email = window.prompt('メールアドレスを入力', '');

        firebase
          .auth()
          .sendPasswordResetEmail(email)
          .then(() => {
            alert('メールを送信しました');
          })
          .catch(() => {
            alert('メールアドレスが無効です');
          });
      };

      // ログアウト
      document.getElementById('logout').onclick = () => {
        firebase
          .auth()
          .signOut()
          .then(() => {
            alert('ログアウトしました');
            window.location.reload();
          })
          .catch(e => {});
      };

      // main関数
      const main = async () => {
        const uid = await getUId();

        if (uid == null) {
          document.getElementById('loading').style.display = 'none';
          document.getElementById('index').style.display = 'block';
          return;
        }

        document.getElementById('uid').textContent = `uid: ${uid}`;

        document.getElementById('loading').style.display = 'none';
        document.getElementById('index').style.display = 'none';
        document.getElementById('authenticated').style.display = 'block';
      };

      main();
    </script>
  </body>
</html>

© 2020- itsumen.com