有什么方法可以从角度组件使用 onCall Firebase 函数？

Question

I understand that firebase cloud functions can be called using the functions.https.onRequest or the functions.https.onCall, but I can't find an example about how use the "onCall" from an angular module, the examples that I found are only with the http request angular module.

example:

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';

import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {


  constructor(private db: AngularFireDatabase, private http: Http) { }

  postRequest() {
    const url = 'https://your-firebase-project.cloudfunctions.net/secureEndpoint';

    firebase.auth().currentUser.getIdToken()
            .then(authToken => {
              const headers = new Headers({'Authorization': 'Bearer ' + authToken });

              const myUID    = { uid: 'current-user-uid' };    // success 200 response
              const notMyUID = { uid: 'some-other-user-uid' }; // error 403 response

              return this.http.post(url, myUID, { headers: headers }).toPromise()
            })
            .then(res => console.log(res))
    }

}

there is any way to use the JS standard call for this on an angular module?

<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase-functions.js"></script>
firebase.functions().httpsCallable('FUNCTION');

Answer 1

I thank you guys for the guidance, you where right, I just use the import in this way:

import * as firebase from 'firebase';

and then just call the functions.

Answer 2

This will import all the library in the component:

import * as firebase from 'firebase';

To import only functions , use:

import * as firebase from 'firebase/app';
import 'firebase/functions';

Answer 3

Please check the following link https://angularfirebase.com/snippets/trigger-http-cloud-functions-from-an-angular-component/

if you have created the oncall request you call the cloud function this way ..

Get Cors Package from here

https://www.npmjs.com/package/cors

Your Cloud Function :

import * as functions from 'firebase-functions';
const email = require("emailjs/email");
const cors = require('cors')({origin: true});

exports.sendMailFunction = functions.https.onRequest((request, response) => {
    cors(request, response, () => {  
        // *Your code*

        });

  });

Your Cloud url can be : https://us-central1-<projectid>.cloudfunctions.net/sendMailFunction

Your Component Function that will called on click or any event you like

sendEmail() {

    let url = `https://your-cloud-function-url/function`
    let params: URLSearchParams = new URLSearchParams();
    let headers = new Headers({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });

    params.set('to', 'user@example.com');
    params.set('from', 'you@yoursupercoolapp.com');
    params.set('subject', 'test-email');
    params.set('content', 'Hello World');

    return this.http.post(url, params, headers)
                    .toPromise()
                    .then( res => {
                      console.log(res)
                    })
                    .catch(err => {
                      console.log(err)
                    })

  }