AngularJS - 使用firebase和GoogleAuth显示用户名和图像

时间:2016-06-18 13:50:08

标签: angularjs ionic-framework firebase firebase-authentication

我想创建一个显示用户名和图片的个人资料页面。 但是现在我一直在努力使用用户名。

显示用户名和图片的个人资料页面,但现在是googAuth的用户名。

有谁知道怎么做?

$scope.login = function()
{
 var ref = new          Firebase("https://fire.firebaseio.com");
      var authData = ref.getAuth();

      var userId = authData.uid;
      var name = authData[authData.provider].displayName;

     ref.authWithOAuthPopup("google", function(error, authData)
     {
      $timeout(function() {

         $scope.username = name;
         $scope.userid = userId;
          console.log( $scope.username );
          console.log( $scope.userid );

      });



     if (error)
      {
             console.log("Login Failed!", error);
      }
     else
     {

        $state.go('tabsController.pendingTasks');
        ref.child("users").child(authData.uid).once("value",function(snapshot)
        {
         var ifExists = snapshot.exists();

          if(ifExists)
           {
              console.log("user already exists");
           }
           else
            {
              ref.child("users").child(authData.uid).push({id:userId,name:name
            }

            );
          }
        });

      }
  },
  {remember: "sessionOnly",
      scope: "email"});
}

})

这似乎不起作用,因为用户名不会出现在我的离子视图中。 HTML部分如下。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js</script>
<ion-view title="Reminders" id="page7">
 <ion-content padding="true" ng-controller="loginCtrl" class="hasheader">
   <div class="list card">
     <div class="item item-divider">{{username}}</span></div>
        <div class="item item-body">
            <form class="list">
                <ion-checkbox>{{username}}</ion-checkbox>
             </form>
             </div>
            </div>

        </ion-content>
    </ion-view>

谢谢!

1 个答案:

答案 0 :(得分:0)

当用户名尚不可用时,您正在查找该用户名。这会更好:

var userId;
var name;

ref.authWithOAuthPopup("google", function(error, authData)
{
    userId = authData.uid;
    name = authData[authData.provider].displayName;
    $timeout(function() {
        $scope.username = name;
        $scope.userid = userId;
        console.log( $scope.username );
        console.log( $scope.userid );
    });
}