08.googleアカウントでのログイン機能:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
08.googleアカウントでのログイン機能:index.html [2018/12/16] – [0.用意するもの(開発環境)] 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ログイン機能は、Googleアカウントを持っている人であれば、誰でもそのアプリにログインすることができるような機能です。 |
- | GitHubアカウント | + | |
+ | あらかじめ、管理者が指定した人のみがログインできるような機能は、 | ||
+ | -「Authentication」>「ログイン方法」で、「メール/ | ||
+ | -「Authentication」>「ユーザー」で、「ユーザーを追加」から、特定のメールとパスワードを入力して登録 | ||
+ | することにより、可能だと思われますが、次回以降、説明してみたいと思います。 | ||
<wrap hi> | <wrap hi> | ||
行 11: | 行 14: | ||
Authentication > ルール > ドメインの追加 | Authentication > ルール > ドメインの追加 | ||
- | で、承認済みドメインに、codesandbox.io を追加する必要があります。\\ | + | で、承認済みドメインに、codesandbox.io を追加する必要があります。 |
- | (デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。) | + | |
+ | デフォルトでは、localhostと、そのfirebaseアプリのドメインが承認済みになっています。 | ||
+ | |||
+ | <wrap hi> | ||
行 23: | 行 29: | ||
-「Googleでログイン」ボタンをクリックすると、新たなページが開いて、Googleアカウントでログインする | -「Googleでログイン」ボタンをクリックすると、新たなページが開いて、Googleアカウントでログインする | ||
-ログインしたら、ログインした人の名前を表示 | -ログインしたら、ログインした人の名前を表示 | ||
+ | -ログインしたら、それぞれの人でitemの追加と削除、リスト表示を行う | ||
-ログイン後の画面に、ログアウトボタンを表示 | -ログイン後の画面に、ログアウトボタンを表示 | ||
行 31: | 行 38: | ||
ものとします。 | ものとします。 | ||
- | 今回は、 | + | 今回は、https:// |
- | + | ||
- | のソースコードを利用させていただこうと思います。 | + | |
ソースコード | ソースコード | ||
行 40: | 行 45: | ||
これから作るもの | これから作るもの | ||
+ | |||
+ | http:// | ||
+ | |||
+ | http:// | ||
< | < | ||
行 60: | 行 69: | ||
==== 1.Firebaseで新規プロジェクト(新しいサーバ)を作成 ==== | ==== 1.Firebaseで新規プロジェクト(新しいサーバ)を作成 ==== | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | | + | |
{{: | {{: | ||
- | + | *すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。 | |
- | -すると、以下のように、承認済みドメインのところに、codesandbox.ioが追加されたことが分かります。 | + | |
{{: | {{: | ||
- | | + | |
+ | {{: | ||
+ | *Database画面の下の方へ行き、Realtime Database の、「データベースを作成」をクリック | ||
+ | {{: | ||
- | -モードは、「テストモード」を選択 | + | {{: |
- | | + | |
- | | + | |
+ | {{: | ||
+ | |||
+ | *Databaseのトップ画面になるので、「ルール」をクリック | ||
+ | {{: | ||
+ | |||
+ | *次のような画面になる | ||
+ | {{: | ||
+ | |||
+ | *中身を、以下のコードに書き換えて、 | ||
+ | |||
+ | < | ||
+ | { | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | " | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | *公開 をクリック | ||
+ | {{: | ||
+ | |||
+ | *すると、以下のように、各ユーザが、自分のitemsデータのみ読み書きできる設定に変更されます。 | ||
+ | {{: | ||
+ | |||
+ | 写経元サイト:https:// | ||
参考: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:// |
08.googleアカウントでのログイン機能/index.html.1544933454.txt.gz · 最終更新: 2018/12/16 by adash333