![](/img/trans.png)
[英]Firebase functions.httpsCallable(...).then is not a function
[英]httpsCallable is not a function when calling a Firebase function
我正在嘗試使用 Firebase auth 和 Firebase 函數實現基於角色的身份驗證。 現在我有一個按預期工作的注冊表單,現在我正在嘗試添加一個表單,您提交一個 email 調用 Firebase function 用戶將附加自定義聲明。 I already added my function to Firebase via the terminal and I'm calling functions on my project but whenever I submit the form with the email I get a httpsCallable is not a function
error.
這是我的文件:
函數文件夾中的index.js
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
exports.addAdminRole = functions.https.onCall((data, context) => {
//get user and add custom claim (admin)
return admin
.auth()
.getUserByEmail(data.email)
.then(user => {
return admin.auth().setCustomUserClaims(user.uid, {
admin: true
});
})
.then(() => {
return {
message: `Success! ${data.email} has been made admin`
};
})
.catch(err => {
return err;
});
});
我的firebaseInit.js配置文件,我在其中調用與 firebase 相關的所有內容
import firebase from "firebase/app";
import "firebase/firestore";
import "@firebase/functions";
import firebaseConfig from "./firebaseConfig";
const firebaseApp = firebase.initializeApp(firebaseConfig);
export const fc = firebase.functions();
export const db = firebase.firestore();
export const fv = firebase.firestore.FieldValue;
export default firebaseApp.firestore();
還有表單所在的Vue組件
<template>
<div class="home">
<h3>Welcome to Site</h3>
<h3>Add user to admin</h3>
<div class="row">
<form @submit.prevent="addAdmin()" class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate" v-model="email" />
<label for="email">Email</label>
</div>
</div>
<button type="submit" class="btn">Submit</button>
<router-link to="/members" class="btn grey">Cancel</router-link>
</form>
</div>
</div>
</template>
<script>
import firebase from "firebase/app";
import fc from "../data/firebaseInit";
export default {
name: "home",
data() {
return {
email: ""
};
},
methods: {
addAdmin() {
const addAdminRole = fc.httpsCallable("addAdminRole");
addAdminRole(this.email).then(result => {
console.log(result);
});
}
}
};
</script>
有人可以解釋為什么我會收到這個錯誤嗎? 我是否忘記導入與 firebase 相關的內容?
你的問題來自這樣一個事實
export const fc = firebase.functions();
export const db = firebase.firestore();
export const fv = firebase.firestore.FieldValue;
export default firebaseApp.firestore();
在您的firebaseInit.js
文件中,您沒有導出fc
(順便說一下fv
)
以下應該工作
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/functions"; // <-- Note that the @ was removed
import firebaseConfig from "./firebaseConfig";
const firebaseApp = firebase.initializeApp(firebaseConfig);
const fc = firebase.functions();
const db = firebase.firestore();
const fv = firebase.firestore.FieldValue;
export { fc, db, fv };
然后,在您的組件中執行以下操作:
import {fc, db, fv} from "../data/firebaseInit";
//....
或者下面你只需要fc
和db
,例如:
import {fc, db} from "../data/firebaseInit";
//....
我可以用不同的方式解決這個問題。 我正在使用 Vue 2.6。 在我的組件中,我只需要:
import firebase from "firebase/app";
const functions = firebase.functions();
var addMessage = functions.httpsCallable("addMessage");
在我的 main.js 文件中,我有:
import Vue from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify";
import router from "./router";
import firebase from "firebase/app";
import "firebase/functions";
import store from "./store";
Vue.config.productionTip = false;
Vue.config.devtools = true;
Vue.prototype.$firebase = firebase;
// Your web app's Firebase configuration
const firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
let app;
firebase.auth().onAuthStateChanged(user => {
if (!app) {
app = new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
在依賴項中:
"dependencies": {
"core-js": "^3.6.5",
"firebase": "^8.0.2",
"firebase-functions": "^3.13.2",
...
}
這基本上是適用於 Vue.js 的文檔https://firebase.google.com/docs/functions/callable的說明
我認為問題來自於你這樣做的事實
import firebase from "firebase/app";
import "firebase/firestore";
import "@firebase/functions";
而你應該這樣做:
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/functions"; //<-- Change here
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.