Vue＋Firebaseでのルートマッチングがうまくいかない

ここ最近monacaを用いてVue.jsとFirebaseでのアプリ制作を行おうとしているのですがそこでのエラーを解決してほしいと思い質問させていただきました。エラー自体初歩的な問題かもしれませんがご教授してくださるとありがたいです。

理想の動作

メアドとパスワードを入力して登録したらfirebase Authenticationのほうでデータを保存させたい。

現在の動作

メアドとパスワードを共に入力をして送信をしても何も起きない

###エラー文

[Vue warn]: Error in created hook: "TypeError: firebase.auth is not a function. (In 'firebase.auth()', 'firebase.auth' is undefined)"
(found in <Root>)

{}

[Vue warn]: Property or method "register" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)

[Vue warn]: Property or method "login" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
(found in <Root>)

[Vue warn]: Invalid handler for event "click": got undefined
(found in <Root>)

以下現在のコード

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta lang="ja">
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
11    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
12    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
13    <script src="components/loader.js"></script>
14    <script src="./js/app.js"></script>
15</head>
16<body>
17  <div id="app"></div>
18</body>
19</html>

javascript
1  var onDeviceReady = function() {
2
3  var Config = {
4    apiKey: "",
5    authDomain: "",
6    databaseURL: "",
7    projectId: "",
8    storageBucket: "",
9    messagingSenderId: "",
10    appId: ""
11  };
12  // Initialize Firebase
13  firebase.initializeApp(Config);
14
15  var vm = new Vue({
16    el: '#app',
17    data: {
18      user: {
19        isLoggedIn: false,
20        mailAddress: "",
21        password: "",
22      }
23    },
24    created: function() {
25      var me = this;
26      firebase.auth().onAuthStateCaanged(function(user) {
27        me.user.isLoggedIn = (user !== null);
28      });
29    },
30    template: `
31    <div>
32        <div class="center"> Firebase認証 </div>
33        <section style="margin: 10px;" v-if="user.isLoggedIn">
34            <p>{{ user.mailAddress }}</p>
35            <section style="margin: 10px;">
36                <button @click="logout">ログアウト</button>
37            </section>
38        </section>
39        <section v-else style="margin: 10px;">
40            <p>メールアドレス</p>
41            <p>
42                <input v-model="user.mailAddress" placeholder="メールアドレス" />
43            </p>
44            <p>パスワード</p>
45            <p>
46                <input v-model="user.password" placeholder="パスワード" type="password" />
47            </p>
48            <button @click="register">新規登録</button>
49            <button @click="login">ログイン</button>
50        </section>
51    </div>`,
52    register: function() {
53      firebase.auth().createUserWithEmailAndPassword(this.user.mailAddress, this.user.password).catch(function(error) {
54        alert(error.message);
55      });
56    },
57    login: function() {
58      firebase.auth().signInWithEmailAndPassword(this.user.mailAddress, this.user.password).catch(function(error) {
59        alert(error.message);
60      });
61    },
62    logout: function() {
63      firebase.auth().signOut();
64    }
65  })
66
67  };
68  document.addEventListener(window.cordova ?"deviceready" : "DOMContentLoaded", onDeviceReady, false);

行動規範の内容に同意します

回答1件

ベストアンサー

Firebase Authenticationを利用するには、以下のようにscriptタグを追加する必要があります。

diff
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta lang="ja">
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
8    <link rel="stylesheet" href="components/loader.css">
9    <link rel="stylesheet" href="css/style.css">
10    <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
11++ <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js"></script>
12    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
13    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
14    <script src="components/loader.js"></script>
15    <script src="./js/app.js"></script>
16</head>
17<body>
18  <div id="app"></div>
19</body>
20</html>

また、Vue.js内のメソッドはmethodsプロパティの中に記述する必要があります。

diff
1var vm = new Vue({
2    el: '#app',
3    data: {
4      user: {
5        isLoggedIn: false,
6        mailAddress: "",
7        password: "",
8      }
9    },
10    created: function() {
11      var me = this;
12      firebase.auth().onAuthStateCaanged(function(user) {
13        me.user.isLoggedIn = (user !== null);
14      });
15    },
16    template: `
17    <div>
18        <div class="center"> Firebase認証 </div>
19        <section style="margin: 10px;" v-if="user.isLoggedIn">
20            <p>{{ user.mailAddress }}</p>
21            <section style="margin: 10px;">
22                <button @click="logout">ログアウト</button>
23            </section>
24        </section>
25        <section v-else style="margin: 10px;">
26            <p>メールアドレス</p>
27            <p>
28                <input v-model="user.mailAddress" placeholder="メールアドレス" />
29            </p>
30            <p>パスワード</p>
31            <p>
32                <input v-model="user.password" placeholder="パスワード" type="password" />
33            </p>
34            <button @click="register">新規登録</button>
35            <button @click="login">ログイン</button>
36        </section>
37    </div>`,
38--    register: function() {
39--      firebase.auth().createUserWithEmailAndPassword(this.user.mailAddress, this.user.password).catch(function(error) {
40--        alert(error.message);
41--      });
42--    },
43--    login: function() {
44--      firebase.auth().signInWithEmailAndPassword(this.user.mailAddress, this.user.password).catch(function(error) {
45--       alert(error.message);
46--      });
47--    },
48--    logout: function() {
49--      firebase.auth().signOut();
50--    }
51++    methods: {
52++      register: function() {
53++        firebase.auth().createUserWithEmailAndPassword(this.user.mailAddress, this.user.password).catch(function(error) {
54++          alert(error.message);
55++        });
56++      },
57++      login: function() {
58++        firebase.auth().signInWithEmailAndPassword(this.user.mailAddress, this.user.password).catch(function(error) {
59++          alert(error.message);
60++        });
61++      },
62++      logout: function() {
63++        firebase.auth().signOut();
64++      }
65    }
66  })