差分

このページの2つのバージョン間の差分を表示します。

--- 08.googleアカウントでのログイン機能:index.html [2018/12/16] – [方針をたてる] adash333
+++ 08.googleアカウントでのログイン機能:index.html [2018/12/19] (現在) – [方針をたてる] adash333
@@ 行 1: / 行 1: @@
-====== 08.Vue.jsとfirebaseでGoogleアカウントでのログイン機能を実装 ======
+===== 08.Vue.jsとfirebaseでGoogleアカウントでのログイン機能を実装 =====
 Googleログイン機能を試してみたいと思います。
-Googleアカウント
+Googleログイン機能は、Googleアカウントを持っている人であれば、誰でもそのアプリにログインすることができるような機能です。
-GitHubアカウント
+あらかじめ、管理者が指定した人のみがログインできるような機能は、
+  -「Authentication」＞「ログイン方法」で、「メール/パスワード」を有効にしたのち、
+  -「Authentication」＞「ユーザー」で、「ユーザーを追加」から、特定のメールとパスワードを入力して登録
+することにより、可能だと思われますが、次回以降、説明してみたいと思います。
 <wrap hi>ポイント</wrap>：CodesandboxでFirebase認証を行う場合は、Firebaseで、
@@ 行 11: / 行 14: @@
 Authentication　＞　ルール　＞　ドメインの追加
-で、承認済みドメインに、codesandbox.io を追加する必要があります。\\
+で、承認済みドメインに、codesandbox.io を追加する必要があります。
-(デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。)
+デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。
+<wrap hi>CodeSandbox、now、やNetlifyなどでアプリを公開する場合は、firebaseアプリの設定でドメイン追加を忘れないようにする</wrap>必要がありあます。
@@ 行 39: / 行 45: @@
 これから作るもの
+http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:index.html
+http://i-doctor.sakura.ne.jp/web/doku.php?id=z_blog:2018:181216_vue-firebase-miniweb2
 <html>
@@ 行 59: / 行 69: @@
 ==== 1.Firebaseで新規プロジェクト（新しいサーバ）を作成 ====
-  -https://console.firebase.google.com　にGoogleアカウントでログインし、新規プロジェクト作成
+  *https://console.firebase.google.com　にGoogleアカウントでログインし、新規プロジェクト作成
 {{:08.googleアカウントでのログイン機能:pasted:20181216-124725.png}}
-  -今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。
+  *今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-124838.png}}
-  -測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。
+  *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-125023.png}}
-  -少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。
+  *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-125148.png}}
-  -以下のようなプロジェクトトップ画面になるので、下図のように、「</>」をクリック。
+  *以下のようなプロジェクトトップ画面になるので、下図のように、「</>」をクリック。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-125305.png}}
-  -「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。
+  *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-125734.png}}
-  -プロジェクトトップ画面で、画面左側の列の「開発」をクリック
+  *プロジェクトトップ画面で、画面左側の列の「開発」をクリック
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130117.png}}
-  -Authentication　をクリック
+  *Authentication　をクリック
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130030.png}}
-  -ログイン方法　をクリック
+  *ログイン方法　をクリック
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130219.png}}
-  -「Google」をクリックして、有効　にします。プロジェクトのサポートメールのところをクリックすると、自動的に、Googleアカウントのメールが表示されます。その後、「保存」をクリック
+  *「Google」をクリックして、有効　にします。プロジェクトのサポートメールのところをクリックすると、自動的に、Googleアカウントのメールが表示されます。その後、「保存」をクリック
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130353.png}}
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130547.png}}
-  -Authenticationのログインの画面に戻るので、さらに下の方へ行き、「承認済みドメイン」のところの、「ドメインを追加」をクリック
+  *Authenticationのログインの画面に戻るので、さらに下の方へ行き、「承認済みドメイン」のところの、「ドメインを追加」をクリック
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130702.png}}
-  -ドメインのところに　codesandbox.io　と入力して、追加　をクリック
+  *ドメインのところに　codesandbox.io　と入力して、追加　をクリック
 {{:08.googleアカウントでのログイン機能:pasted:20181216-130925.png}}
+  *すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。
-  -すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。
 {{:08.googleアカウントでのログイン機能:pasted:20181216-131032.png}}
-  -Database > Realtime Database をクリック
+  *画面左側の列の、Databaseをクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-131711.png}}
+  *Database画面の下の方へ行き、Realtime Database の、「データベースを作成」をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-133547.png}}
-  -モードは、「テストモード」を選択
+{{:08.googleアカウントでのログイン機能:pasted:20181216-133626.png}}
-  -Project Overview > 「開始するにはアプリを追加してください」のすぐ上の、「</>」をクリック
-  -「ウェブアプリに Firebase を追加」画面が出てくるので、中身をメモ帳などにコピーしておく
+  *そのまま、「有効にする」をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-133736.png}}
+  *Databaseのトップ画面になるので、「ルール」をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-134042.png}}
+  *次のような画面になる
+{{:08.googleアカウントでのログイン機能:pasted:20181216-134115.png}}
+  *中身を、以下のコードに書き換えて、
+<code>
+{
+  "rules": {
+    "items": {
+      "$uid": {
+        ".read": "auth != null && auth.uid == $uid",
+        ".write": "auth != null && auth.uid == $uid"
+      }
+    }
+  }
+}
+</code>
+  *公開　をクリック
+{{:08.googleアカウントでのログイン機能:pasted:20181216-134233.png}}
+  *すると、以下のように、各ユーザが、自分のitemsデータのみ読み書きできる設定に変更されます。
+{{:08.googleアカウントでのログイン機能:pasted:20181216-134332.png}}
+写経元サイト：https://gist.github.com/mickaelandrieu/a66bdf031a3c5fa4caf301504f018904
 参考：https://liginc.co.jp/378463
+https://qiita.com/mironal/items/b93742e8ef72b3268beb
+@mironal
+年11月08日に更新
+Firebase5日目
+firebase realtime database でよく使う rule
+==== 2. CodeSandboxでVue.jsアプリを作成 ====
+  -https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック
+  -Vue　をクリック
+  -index.htmlの編集
+<html>
+<script src="https://gist.github.com/adash333/4934d21f16889b871cbc9c2872611d5e.js"></script>
+</html>
+===== 写経元サイト =====
+https://gist.github.com/mickaelandrieu/a66bdf031a3c5fa4caf301504f018904
+途中
 ===== リンク =====
 https://firebase.google.com/docs/web/setup