teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

誤字の修正

2019/07/07 17:31

投稿

torao_tanabe
torao_tanabe

スコア18

title CHANGED
File without changes
body CHANGED
@@ -2,10 +2,8 @@
2
2
  monacaデバッガーではCDN
3
3
  <script src="https://firebase~~~"></script>
4
4
  からJavaScript SDK ライブラリはロードされますか?
5
- 現在、monacaデバッガー上で
5
+ 現在
6
6
 
7
- 701SOTypeError: Cannot read property 'GoogleAuthProvider' of undefined
8
-
9
7
  monacaの(onsen UI V2 Vue Tabberテンプレート)を使い、
10
8
 
11
9
 

1

詳細を記載

2019/07/07 17:31

投稿

torao_tanabe
torao_tanabe

スコア18

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,130 @@
1
1
  monacaとvue.jsでfirebaseの認証機能を使う予定なのですが、
2
2
  monacaデバッガーではCDN
3
3
  <script src="https://firebase~~~"></script>
4
- からJavaScript SDK ライブラリはロードされますか?
4
+ からJavaScript SDK ライブラリはロードされますか?
5
+ 現在、monacaデバッガー上で
6
+
7
+ 701SOTypeError: Cannot read property 'GoogleAuthProvider' of undefined
8
+
9
+ monacaの(onsen UI V2 Vue Tabberテンプレート)を使い、
10
+
11
+
12
+ index.html.ejs内でCDN(コンテンツ配信ネットワーク)から Firebase JavaScript SDK ライブラリのロード<script>を以下のように書き
13
+ ```html
14
+ <!DOCTYPE html>
15
+ <html>
16
+ <head>
17
+ <!-- This file is the template for "www/index.html". Modify it to fit your needs -->
18
+ <meta charset="utf-8" />
19
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
20
+ <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
21
+
22
+
23
+ <!-- The following EJS lines include the necessary CSS and JS
24
+ from Monaca (cordova.js/ loader.js) in production mode -->
25
+ <% for (var dep in htmlWebpackPlugin.options.externalJS) { %>
26
+ <script type="text/javascript" src="<%= htmlWebpackPlugin.options.externalJS[dep] %>"></script><% } %>
27
+
28
+ <% for (var dep in htmlWebpackPlugin.options.externalCSS) { %>
29
+ <link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.externalCSS[dep] %>"><% } %>
30
+
31
+
32
+ </head>
33
+ <body>
34
+ <div id="app"></div>
35
+ <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
36
+ </body>
37
+ </html>
38
+
39
+ ```
40
+ firebaseの設定も終えて、
41
+
42
+ main.jsでfirebaseのconfigの設定を以下のようにして
43
+ ```js
44
+ import ons from 'onsenui';
45
+ import Vue from 'vue';
46
+ import VueOnsen from 'vue-onsenui';
47
+
48
+ // Onsen UI Styling and Icons
49
+ require('onsenui/css-components-src/src/onsen-css-components.css');
50
+ require('onsenui/css/onsenui.css');
51
+
52
+ import App from './App.vue';
53
+ import Login from './Login.vue';
54
+
55
+
56
+ if (ons.platform.isIPhoneX()) {
57
+ document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
58
+ document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
59
+ }
60
+
61
+ Vue.use(VueOnsen);
62
+
63
+
64
+
65
+ // Your web app's Firebase configuration
66
+ var onDeviceReady = function() {
67
+ console.log('::onDeiveReady');
68
+ var firebaseConfig = {
69
+ apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx",
70
+ authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxx",
71
+ databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxx",
72
+ projectId: "xxxxxxxxxxxxxxxxxx",
73
+ storageBucket: "xxxxxxxxxxxxxxxxx",
74
+ messagingSenderId: "xxxxxxxxxxxxxx",
75
+ appId: "xxxxxxxxxxxxxxxxxxxx"
76
+ };
77
+ // Initialize Firebase
78
+ firebase.initializeApp(firebaseConfig);
79
+
80
+ new Vue({
81
+ el: '#app',
82
+ template: '<app></app>',
83
+ components: { App }
84
+ });
85
+
86
+ }
87
+ document.addEventListener(window.cordova ?"deviceready" : "DOMContentLoaded", onDeviceReady, false);
88
+
89
+ ```
90
+
91
+ 以下のLogin.vueでfirebaseのGoogle認証を以下のように使おうと思ったのですが、monacaデバッガーで
92
+ TypeError: Cannot read property 'GoogleAuthProvider' of undefined や
93
+ TypeError: firebase.auth is not a function www/vendors~app.bundle.js:26のエラーが出ます
94
+
95
+ ```vue
96
+ <template>
97
+ <div id="login">
98
+ <h1>{{ msg }}</h1>
99
+ <button @click="googleLogin">Googleアカウントでログイン</button>
100
+ </div>
101
+ </template>
102
+
103
+ <script>
104
+
105
+ export default {
106
+ name: "login",
107
+ data(){
108
+ return{
109
+ msg: "ログイン"
110
+ };
111
+ },
112
+ methods: {
113
+ googleLogin: function(){
114
+
115
+ //var provider = new firebase.auth.GoogleAuthProvider();
116
+
117
+ firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
118
+ }
119
+
120
+ }
121
+
122
+ };
123
+ </script>
124
+ ```
125
+
126
+ firebase自体が読み込めてないのでしょうか?
127
+ それで、そもそもmonacaデバッカー自体がライブラリを使えないのではと疑問になり質問させて頂きました。
128
+ まだこの環境で開発するとは確定していないので、monacaデバッガーの使いやすさを考えて決めようと思っています。普通にmonacaデバッガーでfirebase周りが動くならコード等が悪いと分かるのでありがたいです。
129
+ いちおmonacaのデバッガービルドをして実機で動かしてみたのですが、Googleアカウントでログインボタンは機能しませんでした。
130
+ もし、コードが間違っていたり環境構築で足りない所があったら教えていただけると幸いです。