How to make wordpress.com login connect work with meteor

I’m following these tutorial:

https://github.com/Automattic/wpcom-connect-examples/blob/master/express.js/app.js

So I setup Meteor.loginWithWordpresscom with the following code:

    Accounts.oauth.registerService('wordpresscom');
    
    if (Meteor.isClient) {
      Meteor.loginWithWordpresscom = function(options, callback) {
        // support a callback without options
        if (! callback && typeof options === "function") {
          callback = options;
          options = null;
        }
    
        var credentialRequestCompleteCallback = Accounts.oauth.credentialRequestCompleteHandler(callback);
        Wordpresscom.requestCredential(options, credentialRequestCompleteCallback);
      };
    } else {
      Accounts.addAutopublishFields({
        forLoggedInUser: ['services.wordpresscom'],
        forOtherUsers: ['services.wordpresscom.username']
      });
    }

And then I request credential with the following code:

    Wordpresscom = {};
    
    Wordpresscom.requestCredential = function (options, credentialRequestCompleteCallback) {
      if (!credentialRequestCompleteCallback && typeof options === 'function') {
        credentialRequestCompleteCallback = options;
        options = {};
      }
    
      var config = ServiceConfiguration.configurations.findOne({service: 'wordpresscom'});
      if (!config) {
        credentialRequestCompleteCallback && credentialRequestCompleteCallback(
          new ServiceConfiguration.ConfigError());
        return;
      }
      var credentialToken = Random.secret();
    
      var loginStyle = OAuth._loginStyle('wordpresscom', config, options);
      
      var loginUrl =
        'https://public-api.wordpress.com/oauth2/authorize' +
        '?client_id=' + config.clientId +
        '&redirect_uri=http://localhost:3000/connected' +
        '&response_type=token' +
        '&grant_type=authorization_code' +
        '&scope=global'
    
      OAuth.launchLogin({
        loginService: "wordpresscom",
        loginStyle: loginStyle,
        loginUrl: loginUrl,
        credentialRequestCompleteCallback: credentialRequestCompleteCallback,
        credentialToken: credentialToken,
        popupOptions: {width: 900, height: 450}
      });
    };

At the server, I request accessToken and identity with following code:

    Wordpresscom = {};
    
    OAuth.registerService('wordpresscom', 2, null, function(query) {
    
      var accessToken = getAccessToken(query);
      var identity = getIdentity(accessToken);
    
      return {
        serviceData: {
          id: identity.ID,
          accessToken: OAuth.sealSecret(accessToken),
          email: identity.email,
          username: identity.username,
          displayName: identity.display_name,
          avatar: identity.avatar_URL
        },
        options: {profile: {
            name: identity.display_name,
            displayName: identity.display_name,
            avatar: identity.avatar_URL
        }}
      };
    });
        
    var getAccessToken = function (query) {
      var config = ServiceConfiguration.configurations.findOne({service: 'wordpresscom'});
      if (!config)
        throw new ServiceConfiguration.ConfigError();
    
      var response;
      try {
        response = HTTP.post(
          "https://public-api.wordpress.com/oauth2/token", {
            params: {
              code: query.code,
              client_id: config.clientId,
              client_secret: OAuth.openSecret(config.secret),
              redirect_uri: 'http://localhost:3000/connected',
              grant_type: 'authorization_code'
            }
          });
      } catch (err) {
        throw _.extend(new Error("Failed to complete OAuth handshake with WordPress.com. " + err.message),
                       {response: err.response});
      }
      if (response.data.error) { // if the http response was a json object with an error attribute
        throw new Error("Failed to complete OAuth handshake with WordPress.com. " + response.data.error);
      } else {
        console.log('getAccessToken');
        return response.data.access_token;
      }
    };
    
    var getIdentity = function (accessToken) {
      console.log('getIdentity');
      try {
        return HTTP.get(
          "https://public-api.wordpress.com/rest/v1/me", {
            headers: {
                /*"User-Agent": userAgent,*/
                "Authorization": 'Bearer ' + accessToken
            },
            params: {access_token: accessToken}
          }).data;
      } catch (err) {
        throw _.extend(new Error("Failed to fetch identity from WordPress.com. " + err.message),
                       {response: err.response});
      }
    };
    
    Wordpresscom.retrieveCredential = function(credentialToken, credentialSecret) {
      return OAuth.retrieveCredential(credentialToken, credentialSecret);
    };

When I fire Meteor.loginWithWordpresscom popup window show up to ask user whether to approve or deny my app with this link http://localhost:3000/connected?code=a8kiRGwRPC

I get code a8kiRGwRPC to request access_token

After I approve, it redirect to http://localhost:3000/connected#access_token=w%5EQ7CFcvZQx3t%28OjspIs84v13BsbyUGROzrYh3%23aiLJQ%25NB%2AZ7jMjNX2%29m7%23t5J4&expires_in=1209600&token_type=bearer&site_id=0

Just like that. No new user stored in Meteor.users database

Any help would be appreciated

Thanks

Note: If it’s work, I’ll make this a package

3 Likes

Hey @prime! Did you solved this issue? I will start working on this tomorrow for our company.