Hybrid(5)Customize Meteor Directly Google Login

Hybrid(5)Customize Meteor Directly Google Login

1. First of All, Find a working Release on Meteor
Currently, the release version release-1.2 is working, so I branch from that release and create release-1.2.1 on my own fork.
https://github.com/luohuazju/meteor/tree/release-1.2.1.

The only changes I made there is to support the google hint email.
https://github.com/luohuazju/meteor/commit/0897eab2bfc71036a12b6550df76e2a8ff30f19f

  var loginUrl = 'https://accounts.google.com/o/oauth2/auth?' +
    _.map(loginUrlParameters, function(value, param){
      return encodeURIComponent(param) + '=' + encodeURIComponent(value);
    }).join("&");

  if (options.loginHint) {
    loginUrl += '&login_hint=' + encodeURIComponent(options.loginHint);
  }

2. Make The Google Login working in Meteor
All the details are in sillycat-favorite project, customer-login is just user login with customer things.
customer-login-twice is login with google account twice. First time is for basic authentication, second time is for more authorizations.

Some Details and Codes Sample are as follow

First login handler
    Template.user_loggedout.events({
        "click #login": function(e, tmpl){
            // var scopes = ['https://www.googleapis.com/auth/gmail.readonly',
            //               'https://www.googleapis.com/auth/userinfo.profile'];
            var scopes = ['https://www.googleapis.com/auth/gmail.readonly'];

            Meteor.loginWithGoogle({
                requestPermissions: scopes,
                forceApprovalPrompt: false,
                loginHint: "[e-mail]",
                //userEmail: "[e-mail]",
                //loginStyle: "redirect",
                loginStyle: "popup",
                requestOfflineToken: true
            }, function(err) {
                if(err) {
                    //error handling
                    alert('error : '+ err);
                    throw new Meteor.Error(Accounts.LoginCancelledError.numericError, 'Error');
                } else {
                    //show an alert
                    //alert('logged in');
                    console.log("first login .....");
                    Session.set("previousUser", "[e-mail]");
                }
            });
        }
    });

Second Login handler
    Template.content.events({
        "click #loginOther": function(e, tmpl){
            // var scopes = ['https://www.googleapis.com/auth/gmail.readonly',
            //               'https://www.googleapis.com/auth/userinfo.profile'];
            var scopes = ['https://www.googleapis.com/auth/gmail.readonly'];

            Meteor.loginWithGoogle({
                requestPermissions: scopes,
                forceApprovalPrompt: false,
                loginHint: "[e-mail]",
                //loginStyle: "redirect",
                loginStyle: "popup",
                requestOfflineToken: true
            }, function(err) {
                //console.log("recall from login second.");
                if(err) {
                    //error handling
                    alert('error : '+ err);
                    throw new Meteor.Error(Accounts.LoginCancelledError.numericError, 'Error');
                } else {
                    //show an alert
                    //alert('logged in');
                    console.log("second login .....");
                    var user2 = Session.get("previousUser");
                    console.log("previous user = " + user2);
                }
            });
        }
    });

You can have a settings.json to including all the configuration.
{
    "google_clientId" : “xxx",
    "google_secret" : “xxx",
    "githubClientID" : “xxx",
    "githubSecret" : “xxx"
}

You also need to create a mobile-config.js file to allow the app to access the google profile icons.
App.accessRule('https://*.googleusercontent.com');

On the server side, we need to set up the things, not to write any security information to our database.
(function(){
    Meteor.startup(function () {
        Accounts.loginServiceConfiguration.remove({
            service: "google"
        });

        Accounts.loginServiceConfiguration.insert({
            service: "google",
            clientId: Meteor.settings.google_clientId,
            secret: Meteor.settings.google_secret
        });

    });

    Accounts.onCreateUser(function (options, user) {

        var accessToken = user.services.google.accessToken,
            result,
            profile;

        console.log("accessToekn=" + accessToken);

        result = Meteor.http.get("https://www.googleapis.com/oauth2/v3/userinfo", {
            headers: {"User-Agent": "Meteor/1.0"},

            params: {
                access_token: accessToken
            }
        });

        if (result.error)
            throw result.error;

        profile = _.pick(result.data,
            "name",
            "given_name",
            "family_name",
            "profile",
            "picture",
            "email",
            "email_verified",
            "birthdate",
            "gender",
            "locale",
            "hd");

        console.log(profile);
        user.profile = profile;
        console.log("try to remove all the things");
        user.services.google = {};

        return user;
    });
}());

Command to start the iOS testing on real device
> meteor run ios-device --mobile-server xxxx.meteor.com

Deploy to meteor
> meteor --settings settings.json deploy xxxx.meteor.com

Running the application from testing env
> meteor --settings settings.json run ios

3. How I install the customized meteor
> git clone https://github.com/meteor/meteor.git meteor-official

Switch to the right version
> ./meteor --help

Sometimes you need to clean your system and your project as well.
> rm -fr ~/.meteor/

> rm -fr .meteor/local/*

> rm -fr /usr/local/bin/meteor

And I need to add customized meteor directory to PATH as well.

References:
plugin
https://github.com/rapito/meteor-contextio
working branch
https://github.com/meteor/meteor/tree/release-1.2
code changes I want to make
https://github.com/meteor/meteor/pull/2790/files
mobile configuration
https://docs.meteor.com/#/full/mobileconfigjs