How to login using Social Auth (Facebook, Google, Twitter ...)

How to enable Google login

  1. Open in a new window the Google Developers Console.
  2. Select a Project on the top and choose New project.

  1. Choose a Project name and press Create.
  2. Go to APIs overview then choose Credentials, on the left menu.
  3. Choose Create Credentials -> OAuth client ID and then click on Configure consent screen.
  4. Now you need to enter a Product name and you can fill any of the other optional fields you want. Click Save.
  5. After that, you will be redirected to create client ID.
  • Application type: Web application.
  • Authorized Javascript origins: Your site URL here. ex: https://yclas.com/
  • Authorized redirect URI: ex: https://yclas.com/social/login/1?hauth.done=Google.

  1. Click Create.
  2. Now you have to verify (register) your domain name. Go to Google Console Developers -> Credentials, choose the last tab, Domain verification and follow the steps there.
  3. Go to https://yourdomain.com/oc-panel/addons/sociallogin
  4. Set Google = TRUE
  5. Fill ID = Client ID as appears at Google page
  6. Fill Secret = Client secret as in Google
  7. Click Update in the bottom of the page
  8. Logout.
  9. Go to login, Google should appear there.
  10. You can now test it.

How to enable Facebook login

Since March 2018 it’s required to get an SSL certificate for your domain in order to use Facebook Login. If your website is hosted on yclas.com follow this guide to get an SSL certificate. If you are using Yclas Self-Hosted read more about it here.

This social login might change depending on Facebook.

  1. Go to Facebook for developers.
  2. Click Add a New App.

  1. Fill the fields Display Name and Contact Email.
  2. Press Create App ID.

  1. Choose Set Up Facebook Login on Add Product page.

  1. Choose Other on the Quickstart page.

  1. Choose Facebook Login -> Settings on the left menu.
  2. Enable Client OAuth Login and Web OAuth Login and fill the fields:

Valid OAuth redirect URIs:
https://yourdomain.com/social/login/1?hauth_done=Facebook or
https://yourdomain.com/social/login/1?hauth_done=Facebook

Deauthorize Callback URL: _https://yourdomain.com

  1. Click Save Changes.

  1. Choose Settings -> Advanced and enable Social Discovery and Allow API Access to App Settings.
  2. On the header switch OFF to ON.

  1. Choose a category and click Confirm.
  2. Choose Settings -> Basic and copy your App ID and App Secret.

  1. Go to https://yourdomain.com/oc-panel/addons/sociallogin
  2. Set Facebook = TRUE.
  3. Fill ID = App ID as appears at FB page.
  4. Fill Secret = App secret as in FB.
  5. Click Update in the bottom of the page.
  6. Logout.
  7. Go to login, Facebook should appear there.
  8. Now you can try it out.

Since our latest release, it’s really easy to login using a social network account like Twitter, Facebook, Google Sign-In , LinkedIn etc.

For doing that we use a third party open source project called HybridAuth (awesome project!).

To activate any of these social logins, you need first to purchase a premium theme from our market.