标签: angularfire

如何正确定义Firebase,以便jshint停止发出哔哔声.

我的代码正在运行......只是jshint很烦人

app.js

 angular
  .module('morningharwoodApp', [
    'firebase',
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'

  ])

main.js

angular.module('morningharwoodApp')
  .controller('MainCtrl', function ($scope, $firebase) {
    // var Firebase;
    var pageRef = new Firebase('https://morningharwood.firebaseIO.com/page');
    // var pageRef = new Firebase('https://morningharwood.firebaseIO.com/page');


    //init
    $scope.pages = $firebase(pageRef);
    $scope.newPage = {
        title: '',
        slug: '',
        url: '',
        desc: '',
        active: false,
        template: [
            {
                type: ''
            }
        ],
        img: '',
        dateCreated: '',
        dateUpdated: ''

    };

    //CRUD

    //add
    $scope.addPage = function() {
        $scope.pages.$add($scope.newPage);
        $scope.newPage = '';
    };
  });

我正在尝试使用Facebook登录验证我的Firebase(Angularfire)应用程序的用户.

当我使用弹出窗口进行身份验证时,一切都按预期工作,但是为了支持尽可能多的浏览器(iOS上的Chrome不支持弹出窗口,例如)我想要使用重定向($authWithOAuthRedirect)进行身份验证.

我已经确认我在Facebook上的设置是正确的(我的应用程序ID和秘密,例如)但是当我通过重定向进行Facebook身份验证后重定向回我的应用程序,$onAuth但是我没有我的Facebook authData.

相反,我有匿名authData.有点背景; 所有用户如果未经过其他身份验证,则匿名进行身份验证(例如,使用Facebook).

我看不出为什么会这样 - 用户现在应该通过Facebook验证,并拥有Facebook authData.

在某些情况下,我的代码的例外情况如下:

用户单击登录按钮时触发

function logIn () {
    firebaseAuth
        .$authWithOAuthRedirect('facebook', function (error) {
            if (error) {
                console.log(error);
            }
        });
}

$onAuth(在我的Angular应用程序中run)

