Welcome to CM Social Connect’s documentation!¶
This documentation gives you instruction how to install and setup CM Social Connect on your Joomla! website.
Contents:
Overview¶
CM Social Connect is a social authentication component for Joomla! CMS, it gives Joomla! users ability to authenticate via social networks. Come with CM Social Connect component are a login module and some plugins which requires for the component to run.
At the present time there are 3 popular social networks supported:
- Google+
CM Social Connect is different to other social authentication Joomla! extensions, it doesn’t provide “one-click” registration feature, users still need to choose their usernames, passwords, or provide their emails when signing up, no auto-generated username and no random password. CM Social Connect also has an option to manage connected social networks inside Joomla! standard user profile.
If Joomla! standard registration/login and Joomla! standard profile are still important to your site, CM Social Connect could be useful.
Install & update¶
Install¶
Installation is very easy, you just need to upload the package via Extension Manager. After installing the package, you need to enable some plugins and configure the component, please see the next sections for details.
Update¶
You receive update notification in your Joomla! website when there is a new version of the plugin available, you just need to follow the instructions from Joomla! to update the plugin.
You can also go to Github, download the new version and upload it via Extension Manager, just like the way you install.
Component¶
After you install the package of CM Social Connect, you can find the component CM Social Connect in “Components” menu in your back-end.
By default you see the dashboard when you access the component.
To configure the component, you click the “Options” button on the right side of the toolbar.
There are 3 options:
- Load Font Awesome: CM Social Connect requires Font Awesome. If Font Awesome is already loaded by another extension (for example, your template), you set this option to “No”, otherwise you should set to “Yes”.
- Load CSS: Load CSS of CM Social Connect which contains some styles for login and register buttons to make them more beautiful. If you don’t load CSS, your template CSS will be used.
- Show in Users component’s profile: Show connection info in Users component’s profile view and connect/disconnect options in Users component’s profile form.
User plugin¶
In your back-end, go to Extensions -> Plugin Manager, search for “User - CM Social Connect”.
This plugin is used to integrate with Users component of Joomla!. This plugin doesn’t have any option, you just need to enable it.
System plugin¶
In your back-end, go to Extensions -> Plugin Manager, search for “System - CM Social Connect”.
This plugin is used to add social registration and login buttons to Registration and Login pages of Users component of Joomla!. This plugin doesn’t have any option, you just need to enable it.
Login module¶
Joomla! already has a login module, because we can not add login buttons to this module automatically, we buil copyied Joomla! login module to a new module called “CM Social Connect - Login”. This module works the same way as Joomla! login module, there are only 2 differences:
- CM Social Connect’s login module has a layout for Bootstrap 3. If you use a Bootstrap 3 template, you don’t need to override the module’s layout to convert its HTML to Bootstrap 3.
- CM Social Connect’s login module has social login buttons at the bottom.
When you install the package of CM Social Connect, CM Social Connect login module is also installed and created. In your back-end, you go to Extensions -> Module Manager, look for “CM Social Connect - Login”.
Edit the module, you can see it has the same options of Joomla! login module, there is a new option “Bootstrap version” for selecting what Bootstrap version is used in the module.
If you publish the module on your front-end and you haven’t configured any social networks yet, then you will not see social login buttons, it just looks like Joomla! login module.
Facebook integration¶
To enable Facebook integration in CM Social Connect, first you need to create a Facebook application.
Go to https://developers.facebook.com/, under menu item “My Apps” you click “Add a New App”.
Select “Website” in the popup.
Enter your application name and click “Create New Facebook App ID”.
Select a category, click “Create App ID” button.
Enter the URL of your Joomla! website and click “Next”.
Now you see a “Finished!” message at the bottom of the page.
You scroll to the top of the page, click “Skip Quick Start” button on the right side to access your new application’s configuration quickly.
In the Dashboard of your application, you click “Show” button of App Secret to see the app secret.
Enter your Facebook password.
Now you can see your app secrect. You need to enter your app ID and app secret on your Joomla! site.
In your back-end, go to Extensions -> Plugin Manager, search for “CM Social Connect - Facebook integration” plugin.
Edit the plugin, you set “Status” to “Enabled”, enter the app ID and app secret you see in your Facebook application dashboard.
Save the plugin. Go to your site’s front-end, now you can see the Facebook icons in registration form, login form and login module.
Login form:
Registration form:
Login module:
Twitter integration¶
To integrate with Twitter, you go to https://apps.twitter.com/ to create an application.
Click “Create New App”.
Provide the required information. Ensure you also enter your site URL in Callback URL field, otherwise callback will be disabled and you will get error when connecting to Twitter.
After your app is created, click “Keys and Access Tokens” tab to get API key and API secret.
Consumer key (or API key), consumer secret (API key) are the values you need to enter in your Twitter Joomla! plugin.
In your back-end, go to Extensions -> Plugin Manager, search for “CM Social Connect - Twitter integration” plugin.
Edit the plugin, you set “Status” to “Enabled”, enter the API key and API secret of your Twitter application.
Save the plugin. Go to your site’s front-end, now you can see the Twitter icons in registration form, login form and login module.
Login form:
Registration form:
Login module:
Google+ integration¶
To support Google login, you need to have a Google Developers project.
Go to https://console.developers.google.com/, click “Create Project” button to create a new project.
Give your project a name.
After your project is created, on the left menu you go to APIs & auth -> Credentials, click “Create new Client ID button”.
Select “Web application” as “Application type”.
Select an email address and enter product name.
Enter your site URL in “Authorized JavaScript origins” option. For “Authorized redirects URIs” option you need to enter 3 URLs:
http://yoursite.com/index.php?option=com_cmsocialconnect&task=registration.socialRegister&network=googleplus
http://yoursite.com/index.php?option=com_cmsocialconnect&task=login.socialLogin&network=googleplus
http://yoursite.com/index.php?option=com_cmsocialconnect&task=connect.socialConnect&network=googleplus
Click “Create Client ID”, you can find your client ID and client secret in APIs & auth -> Credentials.
In your back-end, go to Extensions -> Plugin Manager, search for “CM Social Connect - Google+ integration” plugin.
Edit the plugin, you set “Status” to “Enabled”, enter the client ID and client secret of your project.
Save the plugin. Go to your site’s front-end, now you can see the Google+ icons in registration form, login form and login module.
Login form:
Registration form:
Login module:
Registration¶
In registration form of Users component, there are social network buttons, you need to click to connect to one of these social networks before registering a new Joomla! account.
After clicking one of the social network buttons, you are taken to this social network to authorize.
Facebook:
Twitter:
Google+:
After authorizing, you are taken back to the registration form, the form could look similar to this:
Your information like in the selected social network are filled into the form automatically, you can change them if you want. After proving missing information like password, you register as usual. If your registration is successful, you are logged in automatically and your new Joomla! account is connected to the selected social network, you can now login with this social network account.
Note:
- Username is generated automatically from your information on the connected social network.
- Twitter doesn’t provide email address of user, so if you connect to Twitter you will see empty email address fields in the registration form.
Login¶
After connecting to a social network and registrating a new account, you can now log into your site with the social network account you connect.
In the login form of Users component and in the CM Social Connect login module, you can click on the social network buttons to login without entering username and password.
Login form:
Login module:
Manage connections¶
Administrators¶
In your Joomla! back-end, you can see the list of connections of users to social networks.
You can select specific connections and click “Delete” button to delete them.
Registered users¶
If you set “Show in Users component’s profile” option in the component’s configuration to “Yes”, user can see his connected social networks in his profile
When editing his profile, user can connect to new social networks or remove connections for connected social networks.
After connecting to a new social network, he can log into the site by using this new social network’s account. If remove a connection, he can’t login with this social network any more.
If you don’t want to display social network info in user profile but still want to give your users ability to manage their connections, you can create a menu item for “User’s connections” from CM Social Connect component.
