Wie man mehrere Anbieter auf Firebase mit Javascript verbindet

Question

Ich habe die Authentifizierung für E-Mail/Passwort und sozialen Login mit Facebook/Google getan, was ich brauche ist, wenn der Benutzer mit Facebook/Google anmelden, um dieses Konto auf firebase zu verknüpfen, wenn er zuvor mit Facebook/Google oder E-Mail registriert.

Ich überprüfe gerade mit dem 'auth/email-already-in-use' Code.

Ich habe den getrennten Teil gemacht, aber irgendwie kann ich den Verbindungsteil nicht tun. Mit dem Code können Sie nichts auf Firebase verlinken.

Ich benutze Vuejs für Frontend, aber das ist im Grunde alles JavaScript für diese Art der Authentifizierung. Lassen Sie mich wissen, wenn Sie eine weitere Beschreibung benötigen.

Und ich, wenn ich auf den Button Anmelden klicken, um E-Mail/Passwort: TypeError: self.googleSignin(...) is undefined

Hier ist mein Code:

<template> 
    <div class="row"> 
     <div class="display-block"> 
      <div class="row"> 
       <div class="input-field col s12"> 
        <input id="email" type="email" v-model="email" class="validate email-input-field" placeholder="Email Address"> 
        <i class="material-icons prefix">email</i> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
        <input type="password" v-model="password" class="validate password-input-field password-sign-up" placeholder="Password"> 
        <i class="material-icons prefix">lock</i> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col s12 padding-right-0"> 
        <button class="btn waves-effect waves-light btn-sign-up" v-on:click="signUp" @keyup.enter>Sign Up 
        </button> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col s12"> 
        <a href="#modal-forgot-passoword" class="modal-trigger">Forgot password ?</a> 
       </div> 
      </div> 
      <p class="light special-text-sign-up">or continue with</p> 
      <div class="social-container"> 
       <a href="#" class="facebook" v-on:click="facebookSignin"><i class="fa fa-facebook"></i>Facebook</a> 
       <a href="#" class="googleplus color-googleplus" v-on:click="googleSignin"><i class="fa fa-google-plus"></i>Google</a> 
      </div> 
     </div> 
     <!-- end display block --> 
    </div> 
</template> 
<script> 
import firebase from 'firebase' 
import axios from 'axios' 


var googleProvider = new firebase.auth.GoogleAuthProvider(); 
var facebookProvider = new firebase.auth.FacebookAuthProvider(); 
export default { 
    name: 'signUp', 
    data: function() { 
     return { 
      email: '', 
      password: '', 
      credential: {} 
     } 
    }, 
    methods: { 
     signUp: function(provider) { 
      var self = this; 
      firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(
       (user) => { 

        self.registerProfile() 
        user.sendEmailVerification() 
        Materialize.toast('Email verification sent to: ' + this.email, 5000) 
       }, 
       (err) => { 
        console.log("Error Code: " + err.code) 
        if (err.code == 'auth/email-already-in-use') { 
         var credential = firebase.auth.EmailAuthProvider.credential(self.email, self.password) 
         self.credential = credential 
          //check if google-link with facebook or if facebook link with google 
         self.googleSignin().then(function() { 
          firebase.auth().currentUser.link(self.credential).then(function(user) { 
           console.log("Account Linking success: " + user) 
          }, function(error) { 
           console.log("Error on linking accounts" + error) 
          }) 
         }) 
        } else { 
         Materialize.toast('Uppss: ' + err.message, 5000) 
         user.sendEmailVerification() 
        } 

       } 
      ); 
     }, 
     googleSignin: function() { 
      var self = this 
      firebase.auth().signInWithPopup(googleProvider).then(function(result) { 
       var token = result.credential.accessToken; 
       var user = result.user; 
      }).catch(function(error) { 
       var errorCode = error.code; 
       var errorMessage = error.message; 
       console.log(error.code) 
       console.log(error.message) 
      }); 
     }, 
     facebookSignin: function() { 
      firebase.auth().signInWithPopup(facebookProvider).then(function(result) { 
       var token = result.credential.accessToken; 
       var user = result.user; 
      }).catch(function(error) { 
       var errorCode = error.code; 
       var errorMessage = error.message; 
       console.log("error code:" + error.code) 
       console.log("error msg:" + error.message) 
      }); 
     }, 
    }, 

} 
</script> 

Answer 1

ich versuchen würde, und loszuwerden Ihre self Referenzen, wenn möglich. Hier ist ein etwas Refactoring Ansatz:

var googleProvider = new firebase.auth.GoogleAuthProvider(); 
var facebookProvider = new firebase.auth.FacebookAuthProvider(); 

var app = {} 

app.data = function() { 
    return { 
     email: '', 
     password: '', 
     credential: {} 
    }; 
}; 

app.signup = function(provider) { 
    firebase.auth().createUserWithEmailAndPassword(app.data.email, app.data.password).then(
     (user) => { 
      self.registerProfile() 
      user.sendEmailVerification() 
      Materialize.toast('Email verification sent to: ' + app.data.email, 5000) 
     }, 
     (err) => { 
      console.log("Error Code: " + err.code) 
      if (err.code == 'auth/email-already-in-use') { 
       var credential = firebase.auth.EmailAuthProvider.credential(app.data.email, app.data.password) 
       app.data.credential = credential 
       //check if google-link with facebook or if facebook link with google 
       app.googleSignin().then(function() { 
        firebase.auth().currentUser.link(app.data.credential).then(function(user) { 
         console.log("Account Linking success: " + user) 
        }, function(error) { 
         console.log("Error on linking accounts" + error) 
        }) 
       }) 
      } else { 
       Materialize.toast('Uppss: ' + err.message, 5000) 
       user.sendEmailVerification() 
      } 
     } 
    ); 
}; 

app.googleSignin = function() { 
    firebase.auth().signInWithPopup(googleProvider).then(function(result) { 
     var token = result.credential.accessToken; 
     var user = result.user; 
    }).catch(function(error) { 
     var errorCode = error.code; 
     var errorMessage = error.message; 
     console.log(error.code) 
     console.log(error.message) 
    }); 
}; 

app.facebookSignin = function() { 
    firebase.auth().signInWithPopup(facebookProvider).then(function(result) { 
     var token = result.credential.accessToken; 
     var user = result.user; 
    }).catch(function(error) { 
     var errorCode = error.code; 
     var errorMessage = error.message; 
     console.log("error code:" + error.code) 
     console.log("error msg:" + error.message) 
    }); 
}; 

export default { 
    name: 'signUp', 
    data: app.data, 
    methods: { 
     signUp: app.signup, 
     googleSignin: app.googleSignin, 
     facebookSignin: app.facebookSignin, 
    } 
} 

Dinge, die ich noch bemerken:

• Sie haben einen Anruf zu self.registerProfile() jedoch kann ich diese Funktion nicht überall in Ihrem Code sehen?
• Sie referenzieren data direkt in Ihrer Methode aber es wäre besser, wenn dies als Funktionsparameter übergeben wurde - ist das möglich?