function run ($rootScope, firebaseAuth, sessionStore) {
    $rootScope
        .$on('$routeChangeError', function (event, next, prev, error) {
            if (error === 'AUTH_REQUIRED') {
                console.log(error);
            }
        });

    $rootScope
        .$on('$routeChangeSuccess', function (event, current, prev) {
            $rootScope.title = current.$$route.title;
        });

    firebaseAuth
        .$onAuth(onAuth);

    function onAuth (authData) {
        console.log(authData); …

我正在构建一个使用Firebase和AngularFire2(目前处于alpha版)的实验性(Ionic 2)应用程序.为此,我将遵循Aaron Saunders的教程作为基础:

http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2 https://github.com/aaronksaunders/ionic2-angularfire-sample

以下是我的home.ts和我的home.html.

this.projects = af.list('/items').map( (items) => {
    return items.map( item => {
        item.meta = af.object(`/item_meta/${item.$key}`)
        return item
    })
})

以下演示文稿演示了AngularFire2嵌套Observables返回的方法:https://youtu.be/ngnSOTSS8Q8？t = 1h6m37s

这是我的观点:

<ion-card *ngFor="#item of items | async">
    <ion-card-header>
        {{item.name}}
    </ion-card-header>
    <ion-card-content>
        {{item.description}}
        <br>

        {{item.meta.stockPrice | async}}

    </ion-card-content>
</ion-card>

与我所遵循的演示中的示例的主要区别在于,我在'list/array'Observable中嵌套了一个'对象'Observable.相反,他们在列表中添加一个列表.这样做的结果是我试图直接在我的视图中渲染{{item.meta.stockPrice}}而不是嵌套ngFor.

这就是我的数据:

{
    "items":
        {
            "item1":{
                "name": "Item 1",
                "description": "1234"
            },
            "item2":{
                "name": "Item 2",
                "description": "abcd"
            }
        }
    "items_meta"{
        "item1":{
            "stockPrice": 1234,
            "moarData": "derp"
        },
        "item2":{
            "stockPrice": 386,
            "moarData": "lolz"
        } …

我正在尝试使用Angularfire2 更新Angular2项目中FirebaseListObservable对象中的项目.FirebaseListObservable的定义如下:

export declare type FirebaseOperation = string | firebase.database.Reference | firebase.database.DataSnapshot | AFUnwrappedDataSnapshot;
export declare class FirebaseListObservable<T> extends Observable<T> {
  _ref: firebase.database.Reference | firebase.database.Query;
  constructor(_ref: firebase.database.Reference | firebase.database.Query, subscribe?: <R>(subscriber: Subscriber<R>) => Subscription | Function | void);
  lift<T, R>(operator: Operator<T, R>): Observable<R>;
  push(val: any): firebase.database.ThenableReference;
  update(item: FirebaseOperation, value: Object): firebase.Promise<void>;
  remove(item?: FirebaseOperation): firebase.Promise<void>;
  _checkOperationCases(item: FirebaseOperation, cases: FirebaseOperationCases): firebase.Promise<void>;
}

我有一个显示,保存,删除和更新房屋的服务,如下所示:

@Injectable()
export class HousesService {
  private _houses$:FirebaseListObservable<IHouse[]>;
  constructor(private af:AngularFire) {
    this._houses$ = this.af.database.list('/houses');
  }
  save(house:IHouse) {
    if …

我正在使用Angular和Firebase构建一个网站.我正在使用Angularfire2和AngularFireAuth库以及GoogleAuthProvider(Google)作为我的身份验证提供程序.

这是我的服务代码:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthenticationService {
  user: Observable<firebase.User>;

  constructor(public afAuth: AngularFireAuth) {
    this.user = afAuth.authState;
  }

  login() {
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
    this.afAuth.auth.signOut();
  }
}

当用户"退出"我的网站时,它可以正常工作,但似乎可以"缓存"Google身份验证.因此,当他们第二次尝试登录时,我遇到了一些问题:

1. 用户不得选择其他Google帐户登录.
2. 用户自动登录...这似乎是一个安全问题.另一个用户可以访问相同的共享PC,并以前一个用户身份登录,并且不需要输入密码来执行此操作.

我究竟做错了什么？有没有办法可以阻止angularfire2/auth缓存这些凭据？有没有办法在用户退出我的网站时将用户退出Google？

改变路线后我的数据消失了.

场景:

CommentComponent(显示数据) - > ChangeRoute - > CommentComponent(未显示数据)

数据仅在第一次加载时显示,但每当我更改路径时它就会消失.

我发现这个问题与我的案例/问题类似: 使用routerlink后没有FireStore的数据

但是没有一条评论/答案是有帮助的.所以我决定提出这个问题.

COMPONENT.HTML comment.component.html::

<ng-template #noComments>
  <h1>No comment yet.</h1>
</ng-template>
<div *ngIf="comments?.length > 0; else noComments">
  <h1 style="margin-bottom: 3.5vh;">Comments</h1>
  <ul *ngFor="let comment of comments">
      <li>
        <mat-card>
          <h3>{{comment.name}}</h3>
          <p>{{comment.comment}}</p>
        </mat-card>
      </li>
    </ul>
</div>

COMPONENT.TypeScript comment.component.ts::

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

import { CommentService } from '../services/comment.service';
import { Comment } from '../models/comment'; …

当应用程序在浏览器中加载时，它会发出以下警告。所以无法为 prod ( ng build --aot --prod)创建构建

    It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>'; …

我正在尝试使用 Angular Fire 包访问 Angular 环境中可调用函数的错误消息。请看下面的代码：

角度（客户端）

async myCallableFunction(id: string) {
  try {
    const res = await this.afFunctions.httpsCallable('callableFunction')({
      id
    }).toPromise();

    console.log(res);
  } catch (err) {
    console.error('Error is:', err);
  }
}

服务器端（Firebase 功能）

exports.callableFunction = functions.https.onCall((data: {
 id: string
}, context: https.CallableContext) => {
  // throw error for testing only
  throw new https.HttpsError('unknown', 'Test Error Message');
});

控制台记录的错误消息是：

[console.error]：“错误是：”{“代码”：“未知”，“行”：100205，“列”：32，“sourceURL”：“ http://192.168.1.100:8100/vendor.js ” }

如何从 Cloud Firestore 的响应中访问错误消息？

提前致谢。

我有一个服务，它有 2 种方法可以从 firebase 实时数据库返回数据

getAllProducts -> returns an observable array of products
getSingleProduct -> returns an observable single product

我正在尝试使用 Jest 创建单元测试来模拟 firebase，以便我可以测试这两种方法：

测试文件

getAllProducts -> returns an observable array of products
getSingleProduct -> returns an observable single product

allProductsMock并且singleProductMock只是本地文件中的虚拟数据。

抛出的错误this.db.list不是函数。

如果我将存根更改为基本常量而不是类，则 allProducts 测试通过，但显然我随后无法测试该getSingleProduct方法：

    import {TestBed, async} from '@angular/core/testing';
    import {ProductService} from './product.service';
    import {AngularFireModule} from '@angular/fire';
    import {environment} from 'src/environments/environment';
    import {AngularFireDatabase} from '@angular/fire/database';
    import {getSnapShotChanges} from 'src/app/test/helpers/AngularFireDatabase/getSnapshotChanges';
    import {Product} from …

我正在尝试运行以下查询：

this.db.firestore
        .collectionGroup('members')
        .orderBy('dateModified', 'desc')
        .where(firebase.firestore.FieldPath.documentId(), '==', uid)

但我收到错误：

无效查询。通过 FieldPath.documentId() 查询集合组时，提供的值必须产生有效的文档路径，但“X6yL5Ko55jSMWhhoQUO91xVYdEH3”不是，因为它具有奇数个段 (1)。

解决此问题的唯一方法是将文档 ID 添加到文档中吗？这并不理想，因为我有很多现有数据...文档 id 是 firebase 用户的 uid。