创建用户登录/注册错误（Angular、Ionic 和 Firebase）

Question

// 环境

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

export const environment = {
  production: false
};

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "SUS",
  authDomain: "SUS",
  projectId: "SUS",
  storageBucket: "Sus",
  messagingSenderId: "Sus",
  appId: "Sus",
  measurementId: "Sus"
};



// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebase);

// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(firebase);

/*
 * For easier debugging in development mode, you can import the following file
 * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
 *
 * This import should be commented out in production mode because it will have a negative impact
 * on performance if an error is thrown.
 */
// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

// 注册.page.ts

import { Component, OnInit } from '@angular/core';
import { App } from '@capacitor/app';
import { NavController } from '@ionic/angular';
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})
export class SignupPage implements OnInit {

  constructor(private navCtrl: NavController) { }
  gotologin() {
    this.navCtrl.navigateForward('login');
  }
  SignUp() {
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });
  }

  ngOnInit() {
  }

}

// 注册.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Sign Up</ion-title>
  </ion-toolbar>
</ion-header>
<div class="wrapper">
  <ion-item lines="none">
    <ion-label position="floating">Name</ion-label>
    <ion-input type="text" placeholder="Firstname Lastname"></ion-input>
  </ion-item>
  <ion-item lines="none">
    <ion-label position="floating">Email</ion-label>
    <ion-input type="text" placeholder="Email"></ion-input>
  </ion-item>
  <ion-item lines="none">
    <ion-label position="floating">Password</ion-label>
    <ion-input type="text" placeholder="password"></ion-input>
  </ion-item>
  <ion-button (click)="SignUp()">Sign In</ion-button>
</div>
<ion-content>

</ion-content>

<ion-footer>
  <div class="text" (click)="gotologin()">
    Already a Member? Sign In
  </div>
</ion-footer>

错误

ERROR

src/app/signup/signup.page.ts:19:42 - error TS2304: Cannot find name 'email'.

19     createUserWithEmailAndPassword(auth, email, password)
                                            ~~~~~


ERROR

src/app/signup/signup.page.ts:19:49 - error TS2304: Cannot find name 'password'.

19     createUserWithEmailAndPassword(auth, email, password)
                                                   ~~~~~~~~

我创建了一个选项卡离子框架并创建了页面登录和注册现在我想在没有会话 cookie 但我的注册不起作用时弹出注册页面。 我想为我的记事本应用程序创建一个登录和注册功能。 但是我在注册时遇到错误，即使我在我的 firebase 上添加了身份验证并激活了电子邮件。 请帮我：（

Answer 1

您必须使用其他依赖项和插件。

ionic cordova plugin add cordova-plugin-firebase-authentication 
npm install @awesome-cordova-plugins/firebase-authentication

你的signup.page.ts需要是这样的：

import { FirebaseAuthentication } from '@awesome-cordova-plugins/firebase-authentication/ngx';


constructor(private firebaseAuthentication: FirebaseAuthentication) { }

...


this.firebaseAuthentication.createUserWithEmailAndPassword('test@gmail.com', '123')
  .then((res: any) => console.log(res))
  .catch((error: any) => console.error(error));

查看 Ionic 的Firebase Authentication官方文档和插件的GitHub repo ，了解如何配置你的google-services.json和/或GoogleService-Info.plist ，而不是在environment.ts中配置