如何在 Angular 4 中实现 google auth 登录

Posted 2023-03-13

【中文标题】如何在 Angular 4 中实现 google auth 登录

【英文标题】：How to implement the google auth login in angular 4

【发布时间】：2019-01-16 00:46:58

【问题描述】：

我是 Angular 的新手，我坚持使用 google 登录。我创建了一个按钮，单击它不会将我重定向到谷歌登录页面，我收到错误消息。我不知道是什么导致了这个错误。所以我要分享我的代码：

import  Component  from '@angular/core';
import  AngularFireAuth from 'angularfire2/auth';
import * as firebase from 'firebase';


@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
)
export class LoginComponent  
  constructor(private afAuth: AngularFireAuth )

  loginbtn() 
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  

模块：

import  AngularFireAuth from 'angularfire2/auth';
providers: [AngularFireAuth]

错误：

core.js:1449 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
  StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
    NullInjectorError: No provider for AngularFireAuth!
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at _NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

【问题讨论】：

您需要将AngularFireAuth 添加到您的模块providers 数组中

感谢您的回复，根据您的建议，我已添加此依赖项，但仍然无法正常工作。

你能编辑你的问题并为你的模块添加代码吗？

我已编辑，您可以检查一下。

AngularFireAuth 到底是什么？是一堂课吗？是实例吗？根据这一点，您将需要更改您的提供者声明以反映您正在添加的提供者的类型。例如，如果 AngularFireAuth 是一个需要实例化的类，您可以像 provide: 'AngularFireAuth', useClass: AngularFireAuth 一样提供它。如果您正在处理不需要实例化的实例或导入，请执行 provide: 'AngularFireAuth', useValue: AngularFireAuth 。在您的组件中，两种情况下的注入都类似于 @Inject('AngularFireAuth') private afAuth

【参考方案1】：

模块设置错误。您提供 AngularFireAuth (providers: [AngularFireAuth])。删除它并将AngularFireAuthModule 添加到您的导入中：

...
import  AngularFireModule  from 'angularfire2';
import  AngularFirestoreModule  from 'angularfire2/firestore';
import  AngularFireAuthModule  from 'angularfire2/auth';
...

@NgModule(
    imports: [
        ...
        // Firebase
        AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything
        AngularFirestoreModule, // imports firebase/firestore, only needed for database features
        AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
        ...
    ],
    providers: [
        // remove AngularFireAuth
    ],
    ...
)

查看Setup Guide了解更多信息。

【讨论】：

嗨蒂姆，我在 import AngularFirestoreModule from 'angularfire2/firestore' 时遇到编译错误；

@UmeshC 可以添加 angularfire2、firebase 的版本号以及遇到的错误

请检查版本号，“angularfire2”：“^4.0.0-rc.1”，“firebase”：“^4.2.0”，错误：[ts] 找不到模块'angularfire2/firestore'。