Tutorials

Article Content:Social Logins in codeigniter with HybridAuth easy steps

Social Logins in codeigniter with HybridAuth easy steps

Social Logins in codeigniter with HybridAuth easy steps.

Social login is one of the most popular login methods options for users to log into your site. At Hybridauth library, we have an easy way to create social authentication for many providers like Facebook, google, twitter.

In this tutorial, I will show you how to set up Facebook Google, twitter to allow you to add social login into your Hybridauth Codeigniter application.

There are only a few steps to take to enable social identity providers, and in this post, I will walk you through each of these steps.

You can also use this library in any framework or even pure PHP code, also you can use it with many providers not just what I teach here, checkup user guide to see all providers

Follow along with me to quickly get Facebook and Google up and running in your app.

                                         

Set Up Facebook Social Login

To allow login from Facebook, there are a few steps we first have to complete.
– Create a Facebook app
– Put (Client ID and Secret) into the HybridAuth config file.

 

Create a Facebook New app

The first thing you need to do is log into the Facebook Site and create a new Facebook App, You can do this by Visiting the Facebook Developer Site and clicking the “My Apps” menu at the top of the screen,

Then select the “Create a New App” button, and Choose website because we need this social for website login.

 Fill this input by the name of your new app and click Create New Facebook App ID, This is the name that will be used when presenting it to the user who is trying to log in.

The last thing is to pick the category of your application and put your Email for important contacts.

After filling out all the necessary fields, click Create App ID. Facebook will ask you to do a security check, after passing this

The next thing we need to do is tell Facebook what URLs we’ll be using Facebook Login from.

In the “Site URL” box, enter your private and public root URLs. This should be something like http://localhost or http://example.com. If you want to allow Facebook Login from multiple URLs (local development, production, etc.) you can just click the “Add Platform” button again and enter another URL.

Lastly, click the “Save Changes” button to save the changes.

Your settings should now look something like this:

Set Up Google Social Login

Integrating Google Login is very similar to Facebook. You must create an application in the Google Developer Console, then create a Directory in Hybridauth which holds settings for the Google application that you created.

To allow login from Google, there are a few steps we first have to complete.
 

– Create a Google app

– Put your website domain in the Authorized JavaScript origins field.

– Provide this URL as the Callback URL for your application:

– Put (Client ID and Secret) into the HybridAuth config file.

Create a Google New app

The first thing you need to do is log into the Google Developers Console and create a new Google App.

You can do this by visiting the Google Developers Console and clicking the “Create Project” button at the top of the screen

Now, we need to enable the correct API to allow for logging in.

Find “Social APIs” and click on “Google+ API”. On the overview page of the “Google+ API”, click on the blue button “Enable”.

 

 

Create Credentials

Click on the “Configure consent screen” and you will be presented with a screen that looks like:

 

The only field you need to fill out is the Product name. This is what will show you your users on the consent screen after clicking on the login with Google button. Once you fill this out, click “Save” and you will be redirected back to the credentials screen. Once there, click on “Web Application”.

 

In the Authorized URI’s field, you need to fill in your full authorized URI. As an example, let’s say your domain is http://example.com/         

Authorized JavaScript origins will be http://example.com or http://localhost

AND authorized redirect URI will be

http://example.com/hauth/endpoint?hauth.done=Google

You can also use localhost as a test before production

Authorized JavaScript origins will be http://localhost

AND authorized redirect URI will be

http://localhost/project/hauth/endpoint?hauth.done=Google

 

Once done, click on the blue “Create” button. Google will then provide you with your OAuth client keys.

   Fixing error "redirect_uri_mismatch" in google API

1-Enable Contacts API and Google+ API in console.developers.google.com
2. Add "redirect_uri"=>"http://localhost/
project/hauth/endpoint?hauth.done=google",

To Google array in Hybridauth config file
3. Reset and create new secret key and set this new key in config

Set Up Twitter Social Login

To allow login from Twitter, there are a few steps we first have to complete.
– Create a Twitter app
– Put (Client ID and Secret) into the HybridAuth config file.

 

Create a Twitter New app

1 - Go to https://apps.twitter.com/ and create a new application.

2 - Fill out any required fields such as the application name and description.

3 - Put your website domain in the Website field.

 NOTE: In localhost, you must use this IP http://127.0.0.1 instead of http://localhost because twitter will not accept localhost and see this error message The client application failed validation: Not a valid URL format.”

4 - Provide this URL as the Callback URL for your application:

