1

我正在嘗試使用Firebase身份驗證製作我的第一個Ionic應用程序。Firebase身份驗證錯誤

當我嘗試我的用戶進行身份驗證我得到這個錯誤:

Q {code: "auth/argument-error", message: "signInWithPopup failed: First argument "authProvider" must be a valid Auth provider."}

Here is an error print

我的index.html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user- scalable=no, width=device-width"> 
<title></title> 
<!-- bower:css --> 
<!-- endbower --> 
<!-- compiled css output --> 
<link href="css/ionic.app.css" rel="stylesheet"> 
    <link rel="stylesheet" href="css/tab-chat.css"> 
    <link rel="stylesheet" href="css/tab-dash.css">   
    <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase.js"></script> 
    <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-app.js"> </script> 
    <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase-auth.js"></script> 
<script> 
    // Initialize Firebase 
    var config = { 
    apiKey: "AIzaSyDPCScioFS49tW0rPCjQliUKh5j0Rcw72M", 
    authDomain: "skinder-858b9.firebaseapp.com", 
    databaseURL: "https://skinder-858b9.firebaseio.com", 
    storageBucket: "skinder-858b9.appspot.com", 
    messagingSenderId: "280323404236" 
    }; 
    firebase.initializeApp(config); 
</script> 


<!-- ionic/angularjs js --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 
<script src="cordova.js"></script> 
<!-- cordova script (this will be a 404 during development) --> 
<script src="lib/ngCordova/dist/ng-cordova.js"></script> 
<script src="lib/ng-cordova-oauth/ng-cordova-oauth.js"></script> 
<!--rsvp liv--> 
<script src="lib/rsvp/rsvp.js"></script> 
<!----> 

<!-- bower:js --> 
<script src="lib/firebase/firebase.js"></script> 
<script src="lib/angularfire/dist/angularfire.js"></script> 
<script src="lib/lodash/dist/lodash.compat.js"></script> 
<script src="lib/angular-google-maps/dist/angular-google-maps.js"></script> 
<script src="lib/geofire/dist/geofire.js"></script> 
<script src="lib/angular-elastic/elastic.js"></script> 
<script src="lib/rxjs/dist/rx.lite.compat.js"></script> </head> 
<script src="lib/angular-audio/app/angular.audio.js"></script> 
<script src="lib/angular-rx/dist/rx.angular.js"></script> 
<script src="lib/parse-js-sdk/lib/parse.js"></script> 
<!-- --> 
<script src="lib/angular-rx/dist/rx.angular.map"></script> 
<!-- endbower --> 

    <!-- inject:js --> 
<script src="js/app.js"></script> 
<script src="js/chat/chat_controller.js"></script> 
<script src="js/chat/message_service.js"></script> 
<script src="js/chat_post/post_controller.js"></script> 
<script src="js/chat_post/posts_service.js"></script> 
<script src="js/dash_page/dash_controller.js"></script> 
<script src="js/dash_page/get_user_service.js"></script> 
<script src="js/login/login_controller.js"></script> 
<script src="js/logout/logout_controller.js"></script> 
<script src="js/map/map_controller.js"></script> 
<script src="js/main/main_controller.js"></script> 

<!-- endinject --> 
    <!--for testing--> 
    <!--todo remove in production--> 
    <script src="js/services/state-watcher.service.js"></script> 
</head> 
<body ng-app="skinder"> 
<!-- 
    The nav bar that will be updated as we navigate between views. 
--> 
<ion-nav-bar class="bar-stable"> 
    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 
