Web初心者がfirebaseでPWA入門してみる(Authorization編)

はじめに

こちらはWeb初心者がfirebaseでPWA入門してみるの第二回になります。
前回の拙い記事をいいねしてくださった方ありがとうございます・・！

今日は前回作成したなまいきなねことGoogleさんを繋げてみたいと思います。

端的に言うとログイン機能を実装して、ねこに言葉を教えるときに利用したいと思います。

成果物はこちらになります。
https://github.com/tamalign/CheekyCat/tree/day2

Authorization機能を実装する

まずはプロジェクトにAuth.jsを追加します。

auth.js

var auth_button = document.getElementById('auth-button');
var logout_button = document.getElementById('logout-button');

firebase.auth().onAuthStateChanged(function(user) {

  if (user) {
     // ログアウトボタンを出す
     logout_button.style.display = "";
     auth_button.style.display = "none";
  } else {
    logout_button.style.display = "none";
    auth_button.style.display = "";
  }
});

function Auth()
{
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithRedirect(provider);
}

function Logout()
{
  firebase.auth().signOut().then(function() {
    console.log("ログアウトしました");
    location.reload();
  }).catch(function(error) {
    console.log("ログアウトエラー");
});
}

Authorizationもログアウトも(ほぼ)一行で書けるので素敵ですね。

今回はGoogleアカウントでのログインを実装しました。

index.htmlも書き換えます。

index.html

<!-- ログインボタン -->
<div id="button-container">
    <a href="#" id="auth-button" class="square_btn_blue" onclick="Auth()">ねこをGoogleに繋ぐ</a>
    <a href="#" id="logout-button"  class="square_btn_red" onclick="Logout()">ねこをGoogleから離す</a>
</div>

ログイン/ログアウトボタン要素をそれぞれ取得し、firebase.auth().onAuthStateChangedのコールバックで表示/非表示を制御します。

ハマりどころ その1

前回書いたhtmlからのFirebase SDKの呼び出しですが、scriptタグの設定がdeferになっていたため、新規に追加したauth.jsが先に読み込まれて firebaseがundifinedと怒られました。

今回は速さは求めていないので、とりあえずdeferを外しました。

ハマりどころ その2(未解決)

ログインした後のRedirect後に、firebase.auth().onAuthStateChange()が呼ばれるまで2つのボタンが表示されてしまいます。

予めボタンのタグにstyle="display: none"を設定すると、コールバックでなぜか上書きしてくれない・・。

格好が悪いので早めに修正したいです。

追記
どうやらstyle="compact"を指定するとうまく動かないみたいです。

style.display = ""を指定して上書きしてやるとうまく消えました！

#まとめ
今回はGoogleアカウントでのログイン/ログアウトを実装してみました。

ハマりどころ2が解決していないので、後ほど修正して~~追記する予定です。~~追記しました。

次回は認証を行なった後に取得できるトークンを利用してユーザーアカウントを作成し、firebaseのRealtime Detabaseに追加したいと思います。