Firebase HostingでFirebase Authenticationを利用した簡易ウェブページを立ち上げる

· ·

概要 🔗

少し古いやり方かもしれませんが、時々モックを作る上でFirebase Hosting上に簡単なウェブページを作ることがあるためメモ。どちらかというとHTMLやjs、cssをガリガリ書きながらアップロードしていく感じのやり方になる。

不要なコードがまだ結構残っている…特にjsまわり

構成 🔗

1
2
3
4
5
6
7
8
9

├── index.html
├── js
│   ├── fireBase.js
│   ├── main2.js
│   └── main.js
├── css
│   └── style.css
├── login.html
└── resetpassword.html
  • 認証方式: メールアドレス/パスワード

各ファイル 🔗

login.html 🔗

メールアドレスとパスワードによる認証画面を作る

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
  <head>
    <title>ログイン画面</title>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth__ja.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>
	<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
 </head>
  <body>
    <!-- メールアドレス入力フォーム -->
    <div class="form-wrapper">
        <h1>サービスログイン</h1>
        <p id="log"></p>
          <div class="form-item">
            <label for="email"></label>
            <input type="email" name="email"  id="email" required="required" placeholder="メールアドレス"></input>
          </div>
          <div class="form-item">
            <label for="password"></label>
            <input type="password" name="password" id="password" required="required" placeholder="パスワード"></input>
          </div>
          <div class="button-panel">
            <button id="sign-in" class="button" onclick="onSignInButtonClicked();">ログイン</button>
            <p>&nbsp;</p>
            <button id="sign-up" class="button" onclick="onSignUpButtonClicked();">アカウント登録</button>
          </div>
        <div class="form-footer">
          <p><a href="resetpassword.html" >パスワードを忘れた方はこちら</a></p>
          <p>&nbsp;</p>
          <button id="sign-out" onclick="onSignOutButtonClicked();">ログアウト</button>
        </div>
      </div>
    <script src="js/fireBase.js"></script>
    <script src="js/main2.js"></script>
  </body>
</html>

resetpassword.html 🔗

パスワードリセット画面を必要に応じて用意。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html>
  <head>
    <title>ログイン画面</title>
    <script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth__ja.js"></script>
	<script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>
	<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
     <link type="text/css" rel="stylesheet" href="css/style.css" />
 </head>
  <body>
    <h1>ログイン・会員登録</h1>

    <!-- メールアドレス入力フォーム -->
    <div class="form-wrapper">
        <h1>メールアドレスの再設定</h1>
        <p id="log"></p>
          <div class="form-item">
            <label for="email"></label>
            <input type="email" name="email" id="email" required="required" placeholder="メールアドレス"></input>
          </div>
          <!-- <div class="form-item">
            <label for="password"></label>
            <input type="password" name="password" required="required" placeholder="パスワード"></input>
          </div> -->
          <div class="button-panel">
            <button class="button" onclick="onForgetPasswordButtonClicked();">パスワードリセット</button>
          </div>
        <div class="form-footer">
          <p><a href="login3.html">ログイン画面に戻る</a></p>
        </div>
      </div>

    <script src="js/fireBase.js"></script>
    <script src="js/main2.js"></script>
  </body>
</html>

index.html 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
<title>テスト</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth__ja.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
</head>
<body id="main_container" style="display:none;">

  <!-- body コンテンツ-->

<script src="https://www.gstatic.com/firebasejs/8.6.3/firebase-analytics.js"></script>
<script type="text/javascript">
	var ui = new firebaseui.auth.AuthUI(firebase.auth());

	var uiConfig = {
	  callbacks: {
		signInSuccessWithAuthResult: function(authResult, redirectUrl) {
		  return true;
		},
		uiShown: function() {
		  document.getElementById('loader').style.display = 'none';
		}
	  },
	  signInFlow: 'popup',
	  signInSuccessUrl: './success.html',
	  signInOptions: [
		firebase.auth.EmailAuthProvider.PROVIDER_ID,
	  ],
	};
	ui.start('#firebaseui-auth-container', uiConfig);
