首页 文章

如何使用javascript链接firebase上的多个提供程序

提问于
浏览
0

我通过Facebook / Google获得了电子邮件/密码和社交登录的身份验证,我需要的是,如果用户与Facebook / Google签约,如果他之前使用Facebook / Google或电子邮件注册,则将该帐户链接到firebase上 .

我目前正在检查 'auth/email-already-in-use' 代码 .

我做了分离的部分,但不知怎的,我不能做链接部分 . 随着代码提供nothings链接在Firebase上 .

我正在使用Vuejs作为前端,但这基本上都是用于处理这种身份验证的JavaScript . 如果您需要更多说明,请与我们联系 .

当我点击电子邮件/密码的注册按钮时,我得到: TypeError: self.googleSignin(...) is undefined

这是我的代码:

<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>

1 回答

  • 0

    如果可能的话,我会尽力摆脱你的 self 引用 . 这是一个有点重构的方法:

    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,
        }
    }
    

    我还注意到的事情:

    • 你有一个 self.registerProfile() 的电话,但我在你的代码中的任何地方都看不到这个功能?

    • 您直接在 signup 方法中引用 data 但是如果将其作为函数参数传入会更好 - 这可能吗?

相关问题