このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/01/09] adash333 [0.用意するもの(開発環境)] |
13.vue.jsとfirebaseで認証つきボイスレコーダー:index.html [2019/05/11] (現在) adash333 [方針をたてる] |
||
---|---|---|---|
行 26: | 行 26: | ||
https:// | https:// | ||
+ | |||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト1 (Firebase認証を用いる場合は、デプロイ先のアドレスを、FirebaseのAuthenticationで『認証済みドメイン』に登録する必要があります。) | ||
+ | https:// | ||
+ | |||
+ | デモサイト2 | ||
+ | https:// | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
行 46: | 行 63: | ||
Vuetify | Vuetify | ||
firebase | firebase | ||
- | vue-spinner | ||
moment | moment | ||
</ | </ | ||
行 83: | 行 99: | ||
これは、Firestore内の、/ | これは、Firestore内の、/ | ||
+ | |||
+ | この後、さらに以下のように変更しました。 | ||
+ | < | ||
+ | service cloud.firestore { | ||
+ | match / | ||
+ | match / | ||
+ | allow read, write: if request.auth.uid == user_id; | ||
+ | } | ||
+ | match / | ||
+ | allow read, write: if request.auth.uid == user_id; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </ | ||
+ | {{: | ||
===== FirebaseでGoogle認証の有効化とドメイン追加 ===== | ===== FirebaseでGoogle認証の有効化とドメイン追加 ===== | ||
行 128: | 行 159: | ||
firebase | firebase | ||
moment | moment | ||
- | vue-spinner | ||
</ | </ | ||
{{: | {{: | ||
行 145: | 行 175: | ||
<script src=" | <script src=" | ||
</ | </ | ||
+ | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
- | + | ===== src/components/ | |
- | + | ||
- | ===== src/ | + | |
- | ===== | + | |
最初に、ログイン機能を実装します。 | 最初に、ログイン機能を実装します。 | ||
ログイン機能は、実装が一番楽な、Google認証とします。 | ログイン機能は、実装が一番楽な、Google認証とします。 | ||
+ | src/ | ||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | {{: | ||
+ | {{: | ||
+ | src/ | ||
+ | {{: | ||
+ | ===== ログイン関数googleLoginの実装と、ローディング表示の実装 ===== | ||
+ | Home.vueでおログインボタンをクリックしたときに、googleLogin()関数が実行されて、google認証されるように設定します。 | ||
+ | googleLogin()関数は、< | ||
- | 参考:https: | + | src/components/Home.vue |
- | 2018-08-07 | + | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー: |
- | Vueでloading indicatorを実装する | + | ログイン状態のチェックは、src/App.vueで行い、< |
+ | src/App.vue | ||
+ | {{: | ||
+ | なお、google認証時に、Googleからuserというデータ(認証した人の名前などのデータ)をuserDataに格納しています。App.vue(親コンポーネント)からMemo.vue(子コンポーネント)にuserDataを渡すために、App.vueの< | ||
+ | <Memo : | ||
- | ===== 新規Vue.jsアプリの作成と、前回の部分までのコードをコピペ ===== | + | と記載します。Memo.vue(子コンポーネント)で: |
- | 前回の< | + | props: |
+ | |||
+ | として受け取ります。 | ||
+ | |||
+ | src/ | ||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー: | ||
+ | |||
+ | (作成中、、、) | ||
+ | |||
+ | ===== 実行してみる ===== | ||
+ | |||
+ | {{:13.vue.jsとfirebaseで認証つきボイスレコーダー:pasted: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | うまくいっているようです。必ずしも音声入力しなくても、普通のメモとしても利用できます。 | ||
+ | |||
+ | ===== ソースコード ===== | ||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | できたもの | ||
+ | {{: | ||
+ | |||
+ | デモサイト | ||
+ | https:// | ||
+ | |||
+ | |||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
- | 作成中 | + | ===== 気になること ===== |
+ | 前回の< | ||
===== 今回写経した本 ===== | ===== 今回写経した本 ===== | ||
Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 | Vue.js初めての方に非常にお勧めです。読みながら手を動かしてアプリが動くことを実感できて楽しいです。 |