vue3中的firebase身份验证问题答案

【问题标题】：Problems with firebase authentication in vue3vue3中的firebase身份验证问题
【发布时间】：2021-12-18 17:56:23
【问题描述】：

我想制作一个表单，在 firebase 9 的帮助下进行身份验证。项目是用 Vue3 制作的。我有一个 HTML 表单：

<form @submit.prevent="registr">
        <div class="inputs">
          <div class="input user">
            <i class="fas fa-user"></i>
            <input type="text" placeholder="Username" v-model="username">
          </div>
          <div class="input email">
            <i class="fas fa-at"></i>
            <input type="email" placeholder="Email" v-model="email">
          </div>
          <div class="input password">
            <i class="fas fa-key"></i>
            <input type="password" placeholder="password" v-model="password">
          </div>
        </div>
        <button type="submit"> Sign In </button>
      </form>

进口：

import 'animate.css';
import "firebase/auth"
import { createUserWithEmailAndPassword } from "firebase/auth";

脚本部分的数据和方法：

    data() {
    return{
      username: null,
      email: null,
      password: null,
    }
  },
methods: {
    register(){
      console.log('WORK');
      createUserWithEmailAndPassword(this.email, this.password)
              .then(() => {
                console.log('success')
              })
              .catch(err => {
                console.error(err)
              })
    }
  }

尽管如此，方法的任何部分都不起作用，即使是简单的 console.log，我添加它以查看表单是否以正确的方式与函数连接。另外，我在控制台中有一个错误：Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_7__.default is undefined。为什么方法不适用于表单？

为了初始化 firebase，我使用了以下代码：

import { initializeApp } from 'firebase/app';
import 'firebase/auth';

const firebaseConfig = {
  apiKey: "#################################",
  authDomain: "decbase-#####.firebaseapp.com",
  projectId: "decbase-#####",
  storageBucket: "decbase-#####.appspot.com",
  messagingSenderId: "############",
  appId: "1:0000000000:web:aaaaaaaaaaaaaaaaaaaaaa"
};
const firebaseApp = initializeApp(firebaseConfig);
export default firebaseApp;

【问题讨论】：

您能否编辑您的问题以显示如何定义/导入 createUserWithEmailAndPassword，以及如何初始化 Firebase？
当然，我编辑了导入和初始化 firebase 的问题
最后一个代码块似乎使用了旧版本的 SDK。您确定您仅包括 v9 吗？
是的，你是对的，初始化有错误，由于当前的文档，我修复了它。虽然情况没有改变，控制台错误改为 vue__WEBPACK_IMPORTED_MODULE_4__.default is undefined

标签： javascript html firebase firebase-authentication vuejs3

【解决方案1】：

在初始化中：

import { initializeApp } from 'firebase/app';
import {getAuth} from 'firebase/auth';
// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "############################################",
  authDomain: "#####-#####.firebaseapp.com",
  projectId: "#####-#####",
  storageBucket: "#####-#####.appspot.com",
  messagingSenderId: "############",
  appId: "1:00000000000:web:######################"
};
const firebaseApp = initializeApp(firebaseConfig);
export default getAuth(firebaseApp);

组件中的方法和导入：

import "firebase/auth"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
methods: {
    async register(){
      console.log("WORK");
      const auth = getAuth();
      createUserWithEmailAndPassword(auth, this.email, this.password)
              .then(() => {
                console.log("success")
              })
              .catch(err => {
                console.error(err)
              })

    }

并且在按钮标签中的HTML部分应该添加@click：

<button type="submit" @click="register"> Sign In </button>

【讨论】：