サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール

現在位置: index.html » 08.googleアカウントでのログイン機能
トレース:
08.googleアカウントでのログイン機能:index.html


差分

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

この比較画面へのリンク

次のリビジョン		前のリビジョン
08.googleアカウントでのログイン機能:index.html [2018/12/14] – 作成 adash33308.googleアカウントでのログイン機能:index.html [2018/12/19] (現在) – [方針をたてる] adash333
行 1: 行 1:
-====== 08.Vue.jsとfirebaseでGoogleアカウントでのログイン機能を実装 ======+===== 08.Vue.jsとfirebaseでGoogleアカウントでのログイン機能を実装 ===== 
 + 
 +Googleログイン機能を試してみたいと思います。 
 + 
 +Googleログイン機能は、Googleアカウントを持っている人であれば、誰でもそのアプリにログインすることができるような機能です。 
 + 
 +あらかじめ、管理者が指定した人のみがログインできるような機能は、 
 +  -「Authentication」＞「ログイン方法」で、「メール/パスワード」を有効にしたのち、 
 +  -「Authentication」＞「ユーザー」で、「ユーザーを追加」から、特定のメールとパスワードを入力して登録 
 +することにより、可能だと思われますが、次回以降、説明してみたいと思います。 
 + 
 +<wrap hi>ポイント</wrap>：CodesandboxでFirebase認証を行う場合は、Firebaseで、 
 + 
 +Authentication　＞　ルール　＞　ドメインの追加 
 + 
 +で、承認済みドメインに、codesandbox.io を追加する必要があります。 
 + 
 +デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。 
 + 
 +<wrap hi>CodeSandbox、now、やNetlifyなどでアプリを公開する場合は、firebaseアプリの設定でドメイン追加を忘れないようにする</wrap>必要がありあます。 
 + 
 + 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-104655.png}} 
 + 
 +===== 方針をたてる ===== 
 +今回作成するGoogle認証アプリは、 
 + 
 +  -トップページに、「Googleでログイン」ボタンを表示 
 +  -「Googleでログイン」ボタンをクリックすると、新たなページが開いて、Googleアカウントでログインする 
 +  -ログインしたら、ログインした人の名前を表示 
 +  -ログインしたら、それぞれの人でitemの追加と削除、リスト表示を行う 
 +  -ログイン後の画面に、ログアウトボタンを表示 
 + 
 +となります。 
 + 
 +  -データは『Firebase』という場所に保存 
 + 
 +ものとします。 
 + 
 +今回は、https://gist.github.com/mickaelandrieu/a66bdf031a3c5fa4caf301504f018904のソースコードを利用させていただこうと思います。 
 + 
 +ソースコード 
 + 
 + 
 + 
 +これから作るもの 
 + 
 +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> 
 + 
 +</html> 
 + 
 + 
 +作成中 
 + 
 +==== 0.用意するもの（開発環境） ==== 
 +<code> 
 +パソコン 
 +Chrome（くろーむ、WEBブラウザの一つ） 
 +GitHubアカウント作成済み（無料） 
 +Googleアカウント作成済み（無料） 
 +</code> 
 + 
 +パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 8.1 Proとなります。 
 + 
 +==== 1.Firebaseで新規プロジェクト（新しいサーバ）を作成 ==== 
 + 
 +  *https://console.firebase.google.com　にGoogleアカウントでログインし、新規プロジェクト作成 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-124725.png}} 
 + 
 +  *今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-124838.png}} 
 + 
 +  *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-125023.png}} 
 + 
 +  *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ　をクリック。 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-125148.png}} 
 + 
 +  *以下のようなプロジェクトトップ画面になるので、下図のように、「</>」をクリック。 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-125305.png}} 
 + 
 +  *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-125734.png}} 
 + 
 +  *プロジェクトトップ画面で、画面左側の列の「開発」をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130117.png}} 
 + 
 +  *Authentication　をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130030.png}} 
 + 
 +  *ログイン方法　をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130219.png}} 
 + 
 +  *「Google」をクリックして、有効　にします。プロジェクトのサポートメールのところをクリックすると、自動的に、Googleアカウントのメールが表示されます。その後、「保存」をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130353.png}} 
 + 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130547.png}} 
 + 
 +  *Authenticationのログインの画面に戻るので、さらに下の方へ行き、「承認済みドメイン」のところの、「ドメインを追加」をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130702.png}} 
 + 
 +  *ドメインのところに　codesandbox.io　と入力して、追加　をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-130925.png}} 
 +  *すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-131032.png}} 
 + 
 +  *画面左側の列の、Databaseをクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-131711.png}} 
 + 
 +  *Database画面の下の方へ行き、Realtime Database の、「データベースを作成」をクリック 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-133547.png}} 
 + 
 +{{:08.googleアカウントでのログイン機能:pasted:20181216-133626.png}} 
 + 
 +  *そのまま、「有効にする」をクリック 
 +{{: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 
 +2017年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 
 + 
 + 
 + 
 + 
 +https://qiita.com/t_furu/items/61bd8e4167c21d7e3ca0 
 +@t_furu 
 +2017年03月13日に更新 
 +Firebase 入門 - ユーザー認証を利用する 
 + 
 +https://webbibouroku.com/Blog/Article/firebase-auth 
 +firebase入門 ユーザー認証を行う方法まとめ 
 +2018.05.02 Javascript Firebase, FirebaseUI, サーバーレス 
 + 
 +https://paiza.hatenablog.com/entry/2016/10/03/Web%E9%96%8B%E7%99%BA%E3%81%8C%E6%8D%97%E3%82%8BFirebase%E5%85%A5%E9%96%80%EF%BC%81JavaScript%E3%81%A7%E3%80%8CWeb%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E8%AA%8D%E8%A8%BC%E3%80%8D%E6%A9%9F%E8%83%BD%E3%82%92 
 +2016-10-03 
 +Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
 + 
  


08.googleアカウントでのログイン機能/index.html.1544822799.txt.gz · 最終更新: 2018/12/14 by adash333
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki