08.googleアカウントでのログイン機能:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン最新のリビジョン両方とも次のリビジョン | ||
08.googleアカウントでのログイン機能:index.html [2018/12/16] – adash333 | 08.googleアカウントでのログイン機能:index.html [2018/12/16] – [写経元サイト] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 08.Vue.jsとfirebaseでGoogleアカウントでのログイン機能を実装 | + | ===== 08.Vue.jsとfirebaseでGoogleアカウントでのログイン機能を実装 ===== |
Googleログイン機能を試してみたいと思います。 | Googleログイン機能を試してみたいと思います。 | ||
- | Googleアカウント | + | Googleログイン機能は、Googleアカウントを持っている人であれば、誰でもそのアプリにログインすることができるような機能です。 |
- | GitHubアカウント | + | |
+ | あらかじめ、管理者が指定した人のみがログインできるような機能は、 | ||
+ | -「Authentication」>「ログイン方法」で、「メール/ | ||
+ | -「Authentication」>「ユーザー」で、「ユーザーを追加」から、特定のメールとパスワードを入力して登録 | ||
+ | することにより、可能だと思われますが、次回以降、説明してみたいと思います。 | ||
- | ポイント:CodesandboxでFirebase認証を行う場合は、Firebaseで、 | + | <wrap hi>ポイント</ |
Authentication > ルール > ドメインの追加 | Authentication > ルール > ドメインの追加 | ||
- | で、承認済みドメインに、codesandbox.io を追加する必要があります。\\ | + | で、承認済みドメインに、codesandbox.io を追加する必要があります。 |
- | (デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。) | + | |
+ | デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。 | ||
+ | |||
+ | <wrap hi> | ||
{{: | {{: | ||
+ | ===== 方針をたてる ===== | ||
+ | 今回作成するGoogle認証アプリは、 | ||
+ | -トップページに、「Googleでログイン」ボタンを表示 | ||
+ | -「Googleでログイン」ボタンをクリックすると、新たなページが開いて、Googleアカウントでログインする | ||
+ | -ログインしたら、ログインした人の名前を表示 | ||
+ | -ログインしたら、それぞれの人でitemの追加と削除、リスト表示を行う | ||
+ | -ログイン後の画面に、ログアウトボタンを表示 | ||
+ | |||
+ | となります。 | ||
+ | |||
+ | -データは『Firebase』という場所に保存 | ||
+ | |||
+ | ものとします。 | ||
+ | |||
+ | 今回は、https:// | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | |||
+ | |||
+ | これから作るもの | ||
+ | |||
+ | < | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | 作成中 | ||
+ | |||
+ | ==== 0.用意するもの(開発環境) ==== | ||
+ | < | ||
+ | パソコン | ||
+ | Chrome(くろーむ、WEBブラウザの一つ) | ||
+ | GitHubアカウント作成済み(無料) | ||
+ | Googleアカウント作成済み(無料) | ||
+ | </ | ||
+ | |||
+ | パソコンは、Windowsパソコンでも、Macでも、かまいませんが、私の場合はWindows 8.1 Proとなります。 | ||
+ | |||
+ | ==== 1.Firebaseで新規プロジェクト(新しいサーバ)を作成 ==== | ||
+ | |||
+ | *https:// | ||
+ | {{: | ||
+ | |||
+ | *今回は、「firebase-auth」という名前で新規プロジェクトを作成しました。 | ||
+ | {{: | ||
+ | |||
+ | *測定管理者間のデータ保護条項と規約の左側のチェックボックスをONにして、右下の「プロジェクトを作成」をクリック。 | ||
+ | {{: | ||
+ | |||
+ | *少し待つと、「新しいプロジェクトの準備ができました」と表示されるので、次へ をクリック。 | ||
+ | {{: | ||
+ | |||
+ | *以下のようなプロジェクトトップ画面になるので、下図のように、「</> | ||
+ | {{: | ||
+ | |||
+ | *「ウェブアプリにFirebaseを追加」の画面が出てくるので、グレーで表示された部分の中身をメモ帳などにコピーしておきます。これは、後で、CodeSandboxで、ペーストします。 | ||
+ | {{: | ||
+ | |||
+ | *プロジェクトトップ画面で、画面左側の列の「開発」をクリック | ||
+ | {{: | ||
+ | |||
+ | *Authentication をクリック | ||
+ | {{: | ||
+ | |||
+ | *ログイン方法 をクリック | ||
+ | {{: | ||
+ | |||
+ | *「Google」をクリックして、有効 にします。プロジェクトのサポートメールのところをクリックすると、自動的に、Googleアカウントのメールが表示されます。その後、「保存」をクリック | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | *Authenticationのログインの画面に戻るので、さらに下の方へ行き、「承認済みドメイン」のところの、「ドメインを追加」をクリック | ||
+ | {{: | ||
+ | |||
+ | *ドメインのところに codesandbox.io と入力して、追加 をクリック | ||
+ | {{: | ||
+ | *すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。 | ||
+ | {{: | ||
+ | |||
+ | *画面左側の列の、Databaseをクリック | ||
+ | {{: | ||
+ | |||
+ | *Database画面の下の方へ行き、Realtime Database の、「データベースを作成」をクリック | ||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | *そのまま、「有効にする」をクリック | ||
+ | {{: | ||
+ | |||
+ | *Databaseのトップ画面になるので、「ルール」をクリック | ||
+ | {{: | ||
+ | |||
+ | *次のような画面になる | ||
+ | {{: | ||
+ | |||
+ | *中身を、以下のコードに書き換えて、 | ||
+ | |||
+ | < | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | *公開 をクリック | ||
+ | {{: | ||
+ | |||
+ | *すると、以下のように、各ユーザが、自分のitemsデータのみ読み書きできる設定に変更されます。 | ||
+ | {{: | ||
+ | |||
+ | 写経元サイト:https:// | ||
+ | |||
+ | 参考:https:// | ||
+ | |||
+ | https:// | ||
+ | @mironal | ||
+ | 2017年11月08日に更新 | ||
+ | Firebase5日目 | ||
+ | firebase realtime database でよく使う rule | ||
+ | ==== 2. CodeSandboxでVue.jsアプリを作成 ==== | ||
+ | -https:// | ||
+ | -Vue をクリック | ||
+ | -index.htmlの編集 | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== 写経元サイト ===== | ||
+ | |||
+ | https:// | ||
+ | |||
+ | 途中 | ||
===== リンク ===== | ===== リンク ===== | ||
https:// | https:// | ||
行 32: | 行 181: | ||
firebase入門 ユーザー認証を行う方法まとめ | firebase入門 ユーザー認証を行う方法まとめ | ||
2018.05.02 Javascript Firebase, FirebaseUI, サーバーレス | 2018.05.02 Javascript Firebase, FirebaseUI, サーバーレス | ||
+ | |||
+ | https:// | ||
+ | 2016-10-03 | ||
+ | Web開発が捗るFirebase入門!JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開! | ||
+ | |||
+ | |||
+ | |||
+ | |||
08.googleアカウントでのログイン機能/index.html.txt · 最終更新: 2018/12/19 by adash333