Google Connect Magento extension

Since pretty much everyone now days has Google account, wouldn’t it be nice if customers could register or create an account at your store using their Google account credentials? I think it would, that’s why I’ve created Google Connect extension for Magento. In this article I’ll present simple instructions on how to install this free extension, and configure it for usage by creating Google API Client ID.
Introduction
Inchoo Google Connect is designed to integrate into Magento to allow you customers to easily login using their Google account. After you install this extension, most probably first thing you’ll notice is that customers are given access to Connect button at your Login or Create Account page:
By proceeding with Google Connect process, first time customer will automatically get an account at your store, and be able to login with his Google credentials at any time. Customer will also receive new account email as if he created account manually, and will be able to login using his regular store account credentials if that’s what he desires. Customer’s store account will remain connected to his Google account until he revokes permissions using Google interface, or disconnects his store account from Google account using Inchoo Google Connect logged in customers interface:
Customers will also be able to login using their Google account using Connect button at the first step of checkout process:
Please note that this Magento extension has been designed to work with default Magento theme, and if your theme has been heavily modified you might need to tweak Inchoo Google Connect code to use it to it’s full potential. Also note that this extension has been created for Magento Community Edition 1.7.0.2, but I’ll do my best to release promptly updates for future Magento Community Edition versions.
Installation Instructions
First step is to download Inchoo Google Connect Magento extension zip package, and extract contents of directory it provides into your Magento installation root. If you’re a developer you would most probably be interested into the fact that this extension is also available from its GitHub repository page. Now you can log into your Magento admin area and go to System -> Configuration -> Customers -> Customers Configuration. If you find tab named Google Connect Options there, Inchoo Google Connect has been successfully installed. Before your customers can log into your store using their Google account credentials, you must configure Inchoo Google Connect by creating Google API Client ID.
Creating Google API Client ID
After you finish this paragraph, you will have two pieces of data required for Inchoo Google Connect operation, namely Google API Client ID and Google API Client Secret. First log into your google account, and then go to Google APIs Console. There you need to create project for your web store, and obtain required information for configuring Inchoo Google Connect on your Magento installation. During the course of creating Google API Client ID you will need to properly provide Google APIs Console with the following information:
- Authorized Redirect URIs:
http://www.yourstore.com/googleconnect/index/connect/
- Authorized JavaScript Origins:
http://www.yourstore.com
Don’t forget to replace http://www.yourstore.com
with your store URI. Here’s gallery of screenshots that should securely guide you trough this process:
Configuring Google Connect Options
After you have obtained your Google API Client ID and Google API Client Secret, you can once again go to your Magento admin area and go to System -> Configuration -> Customers -> Customers Configuration -> Google Connect options. There you should enable Inchoo Google Connect and enter required data into an appropriate input fields:
All that’s left to do now is click Save Config button at the top right of your page and you’re good to go.
Where to go next?
If you are a developer, you’ll definitely want to checkout Inchoo Google Connect GitHub repository page. On the other hand if encounter any difficulties with Inchoo Google Connect, or have an idea for a feature, please leave your comment here and I’ll will respond as soon as possible.
60 comments
Hi
The plugin is working fine, but when register user give the username and password in cart page, the url redirecting to login page again, please help me to fix this issue.
I checked this issues is because of your plugin only.
after I uploaded the files to my magento root, i can’t open the site. it said “Service Temporarily Unavailable”
Hi,
I want to add social login feature icons within our some custom section instead of using default styling inchoo.
Example: take 2 social icons facebook and twitter and use them anywhere else according to my design.
Login in not working in HTTPS,Kindly help me
can any one please tell me how to take facebook login button on mini,login.phtml
Hi Marko:
I have a problem with the module. Whe use the Facebook Login, the Facebook page is redirecting to the login page again.
I’m using
Magento 1.9 CE
PHP 5.6
Apache 2.4
Bye!
Hello Patricio,
For a quick fix you may navigate to app/code/community/Inchoo/SocialConnect/controllers/FacebookController.php
Comment the following lines in _connectCallback() method
if(!$state || $state != Mage::getSingleton(‘core/session’)->getFacebookCsrf()) {
return;
}
You may also try the same for Google and Twitter login.
Problem. I have installed this extension, But for me after success it redirects to the login page instead of account page. When i hit refresh then it will show success message and redirects to the account page. Any idea about this? Only in chrome and Opera. Firefox and Internet Explorer are fine. Havent checked Safari yet.
Here is my Login Page:
http://sellezza.com/customer/account/login/
I installed the 0.3.5 version in Magento 1.8.0, FaceBook works perfectly, but Google shows this error:
400. That’s an error.
Error: redirect_uri_mismatch
Application: Photocolor
You can email the developer of this application at: sergiomordente@gmail.com
The redirect URI in the request: http://photocolor.com.br/socialconnect/google/connect/ did not match the registered redirect URI.
Learn more
Request Details
access_type = offline
approval_prompt = auto
scope = https: //www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email
response_type code =
redirect_uri = http: //photocolor.com.br/socialconnect/google/connect/
state = d9a074864c47d6dfb05086136c9230bb client_id = 540659431695-8a11i9nf9thumnq7472julj010t6lem7.
This URI appears in the Magento admin, and I copied and pasted it into the Google project configuration.
Use the template Grayscale, should make any changes to the installation of this module?
Thanks for any suggestion
Sérgio
It can be URL mismatch between your site’s actual URL and the redirect URL you set in Google Developer Console. Your actual site’s URL seems to be without ‘www’ but your redirect URI in developer console can be with ‘www’. Or, an absence of slash at the end of the redirect URI also can cause the error.
Here is a step-by-step answer to edit the redirect URL in Google Developer Console: http://stackoverflow.com/a/34462452/327862
hwo to get FB and google button in any place??
Am using this below code for custom buttom and it is working for me
$cpBlock = $this->getLayout()->getBlockSingleton(‘Inchoo_GoogleConnect_Block_Button’);
<a class="btn-g btn-default-g google" href="_getButtonUrl(); ?>”> Sign In with Google+
excellent work 😉 it is working fine
How to add new Google + button in header
Hello I am having an issue with the installation. I am using a customized template. I copied the files that would typically go into the default community edition folders into the new theme folders, but the extension tabs do not appear in the system settings. What am I doing wrong?
Excellent plugin first of all. Thanks for saving hours/days of efforts. However, after setting up everything correctly social login works fine, however, after redirection to website the user is still not logged in..Any suggestion? I am using a custom theme here..
Hi,
I’d go with this extension’s successor, extension which is actively developed Inchoo Social Connect. It has all features of Google Connect extension, plus Facebook, LinkedIn and Twitter support.
Good luck!
It is actually the social connect (Inchoo_SocialConnect-0.2.3). I forgot to mention, Facebook works fine. For google, everything is successful except that user is not loggedIn in magneto store ( I guess there could be some OAuth Error but I am not sure). Its just wierd since it successfully verifies the user account and should actually create the same in magento store but don’t know what is wrong. Do you have any suggestion here.
Hello,
in this case, 0.2.3 version is over year old and Google API changes very rapidly. You can test with latest 0.3.5 version, and see what happens.
https://github.com/Marko-M/Inchoo_SocialConnect/archive/0.3.5.zip
Cheers!
Thanks for the reply. However, still pretty much the same. A successful login on google but no user created in magento. Pretty strange thing. Just to mention, I just did a simple overwrite on the previous version and have not changed anything. Could that be the reason? or is it something different?
So, debugging it further, I synchronised with the default theme (I was using a custom theme before) and I see the following error after redirection : “Unspecified OAuth error occurred.”
Ok, I am sorry for the trouble..but can you suggest something? Only the google login ain’t working with an unexpected oAuth Error. I am not able to figure out the reason.
It is not working in magento 1.9 any ideas ?
Tried on 1.9.2.3, works like a charm
Perfect works,,,Thanks
how to make social login link on checkout page sir .
I have integrated the google connect on my staging server it is working fine there, but when I moved the code to my live server the code is not functioning.
The live server is on https
hi , the code is working fine ,
how to make the button appear in login pop page . Kindly give some hints or tips
First off… this plugin is great! However, every time I log in I am re-directed to the Google API authorization page. In our case, it is confirming the user wants to allow access to basic account info and email address. Certainly makes sense that a first time user would see this, but how come I get it every time I log out and then log back in? Thanks!
Hi, is it possible to add the Connect with Google button to the top menu as well (into top links using top.links refrerence or just into header.phtl template)?
I tried using the gethchildelement tag in header.phtml but with no luck.
Also I don’t have a link rel to use in the .xml file to add the link to the top links.
Best regards,
Verner
I have done this using
1. add in inchoo_googleconnect.xml file
in default tag.
2. Call in other phtml file (in any other phml file).
getLayout()->createBlock(‘core/template’)->setTemplate(‘inchoo/googleconnect/login.phtml’)->toHtml(); ?>
3. Edit login.phtml
replace
getChildHtml(‘inchoo_googleconnect_login_button’); ?>
with
getLayout()->getBlock(‘inchoo_googleconnect_login_button’)->toHtml(); ?>
May be it will be helpfull.
Hi,
Why this extension redirects to customer account from onepage checkout when logging.
Hello,
this shouldn’t be the case. I suggest you try Social Connect Magento extension because it contains all features of Google Social connect + Facebook & Twitter support. It also contains more intelligent after login redirect code amongst other improvements.
Regards
Marko
Hi,
I had tried to implement this in Magento 1.5, but it give an error “Invalid attribute name: inchoo_googleconnect_id”.
Whereas it is working in magento 1.7.
Please help me to figure it out, Because i have to implement it into Magento 1.5
Thanks in advance!!
@Adam
Hi,
first thing I would usually recommend is using Social Connect Magento extension that has all features of Google Connect + Facebook and Twitter connect if you wish to use it. But in this case I would really advise you to upgrade to latest Magento CE because install script both extensions use isn’t compatible with older Magento versions.
Regards
Marko
This definitely will be an added plus to existing magento store owners 😀
I have integrated your module but error remains same.
message: ‘redirect_uri_mismatch’
@priti
Hello, you should double check redirect URI you have used when creating Google Project, as pointed out by the error message you have redirect URI missmatch. Redirect URI should be in the form of:
http://example.com/googleconnect/index/connect/
Cheers!
@marko,
🙂
cheers
😀
@shivam
No worries, Twitter is next in the line for being supported by Inchoo Social Connect.
Cheers!
@Marko
feeling great having this
and it would be pleasure if twitter also is included with it.
🙂 😀
thanks in advance
@MagePsycho, @Anže Harej
You requested, Inchoo delivered – Social Connect Magento extension (currently supports Google and Facebook). Enjoy!
@Marko
thanks for the extension.
🙂
have fun
@shivam:
Sorry it’s not that complicated but it requires code changes in many places. You should find qualified Magento developer to do this task for your.
Cheers!
@Marko
Thanks for the solution to the virtual localhost problem.
But i would be very glad if i get to know about the places to change the namespaces and get the extension working.
thanks for the local host problem once again
@Marko
Hi,
Actually I have done virtual hosting at localhost. That’s the issue
and secondly when i try to replace “inchoo” with my module name and “googleconnect” to “google” is shows error
@shivam
Nothing changes if you have virtual host in your environment, except Google APIs console wouldn’t accept non existent top level domains like “.loc” or “.local” for authorized redirect URI. Just your setup virtual host as “.com”, “.net”, adjust your hosts file accordingly and give that URL to Google APIs console. About changing extension namespace this requires some code modifications and isn’t necessary to get it up and running.
Regards!
how to test it on localhost
@shivam
Hi,
if you refer to creating client ID just use
Authorized Redirect URI:
https://inchoo.net/googleconnect/index/connect/
Authorized JavaScript Origin:
https://inchoo.net
Other than that everything is the same like installing on a live site.
Cheers!
Yea, just like Todecay said…with fb and tw added, this would be the best extension!
Hello
extension works perfecy with new zip
@hotmonitor
It’s nice to hear that. Enjoy!
http://www.example.com/magento/googleconnect/index/connect NOT WORK give error
this link WORK but get error
http://example.com/magento/googleconnect/index/connect/?___SID=U
@hotmonitor
Hi again,
I’ve taken some time to test with Magento installed inside domain subdirectory and it appears in this case
___SID=U
query parameter is added to redirect URI. This makes redirect URI invalid and that’s why you got the URI mismatch error. Also article had a typo inside installation instructions section where I forgot to include trailing slash on redirect URI.I’ve adjusted code and installation instructions a few minutes ago, so if you update your Google Connect using latest ZIP package now, and edit your Google client ID settings with
http://example.com/magento/googleconnect/index/connect/
redirect URI (notice trailing slash), Inchoo Google Connect will most certainly work fine for you. And thanks for the bug report, I would never caught this one on my own 😉hello
icreate this. fi my domain is http://www.example.com/magento/ what happend ?
@hotmonitor
If this is the case, your redirect URI when creating Client ID should be http://www.example.com/magento/googleconnect/index/connect/
Cheers!
I would say: “Facebook, Google and Twitter”
I believe you will then make a lot, and I mean a lot, of people happy!
Including me 🙂
After try to login have a error
Error fetching OAuth2 access token, message: ‘redirect_uri_mismatch’ Where is error?
@hotmonitor
Hello,
client ID doesn’t match redirect URI Inchoo Google Connect is passing to Google. When creating Google API ID, you must specify
http://www.yourstore.com/googleconnect/index/connect/
as redirect URI, where http://www.yourstore.com is your store address. Double check settings on your Google APIs Console. Also you should also double check Magento’s system configuration customers settings section where you enter Client ID and secret.Regards!
I suggest you guys to merge it with Facebook Connect and display as per system configuration. Have multi connect in a single module would be great , so…
Hello, not a bad idea actually, thanks! I’ll see what can be done regarding this.