</script>
	
	<script type="text/javascript" src="js/fireBase.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
	<button onclick="mainApp.logout();">logout</button>
</body>

</html>

fireBase.js 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var fireBase = fireBase || firebase;
var hasInit = false;
var config = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  projectId: "xxxxx",
  storageBucket: "xxxxx",
  messagingSenderId: "xxxxx",
  appId: "xxxxx",
  measurementId: "xxxxx"
};
if(!hasInit){
    firebase.initializeApp(config);
    hasInit = true;
}

main.js 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var mainApp = {};
(function(){
var mainContainer = document.getElementById("main_container");

    var logtout =  function(){
        firebase.auth().signOut().then(function(){
            console.log('success');
            window.location.replace("login.html");
        },function(){})
    }

var init = function(){
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          // User is signed in.
          console.log("stay");
          mainContainer.style.display = "";
        } else {
          // No user is signed in.
          mainContainer.style.display = "none";
          console.log("redirect");
          window.location.replace("login.html");
        }
      });
}
    
init();

mainApp.logout = logtout;
})();

main2.js 🔗

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

function initApp() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        // printUserInfo(user.email, user.uid);
        // log(`ログインしました。: ${user.uid}`);
        disableSignUpAndSignIn();
      } else {
        // clearUserInfo();
        disableSignOut();
      }
      clearForm();
    });
  }
  
  initApp();
  
  function printUserInfo(email, uid) {
    document.getElementById(
      "userinfo"
    ).innerHTML = `<p>Email: ${email}</p><p>UID: ${uid}</p>`;
  }
  
  function clearUserInfo() {
    document.getElementById("userinfo").innerHTML = `<p>未ログイン</p>`;
  }
  
  function disableSignUpAndSignIn(login) {
    document.getElementById("sign-up").disabled = true;
    document.getElementById("sign-in").disabled = true;
    document.getElementById("sign-out").disabled = false;
    document.getElementById("email").disabled = true;
    document.getElementById("password").disabled = true;
  }
  
  function disableSignOut() {
    document.getElementById("sign-up").disabled = false;
    document.getElementById("sign-in").disabled = false;
    signOut = document.getElementById("sign-out").disabled = true;
    email = document.getElementById("email").disabled = false;
    password = document.getElementById("password").disabled = false;
  }
  
  function clearForm() {
    document.getElementById("email").value = "";
    document.getElementById("password").value = "";
  }
  
  onSignUpButtonClicked = function() {
    const email = getEmail();
    const password = getPassword();
  
    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(function() {
        var user = firebase.auth().currentUser;
        user.sendEmailVerification().then(function() {
            log(`サインアップしました。認証通知メールからアカウントを有効にしてください。: ${email}`);
        }).catch(function(error) {
            log(`確認メール送信中にエラーが発生しました : ${error}`);
    });
      })
      .catch(function(error) {
        log(`サインアップできませんでした。${error}`);
      });
  };
  
  onSignInButtonClicked = function() {
    const email = getEmail();
    const password = getPassword();
  
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(function() {
        window.location.href = 'index.html';
      }).catch((error) => {
        log(`ログインできませんでした。${error}`);
      });
  };
  
  onForgetPasswordButtonClicked = function() {
    const email = getEmail();
  
    firebase
      .auth()
      .sendPasswordResetEmail(email)
      .then(function() {
        log('メールアドレス宛にパスワードの再設定メールを送信しました');
      }).catch((error) => {
        log(`エラーが発生しました : ${error}`);
      });
  };

  function getEmail() {
    return document.getElementById("email").value;
  }
  
  function getPassword() {
    return document.getElementById("password").value;
  }
  
  onSignOutButtonClicked = function() {
    firebase
      .auth()
      .signOut()
      .then(function() {
        log("ログアウトしました。");
      })
      .catch(function(error) {
        log(`ログアウトできませんでした。${error}`);
      });
  };
  
  function log(msg) {
    document.getElementById("log").innerText += `${msg}\n`;
  }
firebase
comments powered by Disqus