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

質問編集履歴

2

kaiketusita

2021/03/23 14:41

投稿

MOTOMUR
MOTOMUR

スコア195

title CHANGED
File without changes
body CHANGED
@@ -62,9 +62,6 @@
62
62
 
63
63
  envの変数はnetlifyに記述済み。
64
64
  また、authのドメインにnetlifyのurlを追加した。
65
- ```ここに言語を入力
66
- https://awesome-curie-543f56.netlify.app/
67
- ```
68
65
 
69
66
  なぜ動かないのか原因がわからなかったため質問しました。
70
67
  環境構築の方法が他に良いものがあれば変更も考えています。よろしくお願いします。

1

うまく投稿できなかった

2021/03/23 14:41

投稿

MOTOMUR
MOTOMUR

スコア195

title CHANGED
File without changes
body CHANGED
@@ -1,10 +1,70 @@
1
1
  困ったこと
2
2
  ---
3
3
  NuxtjsでSPAアプリをNetlifyでhostingしてfirebase Authを利用しようと試みていたのですが、
4
+ devではうまくいくのですが、netlify上だとsignInWithPopupがうまく機能せず(一瞬開いてすぐ閉じてしまう。)、
4
- signInWithPopupがうまく機能せず、手詰まりになってしまったため、質問させていただきました。
5
+ 手詰まりになってしまったため、質問させていただきました。
5
6
 
6
7
  試したこと
7
8
  ---
9
+ ボタンを押したらgoogleAuthしてくれるアプリを作ってnetlifyにデプロイした。
8
10
  ```ここに言語を入力
11
+ <template>
12
+ <v-btn @click="googleLogin">google login</v-btn>
13
+ </template>
14
+
15
+ <script>
16
+ import firebase from '~/plugins/firebase'
17
+ export default {
18
+ methods: {
19
+ googleLogin: function() {
20
+ var provider = new firebase.auth.GoogleAuthProvider();
9
- creat-nuxt-app
21
+ firebase.auth()
22
+ .signInWithPopup(provider)
23
+ .then((result) => {
24
+ var credential = result.credential;
25
+
26
+ // This gives you a Google Access Token. You can use it to access the Google API.
27
+ var token = credential.accessToken;
28
+ // The signed-in user info.
29
+ var user = result.user;
30
+ // ...
31
+ }).catch((error) => {
32
+ // Handle Errors here.
33
+ var errorCode = error.code;
34
+ var errorMessage = error.message;
35
+ // The email of the user's account used.
36
+ var email = error.email;
37
+ // The firebase.auth.AuthCredential type that was used.
38
+ var credential = error.credential;
39
+ // ...
40
+ });
41
+ }
42
+ }
43
+ }
44
+ </script>
45
+ ```
10
- ```でアプリ立ち上げ
46
+ ```ここに言語入力
47
+ import firebase from 'firebase';
48
+
49
+ if (!firebase.apps.length) {
50
+ firebase.initializeApp({
51
+ apiKey: process.env.API_KEY,
52
+ authDomain: process.env.AUTH_DOMAIN,
53
+ projectId: process.env.PROJECT_ID,
54
+ storageBucket: process.env.STORAGE_BUCKET,
55
+ messagingSenderId: process.env.MESSAGING_SENDER_ID,
56
+ appId: process.env.APP_ID,
57
+ measurementId: process.env.MEASUREMENT_ID
58
+ })
59
+ }
60
+ export default firebase;
61
+ ```
62
+
63
+ envの変数はnetlifyに記述済み。
64
+ また、authのドメインにnetlifyのurlを追加した。
65
+ ```ここに言語を入力
66
+ https://awesome-curie-543f56.netlify.app/
67
+ ```
68
+
69
+ なぜ動かないのか原因がわからなかったため質問しました。
70
+ 環境構築の方法が他に良いものがあれば変更も考えています。よろしくお願いします。