如何在 angular 和 firebase 中使用 Gmail 验证电子邮件?
how to get email authenticate with Gmail in angular and firebase?
我想在 angular 和 firebase 中获取电子邮件验证 gmail,我创建了函数
getAuth (){ return this.afAuth.authState.pipe (map (auth => auth));}
.
auth-client.service.ts
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app'
@Injectable({
providedIn: 'root'
})
export class AuthClientService {
constructor(private afAuth:AngularFireAuth) { }
getAuth(){
return this.afAuth.authState.pipe(map(auth=>auth));
}
}
我将电子邮件身份验证分配给 navbar.component.ts (userLoggedIn) 中的一个变量。
navbar.component.ts
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthClientService } from './../../services/auth-client.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
isLoggedIn:boolean=false;
userLoggedIn:string;
constructor(
private authService:AuthClientService,
private flashMessage:FlashMessagesService,
private route:Router
) { }
ngOnInit() {
this.authService.getAuth().subscribe(auth=>{
if(auth){
return this.isLoggedIn=true;
this.userLoggedIn = auth.email;
}else{
this.isLoggedIn=false;
}
})
}
}
最后我想在navbar.component.html中显示它但是rine显示。
navbar.component.html
<li class="nav-item">
<a routerLink="/login" class="nav-link">{{ userLoggedIn }} </a>
</li>
改变这个:
ngOnInit() {
this.authService.getAuth().subscribe(auth=>{
if(auth){
return this.isLoggedIn=true;
this.userLoggedIn = auth.email;
}else{
this.isLoggedIn=false;
}
})
}
进入这个:
ngOnInit() {
this.authService.getAuth().subscribe(auth=>{
if(auth){
this.userLoggedIn = auth.email;
this.isLoggedIn = true;
}else{
this.isLoggedIn = false;
}
})
}
我想在 angular 和 firebase 中获取电子邮件验证 gmail,我创建了函数
getAuth (){ return this.afAuth.authState.pipe (map (auth => auth));}
.
auth-client.service.ts
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app'
@Injectable({
providedIn: 'root'
})
export class AuthClientService {
constructor(private afAuth:AngularFireAuth) { }
getAuth(){
return this.afAuth.authState.pipe(map(auth=>auth));
}
}
我将电子邮件身份验证分配给 navbar.component.ts (userLoggedIn) 中的一个变量。
navbar.component.ts
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { AuthClientService } from './../../services/auth-client.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
isLoggedIn:boolean=false;
userLoggedIn:string;
constructor(
private authService:AuthClientService,
private flashMessage:FlashMessagesService,
private route:Router
) { }
ngOnInit() {
this.authService.getAuth().subscribe(auth=>{
if(auth){
return this.isLoggedIn=true;
this.userLoggedIn = auth.email;
}else{
this.isLoggedIn=false;
}
})
}
}
最后我想在navbar.component.html中显示它但是rine显示。 navbar.component.html
<li class="nav-item">
<a routerLink="/login" class="nav-link">{{ userLoggedIn }} </a>
</li>
改变这个:
ngOnInit() {
this.authService.getAuth().subscribe(auth=>{
if(auth){
return this.isLoggedIn=true;
this.userLoggedIn = auth.email;
}else{
this.isLoggedIn=false;
}
})
}
进入这个:
ngOnInit() {
this.authService.getAuth().subscribe(auth=>{
if(auth){
this.userLoggedIn = auth.email;
this.isLoggedIn = true;
}else{
this.isLoggedIn = false;
}
})
}