Adding Google authentication to your site

Adam Aaron -

Google

If you have not done so already you will need to register for a Google account here: https://accounts.google.com

IMPORTANT Remember to replace ‘yourdomain.com’ with your actual domain anywhere in these instructions!

You’ll need to login to google and then visit the following page:

https://code.google.com/apis/console/

  1. If you have no previously registered API projects then click the big create project button once logged in. Otherwise, click on the drop-down menu at the top of the left-hand column that lists all your projects (under the Google logo) and select Create…

    01-google-api-menu.jpg
    Create a new project
  2. After naming your project, in the left-hand menu click on API Access > Create an OAuth 2.0 client ID… Note: Replace ‘yourdomain.com’ with your actual domain.

    02-google-create-oauth.jpg
    (1) Click ‘API Access’ (2) Click the big blue button

    Fill in:

    • Product name: (yourdomain.com website)

    • Product logo: (yourdomain.com/path/to/logo)

    • Home Page URL: (yourdomain.com)

    Click Next…

  3. Create Client ID: Client ID Settings window

    03-google-more-options.jpg
    At first ‘fewer’ will say ‘more’ options

    Fill in:

    • Application type: (select Web application)

    • Your site or hostname: (IMPORTANT click ‘more options’ so the window matches the screenshot)

      • Authorized Redirect URIs: (IMPORTANT put both of the following, one per line, make sure to put http not https. Replace ‘yourdomain.com’ with your actual domain)

        http://yourdomain.com/directory/system/user/hybridauth/endpoint?hauth.done=Google
        http://yourdomain.com/system/user/hybridauth/endpoint?hauth.done=Google
        
      • Authorized JavaScript Origins:

        http://yourdomain.com
        
    • click Create Client ID Leave the resulting window open you will need it in a minute.

  4. Open the Tribalogic Console in a new browser tab.

    01-tl-more-websites.jpg
    Select ‘Websites’ from the ‘More’ tab along the top of the Console
    • Go to: More > Websites > your site in the ‘Website name’ column
    02-tl-websites-table.jpg
    Select your site from under the ‘Website name’ column
    • In the Tribalogic Console, scroll to the Social Login section and copy in the Google Client ID and Google Client Secret from the other browser window you left open a minute ago.
    03-tl-social-login-settings-google.jpg
    Paste your ID and Secret from the other window in the Google Section of Social Login. Then click save
    • In the Tribalogic Console, scroll to the bottom of the window and click the Save button. Congratulations you should now be able to login via your google credentials.
  5. Visit your site, if you are logged in, then log out.

    • Click sign in and you should now see a Sign in with Google button.

    • If you are already signed in to your Google account clicking the button is all your user will have to do to sign in to your site.

  6. Have a cup of tea you deserve it!


Did you know you can also add Facebook and Twitter authentication?

Have more questions? Submit a request

0 Comments

Article is closed for comments.