简体   繁体   中英

Firebase cloud functions: Update user profile

In my e-commerce project, I want to use google maps api to insert user's shop location.

I used google cloud functions to insert the latitude, the longitude, and the address.

Now I could insert the data in the collection called locations. But I want to attach those information to the user profile collection.

So how can I insert latitude, longitude, and user address into the user profile collection?

This is my index.js

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

const Firestore = admin.firestore;
const db = Firestore();

const axios = require("axios");
const cors = require("cors")({
    origin: true
});

const googleMapsApiKey = "AIzaSyAnp23T2tbYj9Ho8uYmcE6W4KnbvZKlEjc";

exports.geocodeAddressAndSave = functions.https.onRequest(async (request, response) => {
    try {
        let address = encodeURI(request.body.address);
        let { data } = await axios.get(
            `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${googleMapsApiKey}`
        );

        if (data.status !== "OK") {
            //no results
            return cors(request, response, () => {
                response.status(200).send("No Results");
            });
        }

        const geocodedLocation = data.results[0];
        const objGeolocation = {
            address: geocodedLocation.formatted_address,
            geoPoint: new admin.firestore.GeoPoint(geocodedLocation.geometry.location.lat, geocodedLocation.geometry.location.lng)
        }

        //firebase

        await 

        db.collection('locations').add(objGeolocation);

        return cors(request, response, () => {
            response.status(200).send(objGeolocation);
        });
    } catch (error) {
        return cors(request, response, () => {
            console.log(error);
            response.status(500).send();
        });
    }
});

Vue.js

 <template>
  <div id="app" class="container mt-5">
    <b-form @submit.prevent="handleFormSubmit">
      <b-row>
        <b-col md="6">
          <b-form-group label="Street">
            <b-form-input v-model="formData.street"></b-form-input>
          </b-form-group>
        </b-col>
      </b-row>

      <b-row>
        <b-col md="3">
          <b-form-group label="City">
            <b-form-input v-model="formData.city"></b-form-input>
          </b-form-group>
        </b-col>
        <b-col md="3">
          <b-form-group label="State">
            <b-form-input v-model="formData.state"></b-form-input>
          </b-form-group>
        </b-col>
        <b-col md="3">
          <b-form-group label="Zip">
            <b-form-input v-model="formData.zip"></b-form-input>
          </b-form-group>
        </b-col>
      </b-row>
      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>

    <GmapMap
      :center="{lat:13.756331, lng:100.501762}"
      :zoom="4"
      map-type-id="roadmap"
      style="width: 100%; height: 500px; margin-top:60px;"
    >
       <div>
            <GmapMarker
            :clickable="true"
            @draggable="true"
            @click="center=m.position"
        />
    </div>
    </GmapMap>
  </div>
</template>

<script>
import axios from 'axios';
// firestore
import fireApp from '@/plugins/firebase'
const firebase = require("firebase");
require("firebase/firestore");
const db = firebase.firestore();
let id = String(id);

export default {
  name: "MapFirestore",
  data: () => ({
    savedLocations: [],
    formData: {
      street: "",
      city: "",
      state: "",
      zip: "",
    },
  }),
  
  firestore(){
      const user = fireApp.auth().currentUser;
      return {
        formData: db.collection('Profile').doc(user.uid),
      }
  },
  methods: {
    async handleFormSubmit() {
      //validate form
      if (
        !this.formData.street ||
        !this.formData.city ||
        !this.formData.state ||
        !this.formData.zip
      ) {
        alert("You must add a full address!");
        return;
      }

      //Make request
      let address = `${this.formData.street}, ${this.formData.city}, ${this.formData.state} ${this.formData.zip}`;
      let { data } = await axios.post(
        "https://us-central1-geocodeing-58a86.cloudfunctions.net/geocodeAddressAndSave",
        {
          address: address,
        }
      );

      if (data === "No Results") {
        alert("No results for address");
        return;
      }

      //massage data to fit our schema
      let obj = {
        address: data.address,
        geoPoint: {
          latitude: data.geoPoint._latitude,
          longitude: data.geoPoint._longitude,
        },
      };

      //add to saved locations to update map
      this.savedLocations.push(obj);

      //clear form
      this.formData.street = "";
      this.formData.city = "";
      this.formData.state = "";
      this.formData.zip = "";
    },
  },
};
</script>

I want to insert the data into this collection called Profile. 在此处输入图片说明 我的用户个人资料集合。

You'll need to know the UID of the user, and then update the user profile with that. If this is a secure operation (it likely is), you'll need to pass the UID in a secure way. See: Getting user info from request to Cloud Function in Firebase

Once you have the UID, you can update the profile document with something like:

db.collection('profiles').doc(uid).update({ ... });

I changed my vue code.

var user = firebase.auth().currentUser;

      db.collection('Profile').doc(user.uid).update({ 
            address: data.address,
            latitude: data.geoPoint._latitude,
            longitude: data.geoPoint._longitude,
        });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM