Since our version 2.1, it’s really easy to login using a social network account like Twitter, Facebook, Google Sign-In , LinkedIn etc. For this, we use a 3rd 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.

How to enable Google login

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

google1


  1. Choose a Project name, then select “Yes” or “No” for the other options and press Create.
  2. 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

google2

10. Click Create.
11. 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.
12. Go to http://yourdomain.com/oc-panel/social/index
13. Set Google = TRUE
14. Fill ID = Client ID as appears at Google page
15. Fill Secret = Client secret as in Google
16. Click Update in the bottom of the page
17. Logout
18. Go to login, Google should appear there
19. 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.

fb1

3. Fill the fields Display Name and Contact Email.

4. Press Create App ID.

fb1

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

fb1

6. Choose Other on the Quickstart page.

fb1

7. Choose Facebook Login -> Settings on the left menu.

8. Enable Client OAuth Login and Web OAuth Login and fill the fields:

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

Deauthorize Callback URL: https://yourdomain.com

7. Click Save Changes.

fb1

8. Choose Settings -> Advanced and enable Social Discovery and Allow API Access to App Settings.

9. On the header switch OFF to ON.

fb1

10. Choose a category and click Confirm.

11. Choose Settings -> Basic and copy your App ID and App Secret.

fb1

10. Go to http://yourdomain.com/oc-panel/social/index
11. Set Facebook = TRUE
12. Fill ID = App ID as appears at FB page
13. Fill Secret = App secret as in FB
14. Click Update in the bottom of the page
15. Logout
16. Go to login, Facebook should appear there
17. Now test it!

How to enable AOL login

  1. Go to http://yourdomain.com/oc-panel/social/index
  2. Set AOL = TRUE
  3. Click Update in the bottom of the page
  4. Logout
  5. Go to login, AOL should appear there
  6. Now test it!

How to enable Open ID (yahoo) login

With this option users will be able to login using an Open ID account. In Yclas we use Yahoo as Open ID provider since it’s really easy to implement.

  1. Go to http://yourdomain.com/oc-panel/social/index
  2. Set Open ID = TRUE
  3. Click Update in the bottom of the page
  4. Logout
  5. Go to login, Open ID should appear there
  6. Now test it!

How to enable Yahoo login

  1. Go to https://developer.yahoo.com/apps/create/ and create a new application.
  2. Fill out any required fields such as the Application Name and the Description one.
  3. In the Redirect URI(s) field enter: http://yourdomain.com/social/login/1
  4. Set Application Type to Web Application.
  5. Choose API Permissions -> OpenID Connect Permissions

yahoo contacts

6. Go to your panel, Settings -> Plugins, enable Social Auth, click Save and then go to Settings -> Social Auth or http://yourdomain.com/oc-panel/social/index
7. Set Yahoo = TRUE
8. Fill ID = Client ID as appears at Yahoo
9. Fill Secret = Client secret as in Yahoo
10. Click Update in the bottom of the page
11. Logout
12. Go to login, Yahoo should appear there
13. Now test it!

How to enable Twitter login

  1. Go to https://apps.twitter.com/ and press Create new app
  2. Fill the fields Name, Description and Website.
  3. In the Callback URL field enter: http://yourdomain.com/social/login/1?hauth_done=Twitter
  4. Press Create your Twitter application
  5. Go to the “Keys and Access Tokens” tab
  6. Copy the Consumer Key and Consumer Secret and paste in your website admin panel. Settings -> Social Auth -> Twitter Key and Secret.
  7. Back in your Twitter app, go to the Permissions tab and make sure the Access is set to “Read and Write”.
  8. Done!

Other social login

From documentation Hybrid Auth, follow similar procedure.

  1. Twitter
  2. Yahoo (deep integration, but check better Open ID)
  3. MySpace
  4. Windows Live
  5. LinkedIn
  6. Foursquare