2

We have a Magento 2 website and want to implement the feature where the user can login using their Google Account as below if already they logged-in their Gmail/Google account on the system.

enter image description here

Can anyone please guide me here?

6
  • Do you have Google API client ID ?
    – Pawan
    Jun 1, 2020 at 2:46
  • @Pawan Yes, I have the API Client
    – MagentoDev
    Jun 1, 2020 at 11:30
  • OK, I manage to add login window as you describe in your screen shot but not able to login..
    – Pawan
    Jun 1, 2020 at 11:50
  • @Pawan, please tell me the steps and where did you add the Google Client ID in Magento 2?
    – MagentoDev
    Jun 2, 2020 at 8:10
  • Please have a look at my answer and let me know if it works.
    – Pawan
    Jun 2, 2020 at 8:55

3 Answers 3

3
+50

As I understood you want to add Google onetap login i.e https://developers.google.com/identity/one-tap/web/guides/get-google-api-clientid

  1. You need Google API client ID (https://developers.google.com/identity/one-tap/web/guides/get-google-api-clientid) which should looks like: 1234567890-abc123def456.apps.googleusercontent.com

  2. Load One Tap client library (https://developers.google.com/identity/one-tap/web/guides/load-one-tap-client-library)

In magento we can add JS via XML, Create :

app/design/frontend/{Package}/{theme}/Magento_Customer/layout/customer_account_login.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="https://accounts.google.com/gsi/client" src_type="url"></script>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="onetap" template="Magento_Customer::onetap.phtml"/>
        </referenceContainer>
    </body>
</page>
  1. Display Google One Tap (https://developers.google.com/identity/one-tap/web/guides/display-google-one-tap)

In magento we need to Create phtml we defined in layout to display one tap, Create:

app/design/frontend/Package/theme/Magento_Customer/templates/onetap.phtml

<div id="g_id_onload"
     data-client_id="YOUR_Google_API_client_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-your_own_param_1_to_login="any_value"
     data-your_own_param_2_to_login="any_value">
</div>

Note: Above will display Google one tap login to your Magento login page.After that we need to check response from Google and based on response we can login, create account

I will keep update on this answer as I am working on it..

15
  • Thanks. I will try and please update me the complete concept here. Now, I'm upvoting you.
    – MagentoDev
    Jun 2, 2020 at 10:58
  • 1
    Sure, working on remaining part and update soon.Please let me know if have any issue till display login tap.
    – Pawan
    Jun 2, 2020 at 10:59
  • Please let me know @Pawan
    – MagentoDev
    Jun 2, 2020 at 11:01
  • sure, will try and update..
    – Pawan
    Jun 2, 2020 at 11:09
  • Is the Google Tap login works on http?
    – MagentoDev
    Jun 2, 2020 at 16:26
1

The feature you're looking for is called "One-tap sign-up and auto sign-in on websites". Ref - https://developers.google.com/identity/one-tap/web

You'll have to load a library provided by google to use it. You can find a detailed guide of implementing it here - https://developers.google.com/identity/one-tap/web/guides/get-google-api-clientid

Note that you'll have to follow all the steps in "Get Started" tab and for additional features you can turn to "Advanced Topics" tab.

9
  • I have already done all the things but how can I enable the one tap singin? Please guide me
    – MagentoDev
    Jun 1, 2020 at 12:03
  • what issue are you facing exactly? Jun 1, 2020 at 12:05
  • make sure you go through developers.google.com/identity/one-tap/web/guides/features Jun 1, 2020 at 12:07
  • Yes, I have followed the link which you have shared but its now working. One thing is I have installed the Social Login extension and there is an option to put the API key and Secret. I have put the keys there but it will works for One Tap Login or I need to put that separately. If yes, where I have to put them.
    – MagentoDev
    Jun 2, 2020 at 3:50
  • You only need Google client ID to make it work, no need of for api key and secret. Jun 2, 2020 at 4:08
0

There Are two Steps

  • Create an App on Google and Get API credentials for OAuth API
  • Install MagePlaza Social Login on Store and Add Cretiendtals in Configuration That's All it
6
  • Thanks @Waqar Ali. But I have already installed the Social Login Plugin and the concept which I'm looking for differ from the social login. If the user already logged-in the Gmail on the system, they can use the google account on my website as the image in question
    – MagentoDev
    May 26, 2020 at 11:57
  • the social login plugin won't have this kind of feature. Please suggest me here
    – MagentoDev
    May 26, 2020 at 11:58
  • If you are a Store Owner you can request this feature if you are developer you can easily get this Feature in any other PHP Project just need to implement this In Magento
    – Waqar Ali
    May 26, 2020 at 12:01
  • Can you please point me out how can I implement as like this? I have already created an App and using the API credentials but only thing is I want to show as like in the pic.
    – MagentoDev
    May 26, 2020 at 12:04
  • okay let me have a look
    – Waqar Ali
    May 26, 2020 at 12:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.