소개

전회의 기사로부터 상당히 지나 버렸습니다만, 이번은 유저 등록을 구현해 보겠습니다.

로그인 기능은 이전에 구현한 Google Authorization 기능을 사용하지만, 일반에 공개되는 사용자 이름을 추가로 설정할 수 있도록 합니다!

이 기사의 내용에서 FirebaseDB (라고 함)에 쓰는 것을 이해할 수있었습니다.

아티팩트는 여기입니다.
htps : // 기주 b. 코 m / 타마 gn / Chie ky 또는 t / t Ree / Da y3

설계 및 구현

어떻게 사용자 관리를 할 것인가를 생각합니다.
(별로 웹에 자세하지 않기 때문에 잘못되어 있을지도 모릅니다만 용서해 주세요.)

이번에는 유저의 일의의 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의 캐쉬)로 시간이 걸려 버렸기 때문에, 그다지 내용을 쓸 수 없었습니다・・・.
다음 번에는, 나마이키나코에게 말을 가르쳐 보고 싶습니다(겨우).