{"id":556,"date":"2019-05-07T23:50:07","date_gmt":"2019-05-07T14:50:07","guid":{"rendered":"http:\/\/www.typea.info\/blog\/index.php\/2019\/05\/07\/vuetify_firebase_ui\/"},"modified":"2019-05-07T23:50:07","modified_gmt":"2019-05-07T14:50:07","slug":"vuetify_firebase_ui","status":"publish","type":"post","link":"https:\/\/www.typea.info\/blog\/index.php\/2019\/05\/07\/vuetify_firebase_ui\/","title":{"rendered":"Vuetify \uff0b Firebase UI \u3067\u7c21\u5358\u306b\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u3092\u8ffd\u52a0\u3068\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30e1\u30cb\u30e5\u30fc"},"content":{"rendered":"

<\/a>\"\"<\/p>\n

    \n
  1. Google App Engine Java Standard + Spring Boot \u74b0\u5883\u69cb\u7bc9<\/a>\n
  2. \n

    Spring Boot\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30a8\u30f3\u30b8\u30f3 Thymeleaf\u3092\u9069\u7528<\/a><\/p>\n

  3. \n

    Spring Boot\u306bVue.js\u3092\u5229\u7528\u3059\u308b<\/a><\/p>\n

  4. \n

    Spring Boot\u306bVuetify\u5c0e\u5165\u304b\u3089\u30af\u30ed\u30b9\u30c9\u30e1\u30a4\u30f3Ajax\u901a\u4fe1<\/a><\/p>\n

  5. \n

    Spring Boot+Vuetify GAE\u3078\u30c7\u30d7\u30ed\u30a4\u3001\u52d5\u4f5c\u78ba\u8a8d<\/a><\/p>\n

  6. \n

    Xamarin.Forms\u30a2\u30d7\u30ea\u3092iOS\u7528\u306b\u30d3\u30eb\u30c9<\/a><\/p>\n

  7. \n

    Xamarin.Forms \u30dd\u30c3\u30d7\u30a2\u30c3\u30d7\u306e\u8868\u793a\u3068 Http\u901a\u4fe1<\/a><\/p>\n

  8. \n

    Spring Boot+Vuetify \u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3068JSON\u3067\u7d50\u679c\u3092\u8fd4\u3059<\/a><\/p>\n

  9. \n

    Google Google Cloud Vision \u3067OCR\u3002Vuetify\u304b\u3089SpringBoot\u7d4c\u7531\u3067\u547c\u3073\u51fa\u3057<\/a><\/p>\n

  10. \n

    Xamarin \u30d5\u30a1\u30a4\u30eb\u9078\u629e<\/a><\/p>\n

  11. \n

    Xamarin \u30d5\u30a1\u30a4\u30eb\u306e\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9<\/a><\/p>\n<\/li>\n

  12. \n

    Vue Router \u3092\u5c0e\u5165\u3057\u753b\u9762\u9077\u79fb<\/a><\/p>\n<\/li>\n<\/ol>\n

    1.\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30e1\u30cb\u30e5\u30fc<\/h2>\n

    Vue Router\u3092\u5c0e\u5165\u3057\u3066\u753b\u9762\u9077\u79fb\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u305f<\/a>\u306e\u3060\u304c\u3001Vue CLI<\/a> \u3067\u4f5c\u6210\u3057\u305f\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u307e\u307e\u3060\u3068\u3001\u30b9\u30de\u30db(\u30b5\u30a4\u30ba)\u3067\u8868\u793a\u3057\u305f\u5834\u5408\u306b\u3001\u53f3\u4e0a\u306e\u30e1\u30cb\u30e5\u30fc\u304c\u96a0\u308c\u3066\u3057\u307e\u3046\u305f\u3081\u3001\u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3092\u3001 \u4ee5\u4e0b\u3092\u53c2\u8003\u306b\u5c0e\u5165\u3002<\/p>\n

    https:\/\/garicchi.com\/?p=20801<\/a><\/p>\n

    <template>\r\n  <v-app>\r\n    <v-navigation-drawer fixed clipped app v-model=\"navBar\">\r\n      <v-list dense class=\"pt-0\">\r\n        <router-link to=\"\/\">\r\n          <v-list-tile>\r\n            <v-list-tile-action>\r\n              <v-icon>home<\/v-icon>\r\n            <\/v-list-tile-action>\r\n            <v-list-tile-content>HOME<\/v-list-tile-content>\r\n          <\/v-list-tile>\r\n        <\/router-link>\r\n        <router-link to=\"\/entry\">\r\n          <v-list-tile>\r\n            <v-list-tile-action>\r\n              <v-icon>edit<\/v-icon>\r\n            <\/v-list-tile-action>\r\n            <v-list-tile-content>ENTRY<\/v-list-tile-content>\r\n          <\/v-list-tile>\r\n        <\/router-link>\r\n        <router-link to=\"\/login\">\r\n          <v-list-tile>\r\n            <v-list-tile-action>\r\n              <v-icon>account_box<\/v-icon>\r\n            <\/v-list-tile-action>\r\n            <v-list-tile-content>LOG IN<\/v-list-tile-content>\r\n          <\/v-list-tile>\r\n        <\/router-link>\r\n        <router-link to=\"\/about\">\r\n          <v-list-tile>\r\n            <v-list-tile-action>\r\n              <v-icon>settings<\/v-icon>\r\n            <\/v-list-tile-action>\r\n            <v-list-tile-content>ABOUT<\/v-list-tile-content>\r\n          <\/v-list-tile>\r\n        <\/router-link>\r\n      <\/v-list>    \r\n    <\/v-navigation-drawer>\r\n    <v-toolbar clipped-left fixed app>\r\n      <v-toolbar-side-icon @click.stop=\"navBar = !navBar\"><\/v-toolbar-side-icon>\r\n      <v-toolbar-title>FavoPhrase<\/v-toolbar-title>\r\n      <v-spacer><\/v-spacer>\r\n      <v-toolbar-items class=\"hidden-sm-and-down\">\r\n        <v-btn flat to=\"\/\">Home<\/v-btn>\r\n        <v-btn flat to=\"\/entry\">Entry<\/v-btn>\r\n        <v-btn flat to=\"\/login\">Login<\/v-btn>\r\n        <v-btn flat to=\"\/about\">About<\/v-btn>\r\n      <\/v-toolbar-items>\r\n    <\/v-toolbar>\r\n    <v-content>\r\n      <v-container fluid fill-height>\r\n        <v-fade-transition mode=\"out-in\">\r\n          <router-view><\/router-view>\r\n        <\/v-fade-transition>\r\n      <\/v-container>\r\n    <\/v-content>\r\n  <\/v-app>\r\n<\/template>\r\n\r\n<script>\r\n  export default {\r\n    name: 'App',\r\n    data() {\r\n      return {\r\n        navBar: null\r\n      }\r\n    }\r\n  }\r\n<\/script>\r\n<style>\r\n  a {\r\n    text-decoration: none;\r\n  }\r\n<\/style><\/pre>\n
    \u30d6\u30e9\u30a6\u30b6\u30b5\u30a4\u30ba\u3002<\/p>\n
    \"navbar2\"<\/a><\/p>\n
    \u30b9\u30de\u30db\u30b5\u30a4\u30ba\u3002<\/p>\n
    \"navbar3\"<\/a><\/p>\n
    \u30cf\u30f3\u30d0\u30fc\u30ac\u30fc\u30e1\u30cb\u30e5\u30fc\u3002<\/p>\n
    \"navbar\"<\/a><\/p>\n
    \u3046\u3093\u3002\u308f\u308b\u304f\u306a\u3044\u3002<\/p>\n
    2.Firebase \u3092\u4f7f\u3063\u3066\u7c21\u5358\u306b\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u3092\u5b9f\u73fe<\/h2>\n
    \u4ee5\u4e0b\u306e\u30b5\u30a4\u30c8\u3092\u53c2\u8003\u306b\u5b9f\u88c5\u3002<\/p>\n
    https:\/\/firebase.google.com\/docs\/auth\/web\/firebaseui?hl=ja<\/a><\/p>\n
    https:\/\/qiita.com\/okdyy75\/items\/24e78fdd0f12742b9e82<\/a><\/p>\n
    \/main.js<\/h3>\n
    \u4e0a\u8a18\u30b5\u30a4\u30c8\u3092\u53c2\u8003\u306b\u3001routes \u306e meta \u306b\u3001\u8a8d\u8a3c\u304c\u5fc5\u8981\u304b\u3069\u3046\u304b\u3092bool \u3067\u8a2d\u5b9a\u3057\u3001router.beforeEach \u3067\u3001\u9077\u79fb\u524d\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u3092\u78ba\u8a8d\u3057\u3001\u30ed\u30b0\u30a4\u30f3\u3055\u308c\u3066\u3044\u306a\u3051\u308c\u3070\u3001Login\u30da\u30fc\u30b8\u306b\u9077\u79fb\u3055\u305b\u308b\u3002<\/p>\n
    import Vue from 'vue'\r\nimport VueRouter from 'vue-router'\r\nimport '@\/plugins\/vuetify'\r\nimport firebase from '@\/plugins\/firebase'\r\nimport 'firebase\/auth';\r\n\r\nimport App from '@\/App.vue'\r\n\r\nimport Home from '@\/components\/Home'\r\nimport Entry from '@\/components\/Entry'\r\nimport Login from '@\/components\/Login'\r\nimport About from '@\/components\/About'\r\n\r\nVue.config.productionTip = false\r\nVue.use(VueRouter)\r\n\r\nconst routes = [\r\n  { name:'Home',  path: '\/',      component: Home,  meta: { requiredAuth: false } },\r\n  { name:'Entry', path: '\/entry', component: Entry, meta: { requiredAuth: true  } },\r\n  { name:'Login', path: '\/login', component: Login, meta: { requiredAuth: false } },\r\n  { name:'About', path: '\/about', component: About, meta: { requiredAuth: false } }\r\n]\r\nconst router = new VueRouter({\r\n  routes\r\n})\r\n\r\nrouter.beforeEach((to, from, next) =>{\r\n  if (to.matched.some(record => record.meta.requiredAuth)) {\r\n    if (firebase.auth().currentUser) {\r\n      console.log(firebase.auth().currentUser);\r\n      next();\r\n      return;\r\n    }\r\n    firebase.auth().onAuthStateChanged(user => {\r\n      if (user) {\r\n        next();\r\n      } else {\r\n        next({name: 'Login'})\r\n      } \r\n    })\r\n  }\r\n  next();\r\n})\r\n\r\nnew Vue({\r\n  render: h => h(App),\r\n  router:router\r\n}).$mount('#app')<\/pre>\n
    \/plugins\/firebase.js<\/h3>\n
    Firebase\u3092\u5c0e\u5165\u3059\u308b\u3002<\/p>\n
    https:\/\/firebase.google.com\/docs\/web\/setup?hl=ja<\/a><\/p>\n
    import firebase from 'firebase\/app'\r\n\r\nvar config = {\r\n    apiKey: \"XXXXXXXXXXXXXxXXXXXXXXXXXXXXXXXX\",\r\n    authDomain: \"xxxxxxxxxxxx.com\",\r\n    databaseURL: \"https:\/\/xxxxxxxxxxxxxx.com\",\r\n    projectId: \"favophrase\",\r\n    storageBucket: \"xxxxxxxxxxxxxxxxxxx.com\",\r\n    messagingSenderId: \"99999999999999999\"\r\n  }\r\n  firebase.initializeApp(config)\r\n\r\n  export default firebase<\/pre>\n
    \/components\/Login.vue \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h3>\n
    FIrebase UI \u306e\u6700\u4f4e\u9650\u306e\u5b9f\u88c5\u3002\u3053\u308c\u3060\u3051\u3067\u3001\u30ed\u30b0\u30a4\u30f3\u6a5f\u80fd\u304c\u5b9f\u73fe\u3055\u308c\u308b\u3002<\/p>\n
    <template>\r\n    <v-container>\r\n        <div>\r\n            <v-btn @click=\"logout\">LOGOUT<\/v-btn>\r\n        <\/div>\r\n        <div id=\"firebaseui-auth-container\"><\/div>\r\n    <\/v-container>\r\n<\/template>\r\n<script>\r\nimport firebase   from 'firebase\/app';\r\nimport firebaseui from 'firebaseui-ja';\r\n\r\nexport default {\r\n    mounted() {\r\n        var ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth());\r\n        ui.start('#firebaseui-auth-container',{\r\n            signInOptions: [\r\n                firebase.auth.EmailAuthProvider.PROVIDER_ID,\r\n                firebase.auth.FacebookAuthProvider.PROVIDER_ID,\r\n                firebase.auth.TwitterAuthProvider.PROVIDER_ID,\r\n                firebase.auth.GoogleAuthProvider.PROVIDER_ID,\r\n            ],\r\n\r\n        });\r\n    },\r\n    methods: {\r\n        logout: function() {\r\n            firebase.auth().signOut().then(\r\n                () => console.log(\"Sign out.\")\r\n            );\r\n        }\r\n    }\r\n}\r\n<\/Script><\/pre>\n
    Firebase UI \u306e\u753b\u9762\u3002<\/p>\n
    \u3046\u30fc\u3093\u3001\u3053\u308c\u3060\u3051\u306e\u30b3\u30fc\u30c9\u8a18\u8ff0\u3060\u3051\u3067\u3001\u8a8d\u8a3c\u6a5f\u80fd\u304c\u5b9f\u73fe\u3067\u304d\u308b\u306e\u306f\u304b\u306a\u308a\u3046\u308c\u3057\u3044\u3002<\/p>\n
    \u672c\u7b4b\u306e\u6a5f\u80fd\u5b9f\u88c5\u306b\u5c02\u5ff5\u3067\u304d\u308b\u3063\u3066\u3053\u3068\u3060\u306a\u30fc\u3002<\/p>\n
    Baas\u4e07\u6b73\u3002<\/p>\n
    \"firebaseui\"<\/a><\/p>\n
    \u4e0a\u8a18\u3067\u8a8d\u8a3c\u3092\u5229\u7528\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u5404SNS\u306e\u958b\u767a\u8005\u30da\u30fc\u30b8\u306b\u8a2d\u5b9a\u304c\u5fc5\u8981\u3002<\/p>\n
    Firebase https:\/\/console.firebase.google.com\/u\/1\/<\/a><\/p>\n
    Facebook Developer https:\/\/developers.facebook.com\/apps<\/a><\/p>\n
    Twitter Developer https:\/\/developer.twitter.com\/en\/apps<\/a><\/p>\n
    <\/a>\"\"<\/p>\n","protected":false},"excerpt":{"rendered":"
    Google App Engine Java Standard + Spring Boot \u74b0\u5883\u69cb\u7bc9 Spring Boot\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30a8\u30f3\u30b8\u30f3 Thymeleaf\u3092\u9069\u7528 Spring Boot\u306bVue.js\u3092\u5229\u7528\u3059\u308b […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","footnotes":""},"categories":[104,107],"tags":[],"class_list":["post-556","post","type-post","status-publish","format-standard","hentry","category-firebase","category-vue-js"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=556"}],"version-history":[{"count":0,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/556\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}