Technology | Web

eZ Publish Social Media Integration: Single Sign-on

eZ Publish Social Media Integration: Single Sign-on

We are happy to announce the nxc_social_networks eZ Publish extension. This extension implements full eZ Publish integration with social networks, and provides the following capabilities:

  • Sign-in button, which allows users to login/register via social networks (Facebook, Twitter, LinkedIn and Google) in one click
  • eZ Publish template fetch functions to obtain the  social network feeds (Facebook, Twitter,  Google+)
  • Publish to social networks from eZ Publish (Facebook, Twitter,  LinkedIn)
This post covers the Sign-on button functionality, the remaining bullets will be discussed in our upcoming posts.

How does it work?

Each time a user clicks on any social media sign in button, they are directed to the appropriate social network. There the user should confirm the specific application can use their account data. Afterwards the user is redirected back to the website. At this point, the appropriate social network login handler checks if an eZ Publish user is already connected to the social network account. If this is the case, it will be used to authorize the user to eZ Publish. Otherwise the eZ Publish user will be created and used the next time. The eZ Publish user is created only once (when using the social network account for the first time), and not each time you click on the sign in button.

Please note that the following fields are extracted from social network account and are used within eZ Publish user account:

  • First name
  • Last name
  • Email
  • Image

eZ Publish user content class should contain these attributes.

In order to enabled social network SignIn buttons do the following:

  1. Install nxc_social_networks extensions
  2. Create social network applications (for Facebook, Twitter, LinkedIn and Google)
  3. Include a sign in button into required eZ Publish templates

Installing nxc_social_networks

  1. Clone extension’s git repository from https://github.com/nxc/nxc_social_networks
  2. Enable extension in the eZ Publish back end
  3. Regenerate autoloads array
  4. Execute MySQL code from /path_to_ezpublish/extension/nxc_social_networks/sql/mysql/mysql.sql file
  5. Clear eZ Publish caches
The extension is now installed. The next step will be creating social network applications.

Creating social network applications

Please follow these instructions to create an application in each social network

Facebook

  1. Go to https://developers.facebook.com/apps and click “Create New App” button.
  2. Specify the application name, for example “eZ Publish Integration” and click “Continue” button.
  3. Add website.com to App Domains, and set http://website.com as Site URL. Click “Save Changes” button.
  4. Click on the application`s name in the page path.
  5. Update nxcsocailnetworks.ini.append.php (/ezpublish_path/extension/nxc_social_networks/settings/nxcsocailnetworks.ini.append.php) settings file:
    Source code    
    [FacebookApplication]
    Key=APP_ID
    Secret=APP_SECRET

 

Twitter

  1. Go to https://dev.twitter.com/apps/new and fill out the form:
    • Name: eZ Publish Integration
    • Description: eZ Publish Integration
    • Website: http://yoursite.com
    • Callback URL: http://yoursite.com/
    • Apply Developer Rules
    • Enter captcha
    • Click “Create yout Twitter application” button

  2. Application will be created and you will be directed to it`s page. Open “Settings” tab.
  3. Select “Read and Write” Access and click “Update this Twitter application’s settings” button.
  4. Open “Details” tab after settings will be updated and update nxcsocailnetworks.ini.append.php (/ezpublish_path/extension/nxc_social_networks/settings/nxcsocailnetworks.ini.append.php) settings file:
    Source code    
    [TwitterApplication]
    Key=CONSUMER_KEY
    Secret=CONSUMER_SECRET

LinkedIn

  1. Go to https://www.linkedin.com/secure/developer and click “Add New Application”.
  2. Fill out the form:
    • Company: select some company from the available list
    • Application Name: eZ Publish Integration
    • Description: eZ Publish Integration
    • Website URL: http://website.com
    • Developer Contact Email: input an email address
    • Phone: input a phone number
    • Agreement Language: select the language from the available list
    • Agree to Term of Service
    • Click “Add Application” button

  3. Application will be created and the user will be directed to its page. Update nxcsocailnetworks.ini.append.php (/ezpublish_path/extension/nxc_social_networks/settings/nxcsocailnetworks.ini.append.php) settings file:
    Source code    
    [LinkedInApplication]
    Key=API_KEY
    Secret=SECRET_KEY

  4. Click “Done” button.

