Vuetify + Firebase UI で簡単にログイン機能を追加とナビゲーションメニュー

  1. Google App Engine Java Standard + Spring Boot 環境構築
  2. Spring Bootのテンプレートエンジン Thymeleafを適用

  3. Spring BootにVue.jsを利用する

  4. Spring BootにVuetify導入からクロスドメインAjax通信

  5. Spring Boot+Vuetify GAEへデプロイ、動作確認

  6. Xamarin.FormsアプリをiOS用にビルド

  7. Xamarin.Forms ポップアップの表示と Http通信

  8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

  9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

  10. Xamarin ファイル選択

  11. Xamarin ファイルのアップロード

  12. Vue Router を導入し画面遷移

1.ナビゲーションメニュー

Vue Routerを導入して画面遷移ができるようになったのだが、Vue CLI で作成したトップページのままだと、スマホ(サイズ)で表示した場合に、右上のメニューが隠れてしまうため、ハンバーガーメニューを、 以下を参考に導入。

https://garicchi.com/?p=20801

  1. <template>
  2. <v-app>
  3. <v-navigation-drawer fixed clipped app v-model="navBar">
  4. <v-list dense class="pt-0">
  5. <router-link to="/">
  6. <v-list-tile>
  7. <v-list-tile-action>
  8. <v-icon>home</v-icon>
  9. </v-list-tile-action>
  10. <v-list-tile-content>HOME</v-list-tile-content>
  11. </v-list-tile>
  12. </router-link>
  13. <router-link to="/entry">
  14. <v-list-tile>
  15. <v-list-tile-action>
  16. <v-icon>edit</v-icon>
  17. </v-list-tile-action>
  18. <v-list-tile-content>ENTRY</v-list-tile-content>
  19. </v-list-tile>
  20. </router-link>
  21. <router-link to="/login">
  22. <v-list-tile>
  23. <v-list-tile-action>
  24. <v-icon>account_box</v-icon>
  25. </v-list-tile-action>
  26. <v-list-tile-content>LOG IN</v-list-tile-content>
  27. </v-list-tile>
  28. </router-link>
  29. <router-link to="/about">
  30. <v-list-tile>
  31. <v-list-tile-action>
  32. <v-icon>settings</v-icon>
  33. </v-list-tile-action>
  34. <v-list-tile-content>ABOUT</v-list-tile-content>
  35. </v-list-tile>
  36. </router-link>
  37. </v-list>
  38. </v-navigation-drawer>
  39. <v-toolbar clipped-left fixed app>
  40. <v-toolbar-side-icon @click.stop="navBar = !navBar"></v-toolbar-side-icon>
  41. <v-toolbar-title>FavoPhrase</v-toolbar-title>
  42. <v-spacer></v-spacer>
  43. <v-toolbar-items class="hidden-sm-and-down">
  44. <v-btn flat to="/">Home</v-btn>
  45. <v-btn flat to="/entry">Entry</v-btn>
  46. <v-btn flat to="/login">Login</v-btn>
  47. <v-btn flat to="/about">About</v-btn>
  48. </v-toolbar-items>
  49. </v-toolbar>
  50. <v-content>
  51. <v-container fluid fill-height>
  52. <v-fade-transition mode="out-in">
  53. <router-view></router-view>
  54. </v-fade-transition>
  55. </v-container>
  56. </v-content>
  57. </v-app>
  58. </template>
  59.  
  60. <script>
  61. export default {
  62. name: 'App',
  63. data() {
  64. return {
  65. navBar: null
  66. }
  67. }
  68. }
  69. </script>
  70. <style>
  71. a {
  72. text-decoration: none;
  73. }
  74. </style>

ブラウザサイズ。

navbar2

スマホサイズ。

navbar3

ハンバーガーメニュー。

navbar

うん。わるくない。

2.Firebase を使って簡単にログイン機能を実現

以下のサイトを参考に実装。

https://firebase.google.com/docs/auth/web/firebaseui?hl=ja

https://qiita.com/okdyy75/items/24e78fdd0f12742b9e82

