首先,你需要将Angular Firebase Auth库添加到你的项目中。可以使用以下命令来安装它:
npm install firebase @angular/fire
接下来,你需要在你的Angular项目中配置Firebase。首先,在你的src/environments目录下创建一个environment.ts文件,并添加以下内容:
export const environment = {
production: false,
firebaseConfig: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
}
};
然后,在你的src/environments目录下创建一个environment.prod.ts文件,并添加以下内容:
export const environment = {
production: true,
firebaseConfig: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
}
};
请确保将上述配置替换为你自己Firebase项目的正确配置。
接下来,在你的app.module.ts文件中导入Angular Firebase Auth模块并配置它。将以下代码添加到imports数组中:
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule
],
...
})
export class AppModule { }
现在,你可以在你的组件中使用Angular Firebase Auth来实现邮箱/密码和谷歌登录。
首先,导入FirebaseAuth服务和AngularFireAuth模块。在你的组件文件中添加以下代码:
import { Component } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app';
@Component({
selector: 'app-login',
template: `
`,
})
export class LoginComponent {
constructor(private afAuth: AngularFireAuth) { }
loginWithEmailPassword() {
const email = 'example@email.com';
const password = 'password';
this.afAuth.signInWithEmailAndPassword(email, password)
.then((userCredential) => {
// 登录成功
const user = userCredential.user;
console.log(user);
})
.catch((error) => {
// 登录失败
console.log(error);
});
}
loginWithGoogle() {
this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider())
.then((userCredential) => {
// 登录成功
const user = userCredential.user;
console.log(user);
})
.catch((error) => {
// 登录失败
console.log(error);
});
}
}
上述代码中,loginWithEmailPassword()方法使用signInWithEmailAndPassword()函数通过邮箱和密码进行登录。loginWithGoogle()方法使用signInWithPopup()函数通过谷歌账号进行登录。
请注意,你需要将email和password替换为你自己的邮箱和密码。
这是一个简单的示例,你可以根据自己的需求进行修改和扩展。