angularfire无法读取属性的Facebook - 如何继续使用的authData整个应用程序 [英] angularfire cannot read property facebook - how do i keep using authData throughout app

查看：233
本文介绍了angularfire无法读取属性的Facebook - 如何继续使用的authData整个应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

I'm使用离子型框架和火力上的Andr​​oid游戏的工作。

我的计划是让用户登录使用具有火力Facebook登录，在此之后，我想对游戏数据保存到用户数据库的关键。

的第一部分的工作。该脚本使得基于用户的Facebook的详细信息的数据库阵列。但问题是，这是作出后，我似乎无法让角变化的任何数据库中的数据。这似乎是的authData卡在登录功能...

有没有一种方法来保持的authData在不同的控制器和功能使用？

  app.factory（验证功能（$ firebaseAuth）{
    VAR FIREB =新的火力地堡（https://name.firebaseio.com）;
    返回$ firebaseAuth（FIREB）;
}）;app.controller（'主屏幕'，函数（$范围，验证，$ firebaseArray）{
    验证。$ onAuth（功能（的authData）{
        $ scope.authData =的authData;
    }）;
    VAR用户=新的火力地堡（https://name.firebaseio.com/users/）;
    //创建一个同步的数组
    $ scope.users = $ firebaseArray（用户）;
    $ scope.facebooklogin =功能（）{        验证。$ authWithOAuthPopup（脸谱），然后（功能（的authData）{            users.child（authData.facebook.cachedUserProfile.id）.SET（{
                用户名：authData.facebook.displayName，
                ID：authData.facebook.cachedUserProfile.id，
                性别：authData.facebook.cachedUserProfile.gender，
                电子邮件：authData.facebook.email，
                1级
            }）;        }）赶上（功能（错误）{        }）;
    }
    $ scope.facebooklogout =功能（）{
        。验证$ UNAUTH（）;
    }
    $ scope.changeLVL =功能（的authData）{
        users.child（authData.facebook.cachedUserProfile.id）.SET（{
            级别：2
        }）;
    }
}）;

这是它会在火力点的数据结构

 用户
   998995300163718
     电子邮件：Name@email.com
     性别：男
     ID：998995300163718
     用户名：名字姓氏
     1级

和尝试编辑我得到这个错误...（使用changelevel功能）后，

 类型错误：无法读取的未定义的属性的Facebook
    。在范围$ scope.changeLVL（HTTP：//本地主机：8100 / JS / controllers.js：35：23）
    在FN（;匿名＆gt;对于＆LT的eval（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：21977：15），LT;匿名＆GT;：4：218）
    在http：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：57606：9
    。在$范围的eval（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：24678：28）
    在适用范围$适用。（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：24777：23）
    在HTMLButtonElement＆LT;＆匿名GT; （HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：57605：13）
    在HTMLButtonElement.eventHandler（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：12103：21）
    在triggerMouseEvent（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：2870：7）
    在tapClick（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：2859：3）
    在HTMLDocument.tapMouseUp（HTTP：//本地主机：8100 / lib目录/离子/ JS / ionic.bundle.js：2932：5）


解决方案

主要的问题是你依靠 cachedUserProfile.gender 属性存在。这是不能保证在那里为每个用户。你需要找到一个备用，以避免错误。

让我们通过注入通过解析（）方法路由器的用户简化。不介意code的结构，它由角风格指南（我的preferred写角应用程序）的方式。

  angular.module（应用程序，[火力点]）
  的.config（ApplicationConfig）
  .factory（验证，验证）
  .controller（主屏幕，HomeController的）;功能验证（）{
  VAR FIREB =新的火力地堡（https://name.firebaseio.com）;
  返回$ firebaseAuth（FIREB）;
}功能ApplicationConfig（$ stateProvider）{
  $ stateProvider
    .STATE（家，{
      控制器：主屏幕，
      templateUrl：意见/ home.html做为
    }）
    .STATE（配置文件，{
      控制器：ProfileScreen
      templateUrl：意见/ profile.html
      解析：{
        的currentUser：功能（验证）{
          //这将注入经过验证的用户到控制器
          返回验证$ waitForAuth（）。
        }
      }
    }）;
}功能的HomeController（$范围，验证，$州）{  $ scope.googlelogin =功能（）{    验证。$ authWithOAuthPopup（谷歌）。然后（功能（的authData）{      users.child（$ scope.authData.google.cachedUserProfile.id）.SET（{
        用户名：$ scope.authData.google.cachedUserProfile.id，
        性别：$ scope.authData.google.cachedUserProfile.gender || 
      }）;      $ state.go（app.next）;    }）;
  }}功能ProfileController可（的currentUser）{
  的console.log（currentUser.facebook）; //从路由器注入
}