Google

  1. Go to https://code.google.com/apis/console/ and open “Services” tab.
  2. Enable “Google+ API” Service. Afterward open “API ACccess” tab.
  3. Click “Create an OAuth 2.0 cleint ID…” button.
  4. Specify product name, for example “eZ Publish Integration” and click “Next” button.
    • Select “Web application” Application type
    • Click “more options” link and input following callback URLs: http://yoursite.com/nxc_social_network_login/callback/google and http://siteadminpath.yoursite.com/nxc_social_network_token/get_access_token/google. You can skip “Authorized JavaScript Origins”.
    • Clcik “Create client ID” button.

  5. OAuth 2.0 cleint will be created and you will be directed to it`s page. Update nxcsocailnetworks.ini.append.php (/ezpublish_path/extension/nxc_social_networks/settings/nxcsocailnetworks.ini.append.php) settings file:
    Source code    
    [GoogleApplication]
    Key=CLIENT_ID
    Secret=CLIENT_SECRET

Applications for each social network are created and ready for use. Please, do not forget to clear INI caches.

The last step remains: include a sign in button into the eZ Publish templates.

Including Sign-in button

If the front-end siteaccess name is “eng” then user login template is overrided and it includes the sign-in buttons (after installing nxc_social_networks extension). But if you wish to add those buttons in any custom template you should just to include the following code:

Source code    
{include uri='design:social_networks/login.tpl'}

Please, do not forget to clear template caches. After doing so, site visitors will be able to login/register using their preferred social network account.

If you have further questions, please review social network login handlers source code or ask questions in the comments. Stay tuned, the next post will describe how to fetch feeds from social networks and how to publish to them from eZ Publish.

 

Print this post

28 Responses to "eZ Publish Social Media Integration: Single Sign-on"

  1. Sasha   on Wednesday, September 26

    Thank you for the good post! Very useful!

    (reply)
  2. Philippe   on Friday, September 28

    Hi,

    Nice extension :) Which ez version is compatible with this extension? I got an issue with twitter login.. I delete class OAuthException extends Exception (line 8 on lib/ouath.php) to work with eZ 4.7 & all php error display.

    Cheers
    Philippe

    (reply)
  3. Serhey Dolgushev   on Friday, September 28

    Hi Philippe,
    I have tested this extension with the latest eZ Publish version available at the github.
    Could you please provide what error did you got? Maybe it was not caused by eZ Publish version, but by environment settings?

    (reply)
  4. Philippe   on Friday, September 28

    Yeah my environnement seems to be to strict ;) i got this error :

    ( ! ) Fatal error: Cannot redeclare class OAuthException in /Users/pvr/Sites/repos/nxc_social_networks/lib/ouath.php on line 8
    Call Stack
    # Time Memory Function Location
    1 0.0001 660624 {main}( ) ../index.php:0
    2 0.0463 2883584 eZModule->run( ) ../index.php:723
    3 0.0465 2894096 eZProcess::run( ) ../ezmodule.php:1552
    4 0.0465 2894624 eZProcess->runFile( ) ../ezprocess.php:21
    5 0.0469 2897024 include( ‘/Users/pvr/Sites/repos/nxc_social_networks/modules/nxc_social_network_login/redirect.php’ ) ../ezprocess.php:46
    6 0.0504 2969656 nxcSocialNetworksLoginHanlder->getLoginURL( ) ../redirect.php:21
    7 0.0504 2969656 nxcSocialNetworksOAuth2Twitter->getAuthorizeURL( ) ../login.php:27
    8 0.0505 2998304 TwitterOAuth->__construct( ) ../twitter.php:17
    9 0.0505 2999072 ezpAutoloader::autoload( ) ../twitter.php:0
    Fatal error: The web server did not finish its request
    The execution of eZ Publish was abruptly ended, the debug output is present below.

    (reply)
  5. Serhey Dolgushev   on Friday, September 28

    Seems like there is already OAuthException class in one of the rest extensions at your installation. And it caused the issue.

    (reply)
    • Philippe   on Friday, September 28

      you re write.. install it and configure it too quickly.. its a problem with eznetwork. When disabling it all works like a charm sorry :D

      (reply)
  6. Genri   on Wednesday, October 3

    Great extension!

    How does it work if you’ve logged in with FB first (extension created user for you) and then next time you’ve logged in using Twitter? Will it create the new user?

    (reply)
  7. Serhey Dolgushev   on Thursday, October 4

    Hi Genri,
    Yes, there will be created eZ Publish user account for each social network. Extension gets external user id profile from the social networks and creates user object with remote_id = SOCIAL_NETWORK_NAME_ . EXTERNAL_ID (https://github.com/nxc/nxc_social_networks/blob/master/modules/nxc_social_network_login/callback.php#L20).
    This remote_id is also used to check if there is already corresponding user account in the eZ Publish (https://github.com/nxc/nxc_social_networks/blob/master/modules/nxc_social_network_login/callback.php#L28)

    You can use user`s email instead of remote_id. In this case there will be only one eZ Publish account for all social networks. But you should notice the following points:
    – seems like twitter does not allow to get user`s email
    – it may cause some security issues: f.e. there is already eZ Publish admin user with email myemail@com.ua. If somebody will register user with the same email in social network, and will use this user account (from social network) to sign-on to eZ Publish, he will get eZ Publish admin permissions.

    (reply)
  8. Fraser   on Wednesday, October 10

    What would happen if a user is already registered in ezPublish and then clicks on one of the social login buttons? Is it possible to associate one or more social logins with an existing ezPublish account? Or will a new ezPublish account be created?

    Thanks,

    Fraser

    (reply)
  9. Serhey Dolgushev   on Wednesday, October 10

    Hi Fraser,
    New user will be created. But it is to possible to change this behaviour by changing source code.

    (reply)
  10. Ouliber   on Friday, October 12

    Hi,

    Thanks a lot for this extension, installed on eZ 4.7, no problem at all. Great job !

    I configured Google API sign-in and it’s working great.

    Is there a way to avoid the sign-in each time the user wish to login ? I mean a login with Google button that pass some session cookie informations.

    I am trying something by my side, but you may have work on something ?

    Thanks in advance
    OIivier

    (reply)
  11. Serhey Dolgushev   on Friday, October 12

    Hi Oliver,
    Nice suggestion! I have implemented it: https://github.com/nxc/nxc_social_networks/commit/08d11196865768045ed60b15052c3acd1aa3ab1c
    Please checkout the latest version from GitHub

    (reply)
  12. Harry Oosterveen   on Sunday, October 14

    Hi,

    Great extension!
    But one problem: when I log in using e.g. Google, and the corresponding email address exists already, it creates a new account. So now there are two accounts with my name.

    That does not make sense. If the email address already exists, it should use that user account, instead of creating a new one. Or do I overlook something?

    Kind regards,
    Harry

    (reply)
  13. Serhey Dolgushev   on Monday, October 22

    Hi Harry,
    UniqueUserIdentifier setting is added (https://github.com/nxc/nxc_social_networks/blob/master/settings/nxcsocailnetworks.ini.append.php#L5, https://github.com/nxc/nxc_social_networks/commit/67831c7ab33bc291130400f3259bf0903b849ea4). And by default it uses email instead of remote_id (like it was before). So now no duplicate users will be created for the same email address.

    (reply)
  14. Irene   on Saturday, November 3

    5 Star Work!

    (reply)
  15. daniele   on Tuesday, November 6

    Hi,

    I have installed the ext but i don’t see login button on mywebsite.com/user/login and in the debug there is a warning:

    Extension ‘nxc_social_networks’ was reported to have modules but has not yet been activated.
    Check the setting ModuleSettings/ExtensionRepositories in module.ini for your extensions
    or make sure it is activated in the setting ExtensionSettings/ActiveExtensions in site.ini.

    (reply)
  16. Serhey Dolgushev   on Tuesday, November 6

    Hi Daniele,
    Seems like you have no activated the extension (admin.yoursite.com/setup/extensions).
    Also you should include custom code to your login template, after the extension will be installed (please checkout “Including Sign-in button” section of the current blog post)

    (reply)
  17. Shubhangi   on Wednesday, November 21

    thanks for sharing it great

    (reply)
  18. dofollow social bookmarking   on Tuesday, November 27

    I am very enjoyed for this blog….It’s an informative post. Thanks

    (reply)
  19. Marc   on Tuesday, November 27

    I get a “Not found error” after click on any sign in button.
    After a little bit investigation i can see that i don’t became an remoteID back from all of these services.

    An idea why?

    (reply)
  20. Serhey Dolgushev   on Tuesday, November 27

    Hi Mark,
    Try to install root certificates http://wiki.cacert.org/FAQ/ImportRootCert#Linux

    (reply)
  21. Fraser   on Wednesday, January 9

    We’ve found that users really don’t like having to create a new username and password for our site and that they often forget their new password. This extension has been really successful at addressing this usability problem.

    In addition to the core functionality, we worked with NXC to add the ability for existing users to link their account with any or all of the social media log-ins. Now when a user tries to login with a social network, if there is no match between a user email in our list of members and the email used in the social network, or the social network account ID, the user will be asked if they would like to link the social network to an existing account (they may have used another email address to register on our site) or create a new account on our site. If they choose to create a new account they get a registration page with some of the info pre-filled, including the social network account ID.

    Of course if there is a matching email address or social network account ID, the user is just logged in with one click.

    This approach has worked out really well and we’ve received really good feedback from the users. Many have now linked their social network accounts so they no longer have to worry about remembering their password for our site and they can log in with one click (assuming they’re already logged into their social network).

    We also integrated the social login and registration with nice twitter-bootstrap style dropdowns on the top of the page. You can see it at: http://issat.dcaf.ch.

    (reply)
  22. Marco   on Saturday, February 16

    Hello,

    first of all: Thanks for this extension and for the tutorial.
    For now, I’m using (only) the Facebook login and have one issue here:
    After the (first) login with a Facebook account, ez redirects the user to some completly invalid URI in the website, e.g. /%F7W%F6%EB%9F%5E%7B%B7%DEs%BE%F9%EF%AE%5D%D7%97%BD%D7%97%5C_w%DC#_=_

    I tracked this down to the “state” parameter, which seems to be send to Facebook and then back to the callback URL of the Extension. This is then base-decoded and redirected to.
    I managed to workaround the issue by hardcoding the redirect URL in the last lines of callback.php .
    What is “state” supposed to be? Which login redirect URL should be used / how can I modify it correctly.
    Right now, it’s messed up by the “state” parameter.
    I’m on Community Project 2012.6 with ezdemo .

    (reply)
  23. Serhey Dolgushev   on Tuesday, February 26

    Hi Marco,
    Olivier Portier suggested to use state field as redirect_url for google login handler (https://github.com/nxc/nxc_social_networks/pull/1). And it works fine for google case. Facebook uses it field to defense against CSRF attacks and it caused the issue.
    Please pull the latest version from the GitHub, it should be fixed already.

    (reply)
  24. Marc   on Friday, April 12

    Hi again,

    as i wrote some days ago i got every time when trying to login with facebook, a “Not found error” error.

    All root certificates are installed and as i could see in my debug i got a “signedRequest” with NULL in my Facebook object. Therfore also user is null.

    I have tested it on serverall serves but all the same

    (reply)
  25. Marc   on Monday, April 15

    Ok, i have figured out my problem.
    It’s because my server is behind a proxy.
    As i can see your extension isn’t proxy compatible. right?

    I could change the curl settings to use a proxy, but how can i make oauth using a proxy??

    (reply)

Post a Comment:

Get latest news