问题
I am using Firebase 2.x.x to persist data with my AngularJS application. I have been migrating my app to the new console. The authentication failed with the following error:
Projects created at console.firebase.google.com must use the new Firebase Authentication SDKs available from firebase.google.com/docs/auth/.
So I have been looking up the following resources.
And it seems I will need to refactor the code in the following files:
- index.html
- app.js
AND the 2 files (auth.ctr.js and auth.tpl.html) in the following auth folder:
Since I am using Firebase 2.x.x for persisting data in the backend, I have refactored the index.html as follows:
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "key",
authDomain: "xxx.firebaseapp.com",
databaseURL: "xxx.firebaseio.com",
storageBucket: "xxx.appspot.com",
messagingSenderId: "id"
};
firebase.initializeApp(config);
</script>
The following is a snippet of my app.js file with the routing. What would I need to refactor in here so that it aligns with Firebase 3.x.x requirements?
angular
.module('ngClassifieds', ['ngMaterial', 'ui.router', 'firebase'])
.run(["$rootScope", "$state", function ($rootScope, $state) {
$rootScope.$on("$stateChangeError", function (event, toState, toParams, fromState, fromParams, error) {
// We can catch the error thrown when the $requireAuth promise is rejected
// and redirect the user back to the home page
if (error === "AUTH_REQUIRED") {
$state.go("auth");
}
});
}])
.config(function ($mdThemingProvider, $stateProvider, $urlRouterProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('blue-grey')
.accentPalette('orange')
//.backgroundPalette('blue-grey');
$urlRouterProvider.otherwise('/auth');
$stateProvider
.state('auth', {
url : '/auth',
templateUrl : 'components/auth/auth.tpl.html',
controller : 'authCtrl',
})
$stateProvider
.state('classifieds', {
url : '/notes',
controller : 'classifiedsCtrl',
resolve : {
// controller will not be loaded until $requireAuth resolves
// Auth refers to our $firebaseAuth wrapper in the example above
"currentAuth" : ["auth", function (auth) {
// $requireAuth returns a promise so the resolve waits for it to complete
// If the promise is rejected, it will throw a $stateChangeError (see above)
return auth.ref.$requireAuth();
}
]
}
})
The following is my auth.ctr.js file:
angular
.module('ngClassifieds')
.controller('authCtrl', function ($scope, auth, $state) {
$scope.login = function () {
/*auth.ref.$authWithPassword({
email : $scope.email,
password : $scope.password
}).then(function (data) {
$scope.email = null;
$scope.password = null;
$state.go('classifieds');
}).catch (function (error) {
console.log(error);
});*/
firebase.auth().signInWithEmailAndPassword(email, password).catch (function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
}
});
The following is my auth.fac.js:
(function () {
"use strict";
angular
.module('ngClassifieds')
.factory('auth', function ($firebaseAuth) {
/*var ref = new Firebase('https://xxx.firebaseio.com/');
return {
ref : $firebaseAuth(ref),
user : ref.getAuth()
}*/
var config = {
apiKey : "xxx",
authDomain : "xxx.firebaseapp.com",
databaseURL : "xxx.firebaseio.com"
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();
});
})();
And as of this stage, when I run the app I am getting the following error:
FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app).
at Z (https://www.gstatic.com/firebasejs/3.6.9/firebase.js:50:364)
at Object.initializeApp (https://www.gstatic.com/firebasejs/3.6.9/firebase.js:49:29)
at Object.<anonymous> (http://localhost:8080/components/auth/auth.fac.js:23:14)
at Object.invoke (http://localhost:8080/node_modules/angular/angular.js:4604:19)
at Object.enforcedReturnValue [as $get] (http://localhost:8080/node_modules/angular/angular.js:4443:37)
at Object.invoke (http://localhost:8080/node_modules/angular/angular.js:4604:19)
at http://localhost:8080/node_modules/angular/angular.js:4403:37
at getService (http://localhost:8080/node_modules/angular/angular.js:4550:39)
at injectionArgs (http://localhost:8080/node_modules/angular/angular.js:4574:58)
at Object.instantiate (http://localhost:8080/node_modules/angular/angular.js:4616:18) <ui-view class="ng-scope" data-ng-animate="1">
(anonymous) @ angular.js:13236
(anonymous) @ angular.js:9965
invokeLinkFn @ angular.js:9494
nodeLinkFn @ angular.js:8978
compositeLinkFn @ angular.js:8226
publicLinkFn @ angular.js:8106
(anonymous) @ angular.js:8447
updateView @ angular-ui-router.js:4021
(anonymous) @ angular-ui-router.js:3959
$broadcast @ angular.js:17143
$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3352
processQueue @ angular.js:15552
(anonymous) @ angular.js:15568
$eval @ angular.js:16820
$digest @ angular.js:16636
$apply @ angular.js:16928
done @ angular.js:11266
completeRequest @ angular.js:11464
requestLoaded @ angular.js:11405
Perhaps it's asking for too much, but I'd really appreciate the guidance on how to refactor my code so that I can get the authentication right.
回答1:
If you import a project that was created on firebase.com into the new console at firebase.google.com, any code will remain working.
But if you create a new project at firebase.google.com, legacy authentication code will indeed not work and you will have to update your code.
For apps using the regular Firebase JavaScript SDK, the upgrade instructions are in the support guides on the Firebase site.
For an AngularFire 1.x app you will need to:
Update your Firebase JavaScript SDK to a version 3.x:
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>Update your AngularFire to a version 2.x
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>Follow the instructions for upgrading your code to AngularFire 2.x.
来源：https://stackoverflow.com/questions/42137906/authentication-issue-with-migrating-angularjs-application-and-firebase-2-x-x-to