Web初心者がfirebaseでPWA入門してみる(ユーザ登録編)

はじめに

前回の記事から随分経ってしまいましたが、今回はユーザ登録を実装してみます。

ログイン機能は前回実装した、Google Authorization機能を用いますが、一般に公開されるユーザ名を追加で設定できるようにします！

この記事の内容で、FirebaseDB(と呼びます)への書き込みが理解できました。

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

設計と実装

どのようにユーザ管理をするかを考えます。
(あまりWebに詳しくないので間違っていることがあるかもしれませんがご容赦ください。)

今回はユーザの一意のIDをKeyとして、必要な情報をValueに保存するテーブルで管理を行いたいと思います。

FirebaseDBでは以下のようにしてuidを取得できます。参考ページ

var auth = firebase.auth().currentUser;
var uid = auth.uid;

ほかにも User.getToken()というメソッドでもトークンを取得できるようです。

データを上記のように"users/$uid/"という形で保存しました。

javascriptから登録するコードは以下になります。

function OnRegister()
{
  var nameField = document.getElementById('UserName');
  var database = firebase.database();
  var db = database.ref("users");
  var auth = firebase.auth().currentUser;
  var ref = db.child(auth.uid);
  ref.set(
    {
      name: nameField.value
    },function(error)
    {
      if(error)
      {
        console.log(error);
      }else
      {
        window.location.reload(true);
      }
    }
  );
}

簡単に書けますね

また、setするオブジェクトですが、次のようにも書けるみたいです。

function Test()
{
  var object = {name: "hogehoge", number: "fugafuga", id: "piyopiyo"};
  var ref = firebase.database().ref("users/"+firebase.auth().currentUser.uid);
  ref.set(object);
}

これだけでDBの値が更新できるので、便利だと思う反面、ちょっと怖いですね。

さて、ほかのユーザにもuidがバレてしまうとそれ以下のデータを編集されてしまう危険があるので、データベースルールを編集します。

database.rule.json

{
  "rules": {
    "users": {
      "$uid": {
        ".read": "$uid === auth.uid",
        ".write": "$uid === auth.uid"
      }
    },
    "cat_message":{
      ".read": true,
      ".write": false
    }
  }
}

users以下はuidが等しい(自分の)場合のみ読み書き可能、猫のセリフが入っているcat_message以下は読めるが書き込み不可というように修正しました。

初心者がcssでハマった件

firebase + chromeという環境で開発しているわけですが、新たにcssを記述したときにchromeで検証してみると、 user agent stylesheetでスタイルが上書きされている(本当は反映されていない)問題がありました。

結論から言うと、cssがキャッシュされていて新たに追加したスタイルが反映されていませんでした。

エンジニアなのでデベロッパーコンソールから得られる情報でひたすらググったのですが、有益な情報がなく、新規cssファイルを作成したところ反映されて気づいた次第です。。

次のようにしてキャッシュ回避をしました。

<script>
    var rnd = Math.random().toString(36).slice(-8);
    document.write('<link rel="stylesheet" type="text/css" href="/main.css?'+rnd+'>""');
</script>

インラインでjavascriptコードを実行し、ランダムな文字列を生成してcssファイルの末尾に追加しました。

参考: Javascriptでランダムな文字列を生成する方法

まとめ

今回はやりたかったこと以外のところ(cssのキャッシュ)で時間が取られてしまったので、あまり内容が書けませんでした・・・。
次回は、なまいきなねこに言葉を教えてみたいと思います(やっと)。