VueでFirebaseのメールアドレス&パスワードのログイン認証を実装したいのですが、エラーがでてしまいうまくいきません。
エラーが出てるのは、「StoreUser.js」に書いている「signInWithEmailAndPassword」の部分。
signInWithEmailAndPassword(email, password)と書いたら、下記のエラーが出ました。
consolelog
1[Vue warn]: Error in v-on handler: "Error: signInWithEmailAndPassword failed: First argument "email" must be a valid string."
signInWithEmailAndPassword(email.toString().trim(), password.toString().trim())と書いたら、エラーが消えたもの、ログイン失敗で下記コードが表示されました。
auth/invalid-email, The email address is badly formatted.
フォームに入力した文字は、一般的なメールアドレスですが全て弾かれます。
xxxx@xxxxx.comとか
PageLogin.vue
vue
1<template> 2 <div class="PageLogin"> 3 <div class="PageLogin_Box"> 4 <h1 class="PageLogin_Box_Title">ファイターズツール</h1> 5 <div class="PageLogin_Box_Input"> 6 <UIInputText 7 type="text" 8 placeholder="メールアドレスを入力" 9 size="large" 10 @change="onChangeEmail" 11 /> 12 </div> 13 <div class="PageLogin_Box_Input"> 14 <UIInputText 15 type="password" 16 placeholder="パスワードを入力" 17 size="large" 18 @change="onChangePassword" 19 /> 20 </div> 21 <div class="PageLogin_Box_Btn"> 22 <UIAppButton 23 color="danger" 24 size="large" 25 arrow 26 @click="onClickLogin" 27 > 28 ログイン 29 </UIAppButton> 30 </div> 31 </div> 32 </div> 33</template> 34 35<script> 36import { mapState } from 'vuex'; 37import UIAppButton from '../UIAppButton'; 38import UIInput from '../UIInput'; 39 40export default { 41 components: { 42 UIAppButton, 43 UIInput 44 }, 45 data() { 46 return { 47 email: String, 48 password: String 49 }; 50 }, 51 computed: { 52 ...mapState(['user']) 53 }, 54 methods: { 55 onChangeEmail(email) { 56 this.email = email; 57 }, 58 onChangePassword(password) { 59 this.password = password; 60 }, 61 onClickLogin() { 62 this.$store.dispatch('user/login', { 63 email: this.email, 64 password: this.password 65 }); 66 } 67 } 68}; 69</script> 70<style lang="scss"></style>
StoreUser.js
javascript
1import firebase from 'firebase'; 2 3export default { 4 namespaced: true, 5 state: { 6 id: null, 7 name: null, 8 userData: [] 9 }, 10 mutations: {}, 11 actions: { 12 login(email, password) { 13 console.log(email, password); 14 if (email && password) { 15 firebase 16 .auth() 17 .signInWithEmailAndPassword( 18 email.toString().trim(), 19 password.toString().trim() 20 ) 21 .then( 22 user => { 23 alert('Success!'); 24 console.log('ログイン成功', user); 25 }, 26 err => { 27 alert(err.message); 28 let errorCode = err.code; 29 let errorMessage = err.message; 30 console.log( 31 'ログイン失敗: ' + 32 errorCode + 33 ', ' + 34 errorMessage 35 ); 36 } 37 ); 38 } else { 39 console.log('ログイン失敗: 未入力', email, password); 40 } 41 } 42 } 43};
UIInput.vue
vue
1<template> 2 <input 3 class="UIInput" 4 :type="type" 5 :placeholder="placeholder" 6 :value="value" 7 @change="onChange" 8 /> 9</template> 10 11<script> 12export default { 13 props: { 14 value: String, 15 type: String, 16 placeholder: { 17 type: String, 18 default: 'テキストを入力してください' 19 }, 20 size: String 21 }, 22 data: function() { 23 return {}; 24 }, 25 computed: { 26 }, 27 methods: { 28 onChange(e) { 29 this.$emit('change', e.target.value); 30 } 31 } 32}; 33</script> 34<style lang="scss"></style>
その他コード
index.js
javascript
1import Vue from 'vue'; 2import view from './views/ViewIndex.vue'; 3import store from './stores/StoreIndex.js'; 4import firebase from 'firebase'; 5 6Vue.config.productionTip = false; 7const config = { 8 apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx', 9 authDomain: 'xxxxxxxxxx.firebaseapp.com', 10 databaseURL: 'https://xxxxxxxxxx.firebaseio.com', 11 projectId: 'xxxxxxxxxx', 12 storageBucket: 'xxxxxxxxxx.appspot.com', 13 messagingSenderId: 'xxxxxxxxxx' 14}; 15firebase.initializeApp(config); 16 17new Vue({ 18 store, 19 render: h => h(view) 20}).$mount('#app');
ViewIndex.vue
vue
1<template> 2 <main class="ViewIndex"> 3 <PageLogin /> 4 </main> 5</template> 6 7<script> 8import PageLogin from './pages/PageLogin'; 9 10export default { 11 components: { 12 PageLogin 13 }, 14 mounted() { 15 this.$store.dispatch('init'); 16 } 17}; 18</script> 19<style lang="scss"></style>
StoreIndex.js
javascript
1import Vue from 'vue'; 2import Vuex from 'vuex'; 3 4import StoreUser from './modules/StoreUser.js'; 5 6Vue.use(Vuex); 7 8export default new Vuex.Store({ 9 modules: { 10 user: StoreUser 11 }, 12 state: { 13 modeTemplate: 'index', 14 }, 15 mutations: { 16 }, 17 actions: { 18 init: () => { 19 console.log('store init'); 20 } 21 } 22});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/20 16:20
2019/05/21 03:26