z_blog:2018:index.html
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
z_blog:2018:index.html [2018/12/16] – [181215 改訂新版 Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる] adash333 | z_blog:2018:index.html [2018/12/24] (現在) – [Vue.jsとFirebaseの参考リンク] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ===== 181215 改訂新版 Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる ===== | + | ===== 181215 改訂新版 Vue.jsとFirebaseで作るミニWEBサービスをCodeSandboxで写経してみる(1) |
Vue.jsの入門のために、以下の本を写経しているが、面白い!Vue.jsってどんな感じなのかな?とか、WEBアプリを作ってみたいと願う初心者の方に、本当におすすめです。 | Vue.jsの入門のために、以下の本を写経しているが、面白い!Vue.jsってどんな感じなのかな?とか、WEBアプリを作ってみたいと願う初心者の方に、本当におすすめです。 | ||
行 14: | 行 14: | ||
[[z_blog: | [[z_blog: | ||
+ | |||
+ | [[z_blog: | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 105: | 行 107: | ||
{{: | {{: | ||
- | ===== Firebaseでログインの設定 | + | ===== Firebaseでログイン前とログイン後でページ遷移 |
+ | App.vueにおいて、isLoginがtrueかfalseかで、v-ifを使用し、ログインの有無により表示するページを変える。 | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | <Home v-if=" | ||
+ | <Editor v-if=" | ||
+ | </ | ||
+ | </ | ||
Firebaseの管理画面でAuthenticationタブを開き、「ログイン方法」で、GoogleのステータスをONにする。 | Firebaseの管理画面でAuthenticationタブを開き、「ログイン方法」で、GoogleのステータスをONにする。 | ||
行 113: | 行 123: | ||
Googleログインの実装 | Googleログインの実装 | ||
- | Home.vueを編集 | + | components/Home.vueを編集 |
+ | |||
+ | (変更後) | ||
+ | {{: | ||
+ | |||
+ | App.vueを編集 | ||
+ | {{: | ||
+ | |||
+ | |||
+ | これで、CodeSandboxではうまくいかなくて悩んだ。 | ||
+ | |||
+ | →firebaseのアプリの画面で、Authentication > ルール の下の方で、codesandbox.io (できれば、サブドメインまで入れた方が安全)を、承認済みドメインに追加する必要があった。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | すると、Googleログインできるようになり、ログイン後は、Editor画面に移動された。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | ===== Firebaseでログイン後のページの表示 ===== | ||
+ | Firebaseにログイン後の、ログインした人のデータは、「user」に格納されているため、App.vueでthis.userData=userにより、userDataに格納し、それを、Editor.vueで受け取る。 | ||
+ | |||
+ | components/ | ||
(変更前) | (変更前) | ||
+ | {{: | ||
+ | (変更後) | ||
+ | {{: | ||
+ | このままではEditor.vueが真っ白なので、App.vueを編集。 | ||
+ | < | ||
+ | <Editor v-if=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | これで、firebaseからApp.vueを介して、Editor.vueにログインした人のdisplayNameが受け渡され、表示することができた。 | ||
+ | |||
+ | |||
+ | 続きは[[z_blog: | ||
+ | |||
+ | |||
+ | |||
+ | ===== ソースコード ===== | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
===== Vue.jsとFirebaseの参考リンク ===== | ===== Vue.jsとFirebaseの参考リンク ===== | ||
行 130: | 行 184: | ||
https:// | https:// | ||
Vue + Firebase + Auth Demo | Vue + Firebase + Auth Demo | ||
+ | |||
+ | ===== メニュー ===== | ||
+ | [[z_blog: | ||
+ | |||
+ | https:// | ||
+ | |||
z_blog/2018/index.html.1544931310.txt.gz · 最終更新: 2018/12/16 by adash333