【发布时间】：2017-06-27 12:48:48
【问题描述】：
我正在使用 Firebase 2.x.x 通过我的 AngularJS 应用程序保存数据。 我一直在将我的应用程序迁移到新的控制台。身份验证失败，出现以下错误：
在 console.firebase.google.com 创建的项目必须使用 firebase.google.com/docs/auth/ 提供的新 Firebase 身份验证 SDK。
所以我一直在查找以下resources。
看来我需要重构以下文件中的代码：
-
index.html
-
app.js
-
以及以下 auth 文件夹中的 2 个文件（auth.ctr.js 和 auth.tpl.html）：
由于我使用 Firebase 2.x.x 在后端持久化数据，因此我已将 index.html 重构如下：
<!-- 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>
以下是我的 app.js 文件的 sn-p 与路由。我需要在这里重构什么以使其符合 Firebase 3.x.x 的要求？
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();
}
]
}
})
以下是我的 auth.ctr.js 文件：
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;
// ...
});
}
});
以下是我的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();
});
})();
在这个阶段，当我运行应用程序时，我收到以下错误：
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
也许它要求太多，但我非常感谢有关如何重构我的代码以便我能够正确进行身份验证的指导。
【问题讨论】：
标签： angularjs authentication firebase firebase-authentication