/main.js

上記サイトを参考に、routes の meta に、認証が必要かどうかをbool で設定し、router.beforeEach で、遷移前ログイン状態を確認し、ログインされていなければ、Loginページに遷移させる。

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import '@/plugins/vuetify'
  4. import firebase from '@/plugins/firebase'
  5. import 'firebase/auth';
  6.  
  7. import App from '@/App.vue'
  8.  
  9. import Home from '@/components/Home'
  10. import Entry from '@/components/Entry'
  11. import Login from '@/components/Login'
  12. import About from '@/components/About'
  13.  
  14. Vue.config.productionTip = false
  15. Vue.use(VueRouter)
  16.  
  17. const routes = [
  18. { name:'Home', path: '/', component: Home, meta: { requiredAuth: false } },
  19. { name:'Entry', path: '/entry', component: Entry, meta: { requiredAuth: true } },
  20. { name:'Login', path: '/login', component: Login, meta: { requiredAuth: false } },
  21. { name:'About', path: '/about', component: About, meta: { requiredAuth: false } }
  22. ]
  23. const router = new VueRouter({
  24. routes
  25. })
  26.  
  27. router.beforeEach((to, from, next) =>{
  28. if (to.matched.some(record => record.meta.requiredAuth)) {
  29. if (firebase.auth().currentUser) {
  30. console.log(firebase.auth().currentUser);
  31. next();
  32. return;
  33. }
  34. firebase.auth().onAuthStateChanged(user => {
  35. if (user) {
  36. next();
  37. } else {
  38. next({name: 'Login'})
  39. }
  40. })
  41. }
  42. next();
  43. })
  44.  
  45. new Vue({
  46. render: h => h(App),
  47. router:router
  48. }).$mount('#app')

/plugins/firebase.js

Firebaseを導入する。

https://firebase.google.com/docs/web/setup?hl=ja

  1. import firebase from 'firebase/app'
  2.  
  3. var config = {
  4. apiKey: "XXXXXXXXXXXXXxXXXXXXXXXXXXXXXXXX",
  5. authDomain: "xxxxxxxxxxxx.com",
  6. databaseURL: "https://xxxxxxxxxxxxxx.com",
  7. projectId: "favophrase",
  8. storageBucket: "xxxxxxxxxxxxxxxxxxx.com",
  9. messagingSenderId: "99999999999999999"
  10. }
  11. firebase.initializeApp(config)
  12.  
  13. export default firebase

/components/Login.vue コンポーネント

FIrebase UI の最低限の実装。これだけで、ログイン機能が実現される。

  1. <template>
  2. <v-container>
  3. <div>
  4. <v-btn @click="logout">LOGOUT</v-btn>
  5. </div>
  6. <div id="firebaseui-auth-container"></div>
  7. </v-container>
  8. </template>
  9. <script>
  10. import firebase from 'firebase/app';
  11. import firebaseui from 'firebaseui-ja';
  12.  
  13. export default {
  14. mounted() {
  15. var ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());
  16. ui.start('#firebaseui-auth-container',{
  17. signInOptions: [
  18. firebase.auth.EmailAuthProvider.PROVIDER_ID,
  19. firebase.auth.FacebookAuthProvider.PROVIDER_ID,
  20. firebase.auth.TwitterAuthProvider.PROVIDER_ID,
  21. firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  22. ],
  23.  
  24. });
  25. },
  26. methods: {
  27. logout: function() {
  28. firebase.auth().signOut().then(
  29. () => console.log("Sign out.")
  30. );
  31. }
  32. }
  33. }
  34. </Script>

Firebase UI の画面。

うーん、これだけのコード記述だけで、認証機能が実現できるのはかなりうれしい。

本筋の機能実装に専念できるってことだなー。

Baas万歳。

firebaseui

上記で認証を利用するためには、各SNSの開発者ページに設定が必要。

Firebase https://console.firebase.google.com/u/1/

Facebook Developer https://developers.facebook.com/apps

Twitter Developer https://developer.twitter.com/en/apps

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次の記事

Vuex で状態管理