質問編集履歴

2

kaiketusita

2021/03/23 14:41

投稿

MOTOMUR
MOTOMUR

スコア195

test CHANGED
File without changes
test CHANGED
@@ -126,12 +126,6 @@
126
126
 
127
127
  また、authのドメインにnetlifyのurlを追加した。
128
128
 
129
- ```ここに言語を入力
130
-
131
- https://awesome-curie-543f56.netlify.app/
132
-
133
- ```
134
-
135
129
 
136
130
 
137
131
  なぜ動かないのか原因がわからなかったため質問しました。

1

うまく投稿できなかった

2021/03/23 14:41

投稿

MOTOMUR
MOTOMUR

スコア195

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,9 @@
4
4
 
5
5
  NuxtjsでSPAアプリをNetlifyでhostingしてfirebase Authを利用しようと試みていたのですが、
6
6
 
7
+ devではうまくいくのですが、netlify上だとsignInWithPopupがうまく機能せず(一瞬開いてすぐ閉じてしまう。)、
8
+
7
- signInWithPopupがうまく機能せず、手詰まりになってしまったため、質問させていただきました。
9
+ 手詰まりになってしまったため、質問させていただきました。
8
10
 
9
11
 
10
12
 
@@ -12,8 +14,126 @@
12
14
 
13
15
  ---
14
16
 
17
+ ボタンを押したらgoogleAuthしてくれるアプリを作ってnetlifyにデプロイした。
18
+
15
19
  ```ここに言語を入力
16
20
 
17
- creat-nuxt-app
21
+ <template>
18
22
 
23
+ <v-btn @click="googleLogin">google login</v-btn>
24
+
25
+ </template>
26
+
27
+
28
+
29
+ <script>
30
+
31
+ import firebase from '~/plugins/firebase'
32
+
33
+ export default {
34
+
35
+ methods: {
36
+
37
+ googleLogin: function() {
38
+
39
+ var provider = new firebase.auth.GoogleAuthProvider();
40
+
41
+ firebase.auth()
42
+
43
+ .signInWithPopup(provider)
44
+
45
+ .then((result) => {
46
+
47
+ var credential = result.credential;
48
+
49
+
50
+
51
+ // This gives you a Google Access Token. You can use it to access the Google API.
52
+
53
+ var token = credential.accessToken;
54
+
55
+ // The signed-in user info.
56
+
57
+ var user = result.user;
58
+
59
+ // ...
60
+
61
+ }).catch((error) => {
62
+
63
+ // Handle Errors here.
64
+
65
+ var errorCode = error.code;
66
+
67
+ var errorMessage = error.message;
68
+
69
+ // The email of the user's account used.
70
+
71
+ var email = error.email;
72
+
73
+ // The firebase.auth.AuthCredential type that was used.
74
+
75
+ var credential = error.credential;
76
+
77
+ // ...
78
+
79
+ });
80
+
81
+ }
82
+
83
+ }
84
+
85
+ }
86
+
87
+ </script>
88
+
89
+ ```
90
+
19
- ```でアプリ立ち上げ
91
+ ```ここに言語入力
92
+
93
+ import firebase from 'firebase';
94
+
95
+
96
+
97
+ if (!firebase.apps.length) {
98
+
99
+ firebase.initializeApp({
100
+
101
+ apiKey: process.env.API_KEY,
102
+
103
+ authDomain: process.env.AUTH_DOMAIN,
104
+
105
+ projectId: process.env.PROJECT_ID,
106
+
107
+ storageBucket: process.env.STORAGE_BUCKET,
108
+
109
+ messagingSenderId: process.env.MESSAGING_SENDER_ID,
110
+
111
+ appId: process.env.APP_ID,
112
+
113
+ measurementId: process.env.MEASUREMENT_ID
114
+
115
+ })
116
+
117
+ }
118
+
119
+ export default firebase;
120
+
121
+ ```
122
+
123
+
124
+
125
+ envの変数はnetlifyに記述済み。
126
+
127
+ また、authのドメインにnetlifyのurlを追加した。
128
+
129
+ ```ここに言語を入力
130
+
131
+ https://awesome-curie-543f56.netlify.app/
132
+
133
+ ```
134
+
135
+
136
+
137
+ なぜ動かないのか原因がわからなかったため質問しました。
138
+
139
+ 環境構築の方法が他に良いものがあれば変更も考えています。よろしくお願いします。