Firebase Angular OAuth with Google email scope, auth.$authWithOAuthPopup vs ref.authWithOAuthPopup

问题

I'm successfully using Firebase's angular library to auth users against Facebook and Google, but I'm having troubling retrieving the user's email when using firebaseAuth's $authWithOAuthPopup.

Here's my login function.

var ref = new Firebase(FIREBASE_URL);
var auth = $firebaseAuth(ref);      
loginGoogle: function () {
    console.log('Logging in Google.');
    return auth.$authWithOAuthPopup('google', function(error, user){
      //TODO: Handle Failed login better
      console.log('Google login failed');
      console.log(error);
    },{
      scope: 'email'
    });
  };

This will pop up the google auth window and log in successfully. But, in the access permissions window, it doesn't request the 'email' scope access.

If I use ref.authWinOAuthPopup(...) instead of auth.$authWithOAithPopup(...) it does properly request the email perms, and delivers that info after auth.

Am I doing something wrong here? Or, is it an Angularfire bug that I should be reporting?

Angularfire v0.9.2.

回答1:

After digging in further I found that the $firebaseAuth.$authWithOAuthPopup takes only two arguments (provider and options), whereas the Firebase.authWithOAuthPopup takes three (provider, onComplete callback, options). So, using refactoring to use the returned promise instead of passing in a callback function fixed the issue.

回答2:

To be more clear, I'd like to add my snippets to show how to pass the e-mail scope to google oAuth.

As you mentioned, if you're using the promise to do the authentication instead of the callback you can pass the option for the email scope to the auth. call as second parameter and then the e-mail address will be available in the payload.

Please have a look at the following snippet:

$scope.loginGoogle = function() {
    Auth.$authWithOAuthPopup("google", {scope: ['email']}).then(function(authData) {
        // handle authData in onAuth handler in app.js in run method with Auth.$onAuth(function(authData) { ... });
        console.log("Authenticated successfully with payload:", authData);
        $location.path(REDIRECT_ROUTE);
    })
    .catch(function(err) {
        $scope.err = errMessage(err);
    });
};

function errMessage(err) {
    var msg = "";
  //return angular.isObject(err) && err.code? err.code : err + '';
  switch (err.code) {
      case "INVALID_EMAIL":
      case "INVALID_PASSWORD":
      case "INVALID_USER":
        console.log("The specified user account email is invalid.");
            msg = "E-mail or password is invalid.";
        break;
    /*
      case "INVALID_PASSWORD":
        console.log("The specified user account password is incorrect.");
        break;
      case "INVALID_USER":
        console.log("The specified user account does not exist.");
        break;
      default:
        // password or email empty;
        console.log("Error logging user in:", err);*/
    };
    return msg;
}

angular.module('firebase.auth', ['firebase', 'firebase.utils'])
.factory('Auth', ['$firebaseAuth', 'fbutil', function($firebaseAuth, fbutil) {
    return $firebaseAuth(fbutil.ref());
 }]);

回答3:

This is what I did and it worked for me

.config(function ($firebaseRefProvider) { $firebaseRefProvider.registerUrl('https://****.firebaseio.com/'); })

Then in controller

loginWithGoogle: function(){
    var ref = $firebaseRef.default;
    ref.authWithOAuthPopup("google", function(error, authData) {

      if (error) {
        ...
      } else {
        console.log(authData.google.email);

      }
    },{scope: 'email'});
  }

来源：https://stackoverflow.com/questions/28590610/firebase-angular-oauth-with-google-email-scope-auth-authwithoauthpopup-vs-ref

标签

angularjs

oauth

angularfire