The Google Login feature set-up in an X-Cart store consists of the following steps:

Creating OAuth2 client ID

To create an OAuth2 client ID for your store:

  1. Go to the Google Developers Console and create a new project there, using one of the following ways.

    • use the CREATE PROJECT button on the Dashboard (if there are no other projects):

      google-create-project-button.png
    • open the list of the current projects and use the NEW PROJECT button there:

      gooole-new-project-button.png
  2. On the “New Project” screen that opens, either enter a project name or accept the default one, then select Create. The project ID is an identifier that assigns automatically when you create a project, and it is used only within the Developers Console. A project ID is unique and can be changed only at the moment of project creation, so choose an ID that you’ll be comfortable using for the project's lifetime.

    For example, we chose to create a project “X-Cart Login” and kept the default Project ID:

    google-new-project-page.png

    After you have clicked Create, Developer Console will create the new project. Make sure to select the newly created project in the project list dop-down at the top of the page:

    google-project-selected.png

  3. In the sidebar on the left, locate OAuth Consent Screen:

    google-external-user-type.png

    Next, select External user type and click Create.

  4. Fill in the form that opens on the OAuth consent screen:

    google-auth-consent-screen.png

    Use the settings on this page to configure the consent screen for your project (That is what users see when they click a Google Login widget on your store site for the first time and are asked to allow your store to access their information on Google).

    • Application name: Specify your company name here.

    • Application logo (Optional): Add a company logo, if applicable.

    • Support email: Choose an email from the list. This email address will be shown to users on the authorization screen. You can use your email address or a Google Group email address that you manage.

    • Authorized domains: Specify your store domain here.

    • Application Homepage link (Optional): Specify your store homepage here.

    • Application Privacy Policy link (Optional): Specify a link to your store’s privacy policy page, if applicable.

    • Application Terms of Service link (Optional): Specify a link to your store’s Terms and Conditions page, if applicable.

  5. Click Save to submit the form.

  6. In the sidebar on the left, locate Credentials and select OAuth client Id in the Create credentials dropdown:

    google-create-oauth-client-id.png

    This will display a screen titled “Create OAuth Client ID”:

    google-create-client-id-page.png

  7. On the ”Create OAuth Client ID” screen:

    • Select Web application for the Application type.

    • In the Authorized redirect URI box, enter the redirect URI for your store site (Copy and paste the URI from the Google Login setup instructions on your store’s “Social Login” add-on settings page).

    • Click Create Client ID.

    The Client ID will be created.

    google-oauth-client-created.png

  8. You need to copy-paste the Client ID and Secret values to the Social Login add-on configuration screen.

Configuring the Social Login Add-on: Google

  1. On the Credentials page of your project in the Google Developers Console, locate the needed credentials and click on the pencil icon to open the screen with the Client ID and Client Secret values:

    google-credentials.png

  2. Open a separate browser tab or window for the X-Cart Admin interface so you can copy and paste the Client ID and Client secret values.

  3. Locate the entry for the Social Login add-on on the My Apps page of your store's Admin area (App Store -> My Apps) and click the Settings link below it:

    This opens the “Social Login” add-on settings page.

    540-settings-page.png

  4. Scroll down to the Google section of the page and enter your Client ID and Client secret values:

    540-settings-page-google.png

  5. Click the Submit button near the bottom of the page to save the changes.

    The Google Login feature should now be enabled.

    google-sign-in-cus.png
Did this answer your question?