eZ Publish Social Media Integration: Single Sign-on

by Serhey Dolgushev | September 26, 2012 9:53 am

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

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:

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[2] 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[2]

  1. Clone extension’s git repository from https://github.com/nxc/nxc_social_networks[3]
  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.
    [4]
  2. Specify the application name, for example “eZ Publish Integration” and click “Continue” button.
    [5]
  3. Add website.com to App Domains, and set http://website.com as Site URL. Click “Save Changes” button.
    [6]
  4. Click on the application`s name in the page path.
    [7]
  5. Update nxcsocailnetworks.ini.append.php (/ezpublish_path/extension/nxc_social_networks/settings/nxcsocailnetworks.ini.append.php) settings file:
    Source code [8] [9] [10] 
    [FacebookApplication]
    Key=APP_ID
    Secret=APP_SECRET

    [11]

 

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

    [12]

  2. Application will be created and you will be directed to it`s page. Open “Settings” tab.
    [13]
  3. Select “Read and Write” Access and click “Update this Twitter application’s settings” button.
    [14]
  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 [15] [16] [10] 
    [TwitterApplication]
    Key=CONSUMER_KEY
    Secret=CONSUMER_SECRET

    [17]

LinkedIn

  1. Go to https://www.linkedin.com/secure/developer and click “Add New Application”.
    [18]
  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

    [19]

  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 [20] [21] [10] 
    [LinkedInApplication]
    Key=API_KEY
    Secret=SECRET_KEY

    [22]

  4. Click “Done” button.

Google

  1. Go to https://code.google.com/apis/console/ and open “Services” tab.
    [23]
  2. Enable “Google+ API” Service. Afterward open “API ACccess” tab.
    [24]
  3. Click “Create an OAuth 2.0 cleint ID…” button.
    [25]
  4. Specify product name, for example “eZ Publish Integration” and click “Next” button.
    [26]
    • 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.

    [27]

  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 [28] [29] [10] 
    [GoogleApplication]
    Key=CLIENT_ID
    Secret=CLIENT_SECRET

    [30]

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 [31] [32] [10] 
{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[33] 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.

 

Endnotes:
  1. nxc_social_networks: https://github.com/nxc/nxc_social_networks/
  2. nxc_social_networks: https://github.com/nxc/nxc_social_networks
  3. https://github.com/nxc/nxc_social_networks: https://github.com/nxc/nxc_social_networks
  4. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/11.jpg
  5. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/2.jpg
  6. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/3.jpg
  7. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/4.jpg
  8. [Image]: #codesyntax_1
  9. [Image]: #codesyntax_1
  10. [Image]: http://blog.nxcgroup.com/wp-content/plugins/wp-synhighlight/About.html
  11. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/5.jpg
  12. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/12.jpg
  13. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/21.jpg
  14. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/31.jpg
  15. [Image]: #codesyntax_2
  16. [Image]: #codesyntax_2
  17. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/41.jpg
  18. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/13.jpg
  19. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/22.jpg
  20. [Image]: #codesyntax_3
  21. [Image]: #codesyntax_3
  22. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/32.jpg
  23. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/14.jpg
  24. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/23.jpg
  25. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/33.jpg
  26. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/42.jpg
  27. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/51.jpg
  28. [Image]: #codesyntax_4
  29. [Image]: #codesyntax_4
  30. [Image]: http://blog.nxcgroup.com/wp-content/uploads/2012/09/6.jpg
  31. [Image]: #codesyntax_5
  32. [Image]: #codesyntax_5
  33. social network login handlers source code: https://github.com/nxc/nxc_social_networks/tree/master/classes/handlers/login

Source URL: http://blog.nxcgroup.com/2012/ez-publish-social-networks-integration-signin/