[Angular2Fire] Firebase auth (Google, Github)
2023-09-14 09:00:52 时间
To do auth, first you need to go firebase.console.com to enable the auth methods, for example, enable google, github...
Enable goolge is quite simple, just one click, enable Github, Twitter, you need to do more configuration.
Follow the link: https://firebase.google.com/docs/auth/web/github-auth
After successfully enable it, we create a service to do the auth:
import {AuthProviders, FirebaseAuthState, FirebaseAuth} from "angularfire2"; import {Injectable} from "@angular/core"; @Injectable() export class AuthService { private authState: FirebaseAuthState = null; constructor(public auth$: FirebaseAuth) { auth$.subscribe((state: FirebaseAuthState) => { this.authState = state; }); } get authenticated(): boolean { return this.authState !== null; } get id(): string { return this.authenticated ? this.authState.uid : ''; } signIn(provider: number): firebase.Promise<FirebaseAuthState> { return this.auth$.login({provider}) .catch(error => console.log('ERROR @ AuthService#signIn() :', error)); } signInWithGithub(): firebase.Promise<FirebaseAuthState> { return this.signIn(AuthProviders.Github) } signInWithGoogle(): firebase.Promise<FirebaseAuthState> { return this.signIn(AuthProviders.Google); } signInWithTwitter(): firebase.Promise<FirebaseAuthState> { return this.signIn(AuthProviders.Twitter); } signOut(): void { this.auth$.logout(); } }
Using it in controller:
<section class="signup"> <button md-button (click)="signInWithGoogle()">Google</button> <button md-button (click)="signInWithTwitter()">Twitter</button> <button md-button (click)="signInWithGithub()">Github</button> </section>
import {Component, OnInit} from '@angular/core'; import {AuthService} from "../shared"; import {Router} from "@angular/router"; @Component({ selector: 'app-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.css'] }) export class SignupComponent implements OnInit { constructor(private auth: AuthService, private router: Router) { } ngOnInit() { } signInWithGithub(){ this.auth.signInWithGithub() .then(this.postSignIn.bind(this)) } signInWithTwitter(){ this.auth.signInWithTwitter() .then(this.postSignIn.bind(this)) } signInWithGoogle(){ this.auth.signInWithGoogle() .then(this.postSignIn.bind(this)) } postSignIn() { console.log("Auth id: ", this.auth.id); this.router.navigate(['/home']); } }
Happy Auth!
相关文章
- 【Jenkins 插件】使用 github 插件从 GitHub 上拉取项目代码
- Google Earth Engine学习资料汇总与分享
- google earth使用方法_国内使用google earth
- 我是这么用 Google 的....
- 无需服务器的GitHub实时漏洞利用工具监听器,目前支持微信/TG推送,中文版 Github-CVE-Listener
- 【Google Play】管理目标受众群体 ( 加入“亲子同乐计划“ | 应用受众覆盖所有年龄段 )
- 【错误记录】GitHub 提交报错 ( OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443 )
- GAget:在苹果电脑的 Widget 上快速查看 Google Analytics 数据
- Google、顺丰、网易数帆、微盟等技术专家,为你分享稳定性保障实践 | ArchSummit
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- 平台在Linux上使用Google服务:一步一步地实现了(linuxgoogle)
- Google 宣布新拥堵控制算法 TCP BBR
- 谷歌冻结 Google Code 服务 明年1月25日全面关闭该服务
- Google 将 Python 代码转变成 Go 以改进性能
- 关于李飞飞、李佳重磅加盟 Google,这里有三个有意思的地方
- Google Talk是Google 的即时通讯方式,简称Gtalk。它可以进行文字 google talk聊天以及电脑对电脑的语音连接通话。Google此举进一步激化了它和雅虎,微软以及美国在线之间的竞争
- 高质量 VR 直播有望了,Google 带来 Equi-Angular Cubemaps 技术
- 美参议院新法案或将颠覆苹果和Google的应用商店主导地位
- Google的跟踪代码动态加载js代码方法应用