这种方法的好处是，你不必为您在控制器认证用户。如果用户被注入，你知道你有一个身份验证的用户。

查看 AngularFire文档了解更多信息。

I´m working on an android game using ionic framework and firebase.

My plan is to let users login using facebook login with firebase, after this i want to save the game data to the users database key.

The first part is working. the script makes an database array based on the users facebook details. but the problem is after this is made, i cant seem to let angular change any database data. It seems like the authData is stuck in the login function...

Is there a way to keep the authdata for use in different controllers and functions?

app.factory("Auth", function($firebaseAuth) {
    var FIREB = new Firebase("https://name.firebaseio.com");
    return $firebaseAuth(FIREB);
});

app.controller('HomeScreen', function($scope,  Auth, $firebaseArray) {
    Auth.$onAuth(function(authData){
        $scope.authData = authData;
    });
    var users = new Firebase("https://name.firebaseio.com/users/");
    // create a synchronized array
    $scope.users = $firebaseArray(users);
    $scope.facebooklogin = function() {

        Auth.$authWithOAuthPopup("facebook").then(function(authData){

            users.child(authData.facebook.cachedUserProfile.id).set({
                Username: authData.facebook.displayName,
                Id: authData.facebook.cachedUserProfile.id,
                Gender: authData.facebook.cachedUserProfile.gender,
                Email: authData.facebook.email,
                level: "1"
            });

        }).catch(function(error){

        });
    }
    $scope.facebooklogout = function() {
        Auth.$unauth();
    }
    $scope.changeLVL = function(authData) {
        users.child(authData.facebook.cachedUserProfile.id).set({
            level: "2"
        });
    }


});

And this is the datastructure it creates in firebase 

 users
   998995300163718
     Email: "Name@email.com"
     Gender: "male"
     Id:  "998995300163718"
     Username: "name lastname" 
     level: "1"

and after trying to edit i get this error... (using the changelevel function)

TypeError: Cannot read property 'facebook' of undefined
    at Scope.$scope.changeLVL (http://localhost:8100/js/controllers.js:35:23)
    at fn (eval at <anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21977:15), <anonymous>:4:218)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:57606:9
    at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24678:28)
    at Scope.$apply (http://localhost:8100/lib/ionic/js/ionic.bundle.js:24777:23)
    at HTMLButtonElement.<anonymous> (http://localhost:8100/lib/ionic/js/ionic.bundle.js:57605:13)
    at HTMLButtonElement.eventHandler (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12103:21)
    at triggerMouseEvent (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2870:7)
    at tapClick (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2859:3)
    at HTMLDocument.tapMouseUp (http://localhost:8100/lib/ionic/js/ionic.bundle.js:2932:5)

解决方案

The main issue is you're relying on the cachedUserProfile.gender property to exist. This isn't guaranteed to be there for every user. You'll need to find a fallback to avoid an error.

Let's simplify by injecting the user via the resolve() method in the router. Don't mind the structure of the code, it's from the Angular Styleguide (my preferred way of writing Angular apps).

angular.module("app", ["firebase"])
  .config(ApplicationConfig)
  .factory("Auth", Auth)
  .controller("HomeScreen", HomeController);

function Auth() {
  var FIREB = new Firebase("https://name.firebaseio.com");
  return $firebaseAuth(FIREB);
}

function ApplicationConfig($stateProvider) {
  $stateProvider
    .state("home", {
      controller: "HomeScreen",
      templateUrl: "views/home.html"
    })
    .state("profile", {
      controller: "ProfileScreen",
      templateUrl: "views/profile.html",
      resolve: {
        currentUser: function(Auth) {
          // This will inject the authenticated user into the controller
          return Auth.$waitForAuth(); 
        }
      }
    });
}

function HomeController($scope, Auth, $state) {

  $scope.googlelogin = function() {

    Auth.$authWithOAuthPopup("google").then(function(authData) {

      users.child($scope.authData.google.cachedUserProfile.id).set({
        Username: $scope.authData.google.cachedUserProfile.id,
        Gender: $scope.authData.google.cachedUserProfile.gender || ""
      });

      $state.go("app.next");

    });
  }

}

function ProfileController(currentUser) {
  console.log(currentUser.facebook); // injected from router
}

The benefit of this approach is that you don't have to check for authenticated users in the controller. If the user is injected, you know you have an authenticated user.

Check out the AngularFire docs for more information.

这篇关于angularfire无法读取属性的Facebook - 如何继续使用的authData整个应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