<!-- 
    The views will be rendered in the <ion-nav-view> directive below 
    Templates are in the /templates folder (but you could also 
    have templates inline in this html file if you'd like). 
--> 
<ion-nav-view></ion-nav-view> 
</body> 
</html> 

我的登錄控制器:

/*global Firebase*/ 
(function(angular) { 
'use strict'; 
    var config = { 
    apiKey: "AIzaSyDPCScioFS49tW0rPCjQliUKh5j0Rcw72M", 
    authDomain: "skinder-858b9.firebaseapp.com", 
    databaseURL: "https://skinder-858b9.firebaseio.com", 
    storageBucket: "skinder-858b9.appspot.com", 
    messagingSenderId: "280323404236" 
     }; 
    firebase.initializeApp(config); 
    angular.module('skinder') 
    .controller('LoginCtrl', ['$scope', '$firebase', '$firebaseAuth',  '$window', '$rootScope', '$state', LoginCtrl]); 
    function LoginCtrl($scope, $firebase, $firebaseAuth, FBURL, USERURL, $window, $rootScope, $state) { 
    //var fbRef = new Firebase("https://skinder-858b9.firebaseio.com"); 
    var fbRef = firebase.database().ref(); 
    //var authObj = $firebaseAuth(fbRef); 

    //var userRef = new Firebase(USERURL); 
    //todo adding checking user data 
    //var isNewUser = true; 

    var provider = new firebase.auth.FacebookAuthProvider(); 
    $scope.login = function (provider) { 
    firebase.auth().signInWithPopup(provider) 
     .then(function(authData) { 
     console.log("Logged in as:", authData); 
     $rootScope.userKey = authData.uid; 
     $state.go('tab.dash'); 
     //todo refactor this to service 
     //add new user ref to fireabase 
     userRef.child(authData.uid).set({ 
      provider: authData.provider, 
      user_name: authData.facebook.displayName, 
      picture: authData.facebook.cachedUserProfile.picture.data.url 
     }); 
     return authData; 
     }) 
     .catch(function(error) { 
     console.error("Authentication failed:", error); 
     }); 
    }; 

    //$scope.simpleLogin = $firebaseSimpleLogin(fbRef); 
    //$scope.errors = []; 
    //$scope.user = { 
    // email: '', 
    // password: '' 
    //}; 
    // 
    //$scope.login = function() { 
    // $scope.errors = []; 
    // 
    // if ($scope.user.email === '') { 
    // $scope.errors.push('Please enter your email'); 
    // } 
    // 
    // if ($scope.user.password === '') { 
    // $scope.errors.push('Please enter your password'); 
    // } 
    // 
    // if ($scope.errors.length > 0) { 
    // return; 
    // } 
    // 
    // var promise = $scope.simpleLogin.$login('password', { 
    // email: $scope.user.email, 
    // password: $scope.user.password 
    // }); 
    // 
    // promise.then(function(user) { 
    // console.log(user); 
    // $rootScope.user = user; 
    // $window.location.href = '/#/main'; 
    // }, function(error) { 
    // console.error(error); 
    // if (error.code === 'INVALID_EMAIL') { 
    //  $scope.errors.push('The email was invalid'); 
    // } 
    // if (error.code === 'INVALID_PASSWORD') { 
    //  $scope.errors.push('The password was invalid'); 
    // } 
    // }); 
    // 
    //}; 

    } 

    }(window.angular)); 

我使用的是Firebase 3.6.2以及AngularFire 2.0.1

+0

你不能傳遞正確的供應商。在你的代碼中,你正在定義$ scope.login函數之外的提供者。當登錄被調用時,提供者沒有被傳遞。嘗試記錄提供者參數以確認。 – bojeil

回答

0

您需要在您的登錄函數中定義提供者。我猜你是通過點擊某個按鈕來調用這個函數,並且你沒有傳遞有效的提供者參考。因此,而不是你在這裏做什麼:

var provider = new firebase.auth.FacebookAuthProvider(); 
$scope.login = function (provider) { 
    firebase.auth().signInWithPopup(provider) 
     .then(function(authData) { ... 

你需要做這樣的事情:

$scope.login = function() { 
    var provider = new firebase.auth.FacebookAuthProvider(); 

    firebase.auth().signInWithPopup(provider) 
     .then(function(authData) { ...