0
私は現在Vue JS Webpackテンプレートを使用してアプリケーションをビルドしています。私は次のエラーを取得する認証プロバイダーのいずれかを使用してログインしようと毎回:
私firebase設定ファイルfirebase auth、VueJS Webpackを使用している場合、AuthProviderはコンストラクタではありません
import firebase from 'firebase'
let config = {
apiKey : 'xxxxxxx',
authDomain: 'xxxxxx',
databaseURL: 'xxxxxxx',
projectId: 'yyyyyy'
}
export default firebase.initializeApp(config)
と私のログイン:ここ
Login.vue?a071:44 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__firebaseApp.a.auth.GoogleAuthProvider is not a constructor
は私のコードの関連部分です。 Vueのログイン方法
<template>
\t <div class="login">
\t \t <div v-if="loading" class="modal-loading-white">
\t \t \t <img class="loader-img" src="/img/loader-gray.svg">
\t \t </div>
\t \t <div>Login</div>
\t \t <div v-show="this.errorMsg">{{ errorMsg }}</div>
\t \t <div><label>Email </label>: <input type="email" v-model.trim="emailForm"/></div><br>
\t \t <div><label>Password </label>: <input type="password" v-model.trim="passwordForm"/></div><br>
\t \t <button v-on:click="logInUserWithProvider('email')">Login</button><br>
\t \t <div><router-link to="forgot">Forget Your Password?</router-link></div>
\t \t <button v-on:click="logInUserWithProvider('google')">Google</button>
\t \t <button v-on:click="logInUserWithProvider('facebook')">Facebook</button>
\t </div>
</template>
<script>
import firebase from '../firebaseApp'
export default {
\t name: 'loginForm',
\t data: function() {
\t \t return {
\t \t \t emailForm:'',
\t \t \t passwordForm: '',
\t \t \t errorMsg: '',
\t \t \t loading: false
\t \t }
\t },
\t methods: {
\t \t logInUserWithEmail: function() {
\t \t \t if (this.emailForm && this.passwordForm) {
\t \t \t \t this.loading = true;
\t \t \t \t firebase.auth().signInWithEmailAndPassword(this.emailForm, this.passwordForm).catch(function (error) {
\t \t \t \t \t this.errorMsg = error.message;
\t \t \t \t \t this.loading = false;
\t \t \t \t }.bind(this));
\t \t \t } else {
\t \t \t \t this.errorMsg = 'Email and password can\'t be empty';
\t \t \t }
\t \t },
\t \t logInUserWithProvider: function(provider) {
\t \t \t if (provider == 'google') {
\t \t \t \t var authProvider = new firebase.auth.GoogleAuthProvider();
\t \t \t \t this.loading = true;
\t \t \t \t firebase.auth().signInWithRedirect(authProvider);
\t \t \t } else if (provider == 'facebook') {
\t \t \t \t var authProvider = new firebase.auth.FacebookAuthProvider();
\t \t \t \t this.loading = true;
\t \t \t \t firebase.auth().signInWithRedirect(authProvider);
\t \t \t } else if (provider == 'email') {
\t \t \t \t this.logInUserWithEmail();
\t \t \t }
\t \t \t firebase.auth().onAuthStateChanged((user) => {
\t \t \t \t if (user) { \t \t \t \t \t
\t \t \t \t \t this.emailForm = '';
\t \t \t \t \t this.passwordForm = '';
\t \t \t \t \t this.$emit('login');
\t \t \t \t }
\t \t \t });
\t \t }
\t } \t
}
</script>
に変更してください。Login.vueファイルを完全に提供できますか? – follio
@Follio Login.vueのコード全体を追加しました –
はfirebaseApp.jsというfirebase設定ファイルですか? – follio