http://127.0.0.1/project/hauth/endpoint?hauth.done=Twitter

Or for production

http://example.com/project/hauth/endpoint?hauth.done=Twitter

5 - Once you have registered, copy and paste the created application credentials (Consumer Key and Secret) into the HybridAuth config file.

Download Full example

you also can follow all steps from this video

 

 



  • jibin
    I have a problem with gmail login. It is working does not getting any errors. but i does not getting any return data. please help me
    November 23, 2016
    Reply
    • admin
      info@webeasystep.com
      there are many reasons could be cause this problem,so first sure follow steps in the video slowly also sure to use another gmail account thanks
      November 24, 2016
      Reply
  • Om Kumis
    How about CI 3, its not working well use CI 3. I have big problem with no popup login to sosmed, but still back to endpoint... its make me feel so bad
    November 25, 2016
    Reply
    • admin
      info@webeasystep.com
      no man , i mainly support CI3 In all tutorials
      November 27, 2016
      Reply
  • Prakasa
    its depends to session if I use redis ?
    November 25, 2016
    Reply
  • Prakasa
    Your code not working, it still redirect to here : http://administrator.terpusat.com/hauth/endpoint?hauth.start=Facebook&hauth.time=1480109119 from the code, they say like this : f (empty(Hybrid_Auth::$config["base_url"])) { // the base url wasn't provide, so we must use the current // url (which makes sense actually) $url = empty($_SERVER['HTTPS']) || $_SERVER['HTTPS'] == 'off' ? 'http' : 'https'; $url .= '://' . $_SERVER['HTTP_HOST']; $url .= $_SERVER['REQUEST_URI']; $HYBRID_AUTH_URL_BASE = $url; } else { $HYBRID_AUTH_URL_BASE = Hybrid_Auth::$config["base_url"]; }
    November 25, 2016
    Reply
  • Prakasa
    even your code not working, wrong class name in controller etc, hhmmm... God u share something not working -_____________-
    November 25, 2016
    Reply
  • vaibhav
    Hi, I'm having troubles with google integration. I've configured everything as per document and on clicking on Google button application is redirected to google and prompt to allow the access. However after clicking on allow application is redirected back to my site - http://MY_SITE_URL/hauth/?hauth.done=google but I can not see google logout button. Bellow line return no data $login_data['providers'][$provider]['user_profile'] = $this->hybridauthlib->authenticate($provider)->getUserProfile(); After little debug $providerId parameter passed "isConnectedWith" function in Hybrid\Auth.php is OpenID and this function returns false. Kindly advise. Thank you, Vaibhav Array ( [hauth_done] => google [code] => ACTUAL_CODE [authuser] => 0 [session_state] => SESSION_STATE [prompt] => consent )
    December 22, 2016
    Reply
  • vaibhav
    Bingo... I've resolved the google login :) All you need to do is change the redirect_url to http://example.com/hauth/endpoint?hauth.done=Google Kindly update the redirect_url in your example. Thank you, Vaibhav
    December 26, 2016
    Reply
    • admin
      info@webeasystep.com
      Hi Vaibhav , sorry for delaying in the reply and thank you for your support,i appreciated your sharing now code updated you are welcome dude :)
      December 26, 2016
      Reply
  • pareshdeviaya
    note proper working code plz help me An uncaught Exception was encountered Type: Exception Message: Authentication failed! Facebook returned an invalid user id. Filename: D:\xampp\htdocs\webeasystep-codeigniter_social_login-abf12794702d\application\third_party\hybridauth\Hybrid\Auth.php Line Number: 169 Backtrace: File: D:\xampp\htdocs\webeasystep-codeigniter_social_login-abf12794702d\application\third_party\hybridauth\Hybrid\Auth.php Line: 55 Function: initialize File: D:\xampp\htdocs\webeasystep-codeigniter_social_login-abf12794702d\application\libraries\HybridAuthLib.php Line: 14 Function: __construct File: D:\xampp\htdocs\webeasystep-codeigniter_social_login-abf12794702d\application\controllers\hauth.php Line: 9 Function: library File: D:\xampp\htdocs\webeasystep-codeigniter_social_login-abf12794702d\index.php Line: 293 Function: require_once
    August 17, 2017
    Reply
    • admin
      info@webeasystep.com
      i recommended to follow this page to fix your problem https://github.com/hybridauth/hybridauth/issues/188
      September 11, 2017
      Reply

Leave a Reply

Your email address will not be published.


Notify me of followup comments via e-mail.
You can also Subscribe without commenting.