Social Login is an add-on for QloApps. This will allow your users to log in to your website via Facebook and Google accounts.
This is high time now. We can not ignore the power of social media anymore. We all know that any internet user out there has an account either on Facebook or Google.
So allowing the users to use their Facebook and Google accounts to login to your website will not only make the booking process easy but also will increase the productivity of your website.
From the user’s point of view, it is difficult to remember passwords for all the websites that we use.
Hence to answer this need we have brought in front of you QloApps Social Login. Let us understand how this module works and what are its features.
Features
- One-click registration process.
- Easy to integrate user accounts into the store.
- Admin has to provide their credentials for Facebook and Google.
- Admin has to create Facebook and Google apps.
Installation Of QloApps Social Login
The installation of any module is very simple in QloApps.
- Go to Module and Services tab
- Click on Add New Module
- Now upload the Zip file of Module and click on Install
Note:
For displaying the social login button on the front end you have to add code on the following tpl files:
On yourhotelcommercefolder/themes/hotel-reservation-theme/authentication.tpl
Add
{hook h="displayWkSocialLoginBtn"}
after the submit button having ID “SubmitLogin”.
This is a simple process you just have to copy the hook from here and paste it at the right place. Open the file that is mentioned above and search for the button with id=”SubmitLogin” then paste the copied hook after this button.
Configuring the QloApps Social Login
After the module installation, a menu will be created in Hotel Reservation–> Settings
Click on this button so that you can configure the module.
How to get API Keys
To enable the Facebook and Google login tab, you need to provide the Facebook app ID and Google app client ID.
How To Get Facebook API Credentials?
To obtain a Facebook App ID, you have to create a developer account on Facebook. Admin can create a developer account using this link: https://developers.facebook.com/
- Facebook will ask you to create an external application linking your website to their API.
- App ID and App Secret can be also referred to as Consumer Key and Secret or Client ID and Secret)
You have to follow the below-mentioned steps to obtain the Facebook App ID:
- Click on the mentioned link to start the process of generating the Facebook credential: https://developers.facebook.com/
- Sign in or create a new account on this platform.
3. After completing the login process, click on My Apps.
4. After the My App page opens up, click on the “Create App” option to proceed further.
5. Select the “other” option in the dialogue box.
6. Next, Select the none option in the dialogue box and then click on the next button.
7. Now add the details in two fields:
- Add an App Name: Add the name of your app in this section.
- App Contact Email: Add your email ID for contact in this section.
After adding details in above mentioned fields, click on the “Create App” button.
8. Click and open the “Set Up” button of “Facebook Login”.
9. Now open the left side menu and select settings from the same.
10. Enable the following Client OAuth Settings:
- Client OAuth Login
- Web OAuth login
- Enforce HTTPS
- Deauthorize callback URL: Add the URL of your page in this section
- Data Deletion Request URL: Add the URL of your webpage
Once you have filled in all the required details, click on Save Button to proceed further.
11. Now, you have to obtain the app ID and app secret by clicking on “App Setting” and then selecting Basic.
How To Obtain Google API Credentials?
To get the Google app ID, the admin will have to first create an account on the Google Developers console.
- Next, he will create a project by clicking on Project -> New Project.
- Add the name of your project.
Note: Please note that you should not include any Google Word for your project name.
After creating the project, you have to create a new application. Here are the steps to create an application:
- Go to your API & Services ->Library
2. Now, Go on the Credentials menu option and select create credentials option.
3. Select the OAuth client ID option from the drop-down.
4. Next click the “Configure consent screen” button to configure the consent screen.
5. Add the name of your hotel or property and click on the save button.
6. Now, Select the Application type and add the Authorized JavaScript origins and the Authorized redirect URLs. After adding the details, click on the Create button.
Note: Example to set the OAuth Redirect URL– www.example.com/socialsignup/google/connect/
7. The last step is to click on the Create button and then the Client ID and Client Secret will be provided to you.
Front-End
Now, admin can have Facebook and Google login tab at the front end for login.
Conclusion
This was all from the QloApps Social Login. I hope I was able to clarify the functioning of the module to you.
If you want to learn about the functionality of QloApps then you can visit this link: QLO Reservation System – Free Open-Source Hotel Booking & Reservation System
In case of any query, issue or requirement please feel free to raise it on QloApps Forum
Lastly, do not forget to drop your thoughts in the comments.
Be the first to comment.