介绍
小编给大家分享一下角中的重火力点身份验证怎么弄,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
重火力点提供了一种在应用中设置身份验证的简单方法。在这里,我们将探讨如何使用AngularFire2库为角2 +应用程序设置简单的电子邮件/密码注册和身份验证工作流程,。
第一步是创建一个新的重火力点项目,并在重火力点控制台的“身份验证”部分下启用电子邮件/密码登录方法。
让我们开始使用npm安装必要的包。这会将重火力点SDK, AngularFire2和promise-polyfill依赖项添加到您的项目中:
npm美元安装重火力点AngularFire2——保存 npm安装promise-polyfill美元——save-exact 现在让我们将重火力点API和项目凭证添加到项目的环境变量中。如果您点击添加重火力点到您的网络应用,您可以在重火力点控制台中找到这些值:
<强> src/环境/环境。ts
出口const环境={
生产:假的,
重火力点:{
apiKey: & # 39; XXXXXXXXXXX& # 39;
authDomain: & # 39; XXXXXXXXXXX& # 39;
databaseURL: & # 39; XXXXXXXXXXX& # 39;
projectId: & # 39; XXXXXXXXXXX& # 39;
storageBucket: & # 39; XXXXXXXXXXX& # 39;
messagingSenderId: & # 39; XXXXXXXXXXX& # 39;
}}; 然后我们将使用AngularFireModule和AngularFireAuthModule配置我们的应用模块。另请注意,我们正在导入并提供AuthService。我们接下来会创建该服务:
<强> app.module。ts
//?
进口{AngularFireModule} & # 39; angularfire2& # 39;;
从& # 39;进口{环境}. ./环境/环境# 39;;
进口{AngularFireAuthModule} & # 39; angularfire2/身份验证# 39;;
从& # 39;进口{AuthService}。/auth.service& # 39;;
@NgModule ({
声明:[
AppComponent
),
进口:[//?
AngularFireModule.initializeApp (environment.firebase),
AngularFireAuthModule
),
提供者:[AuthService],
引导(AppComponent):
}）
出口类AppModule {} <强>创建Auth服务
我们的服务将是一个允许我们登录,注册或注销用户的中心位置,因此我们将为这3个操作定义方法。所有的身份验证逻辑都将在服务中,这将允许我们创建不需要实现任何身份验证逻辑的组件,并有助于保持我们的组件简单。
您可以使用此命令使用角CLI为服务创建框架:
美元ng g s Auth 这是服务的实现,利用AngularFireAuth:
<强> auth.service。ts
进口{注射}& # 39;@angular/核心# 39;;
进口{AngularFireAuth} & # 39; angularfire2/身份验证# 39;;
进口*从& # 39;重火力点重火力点/应用# 39;;
进口{可见}& # 39;rxjs/可见# 39;;
@Injectable ()
出口类AuthService {
用户:Observable;
构造函数(私人firebaseAuth: AngularFireAuth) {
这一点。用户=firebaseAuth.authState;
}
注册(电子邮件:字符串,密码:字符串){
this.firebaseAuth
.auth
.createUserWithEmailAndPassword(电子邮件、密码)
不要犹豫(value=https://www.yisu.com/zixun/> {
console.log('成功!”,价值);
}）
.catch(呃=> {
控制台。日志(“出错了:”,err.message);
});
}
登录(电子邮件:字符串,密码:字符串){
this.firebaseAuth
.auth
.signInWithEmailAndPassword(电子邮件、密码)
不要犹豫(值=> {
控制台。日志(“不错,它成功了!”);
}）
.catch(呃=> {
控制台。日志(“出错了:”,err.message);
});
}
注销(){
this.firebaseAuth
.auth
.signOut ();
}
} 您会注意到AngularFireAuth.auth上可用的方法都返回承诺,因此我们可以使用然后和抓分别处理成功和错误状态。
我们在这里使用createUserWithEmailAndPassword和signInWithEmailAndPassword,因为我们正在设置电子邮件/密码身份验证,但可以通过Twitter, Facebook或谷歌进行相同的方法进行身份验证。
<强>组件类和模板
既然我们的身份验证服务已经到位,那么创建一个允许登录,注册或注销的组件非常简单:
<强> app.component.ts
进口{组件}& # 39;@angular/核心# 39;;
从& # 39;进口{AuthService}。/auth.service& # 39;;
@ component ({…}）
出口类AppComponent {
电子邮件:字符串;
密码:字符串;
构造函数(公共authService: authService) {}
注册(){
this.authService.signup(这一点。电子邮件、this.password);
这一点。电子邮件=Ｃ苈?& # 39;& # 39;;
}
登录(){
this.authService.login(这一点。电子邮件、this.password);
这一点。电子邮件=Ｃ苈?& # 39;& # 39;;
}
注销(){
this.authService.logout ();
}
}
