Social Login (Facebook, google, twitter, LinkedIn)
  • TMD OpenCart Social Login Module

    ============================================

    It adds a social login option to your website. Website Customer can login using a social account to register or login to the website. It will help the customer to overcome the headache of the password. Social Login for Opencart gets real email id of a customer as email id is already verified on the social website.

Installation of Social Login Module 2.x_2.2.x_2.3.x

    • Step 1: Zip Extract
      Step 2: Two Folder
      Step 3
      Upload these folder by ftp correct location for example (admin to admin , catalog to catalog) (no core file effect)
      Step 4
      Go To Admin Panel > Extensions > Extensions Installer > Click On Upload Button
      Step 5: Upload TMD Social Login Module XML File
      Step 6
      Go To Admin Panel > Extensions > Modifications > Click On Refresh Button
      Step 7
      Go To Admin Panel > Extensions > Extensions > Select Module Click On Tmd Social Login Green Install Button
      Step 8: After That Click On Edit Button
      Step 9: Setting Tab
      FaceBook Tab

      Twitter Tab

      Twitter Apps Creation:


      * At first go to the https://apps.twitter.com/app/new and login at your Twitter developer account.

      * Create new apps with the following details.

      1.Name: Your application Name. This is shown to the user while authorizing.

      2.Description: Your application Description. This is shown to user while authorizing.

      3.Website: Your application website.

      4.Callback URL(*): After authorization, this URL is called with oauth_token

      * Now change the apps permission to Read and Write or Read, Write and Access direct messages. For change the apps permission, you need to add mobile number to your twitter account. If you are not able to add mobile number from the web, then please follow the below steps.

      * In order to use this process, you need to have a smart phone and install the Twitter mobile application. By this process you will be able to switch to Twitter application write access, although the Twitter websites doesn’t accept your phone number.

      * After installing the Twitter mobile application, go to the tab on the right, it’s the screen showing your user details. Hit the wheel (it’s shown under the amount of tweets) and click Settings.

      * After clicking on Settings, another view opens where you have to click on your account.

      * The following view shows the options for your Account – scroll all the way down and click Security.

      * After hitting the Security option, the application will ask you to add a phone.

      * After clicking Add phone, the mobile browser will open and require you to insert your phone number.

      * After adding the phone number and pressing save, wait a few minutes. Twitter will send you a link to the phone number you just added to verify it. After clicking the link in the SMS the phone number is approved and you should be able to switch the application access to write.

      * After the apps creation you have to click on Test OAuth. Also you should login with your twitter account for test OAuth. After that you would be redirected to the OAuth Settings page. At the OAuth Settings page you can see the Consumer key and Consumer secret

      * Congratulation! your apps creation has completed.

      Google Tab

      Google Project Creation:


      * Go to the Google Developers Console https://console.developers.google.com/

      * Select an existing project, or create a new project by clicking Create Project:

      1.In the Project name field, type in a name for your new project.

      2.In the Project ID field, the console has created project ID. Optionally you can type in a project ID for your project. But project ID must be unique world-wide.
      3.Click on the Create button and the project to be created within some seconds. Once the project is created successfully, the project name would be appearing at the top of the left sidebar.

      * In the left sidebar, select APIs under the APIs & auth section. A list of Google APIs appears.

      * Find the Google+ API service and set its status to Enable.

      * In the sidebar, select Credentials under the APIs & auth section.

      * In the OAuth section of the page, select Create New Client ID.

      1.Create Client ID dialog box would be appearing for choosing application type.

      2.In the Application type section of the dialog, select Web application and click on the Configure consent screen button.

      3.Choose Email address, enter Product name and save the form.

      4.In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins.

      5.In the Authorized redirect URI field, enter the redirect URL.

      6.Click on Create Client ID.

      * Now you can see the Client ID for web application section. Note the Client ID and Client secret that will need to use to access the APIs.

      Linkdin Tab

      LinkedIn App Creation:


      * Go to the Apps page at LinkedIn Developer Network and login with your LinkedIn account credentials https://www.linkedin.com/secure/developer

      * Click on the Add New Application link for create new App.
      * Enter the new application details into the app registration form.

      * Company Info: If you already have not any company page, select “New Company” and enter your company name.

      * Application Info: Enter all the application details and select “Live” option as “Live Status”.

      * Contact Info: Enter your contact details.

      * Select the LinkedIn API Terms of Use checkbox.

      * Click on the Add Application button.

      * Once the application is created successfully, application details would be displayed.

      * Keep the API Key and Secret Key for later use.

      Step 10
      Go To Admin Panel > Desgin > Layouts > Select Login Page Position
      Step 11: Login Page
      Step 12: Checkout Page Layout Position
      Step 13: Checkout Login

Installation of Social Login Module 3.x.x

    • Step 1: Zip Folder
      Step 2
      Go To Admin Panel > Extensions > Installer > Click On Upload Button
      Step 3: Upload TMD Social Login Module Zip
      Step 4: After Zip Upload Success Message
      Step 5
      Go To Admin Panel > Extensions > Modifications > Click On Refresh Button
      Step 6
      Go To Admin Panel > Extensions > Extensions > Select Module Click On Tmd Social Login Green Install Button
      Step 7: After That Click On Edit Button
      Step 8: Setting Tab
      FaceBook Tab

      Twitter Tab

      Twitter Apps Creation:


      * At first go to the https://apps.twitter.com/app/new and login at your Twitter developer account.

      * Create new apps with the following details.

      1.Name: Your application Name. This is shown to the user while authorizing.

      2.Description: Your application Description. This is shown to user while authorizing.

      3.Website: Your application website.

      4.Callback URL(*): After authorization, this URL is called with oauth_token

      * Now change the apps permission to Read and Write or Read, Write and Access direct messages. For change the apps permission, you need to add mobile number to your twitter account. If you are not able to add mobile number from the web, then please follow the below steps.

      * In order to use this process, you need to have a smart phone and install the Twitter mobile application. By this process you will be able to switch to Twitter application write access, although the Twitter websites doesn’t accept your phone number.

      * After installing the Twitter mobile application, go to the tab on the right, it’s the screen showing your user details. Hit the wheel (it’s shown under the amount of tweets) and click Settings.

      * After clicking on Settings, another view opens where you have to click on your account.

      * The following view shows the options for your Account – scroll all the way down and click Security.

      * After hitting the Security option, the application will ask you to add a phone.

      * After clicking Add phone, the mobile browser will open and require you to insert your phone number.

      * After adding the phone number and pressing save, wait a few minutes. Twitter will send you a link to the phone number you just added to verify it. After clicking the link in the SMS the phone number is approved and you should be able to switch the application access to write.

      * After the apps creation you have to click on Test OAuth. Also you should login with your twitter account for test OAuth. After that you would be redirected to the OAuth Settings page. At the OAuth Settings page you can see the Consumer key and Consumer secret

      * Congratulation! your apps creation has completed.

      Google Tab

      Google Project Creation:


      * Go to the Google Developers Console https://console.developers.google.com/

      * Select an existing project, or create a new project by clicking Create Project:

      1.In the Project name field, type in a name for your new project.

      2.In the Project ID field, the console has created project ID. Optionally you can type in a project ID for your project. But project ID must be unique world-wide.
      3.Click on the Create button and the project to be created within some seconds. Once the project is created successfully, the project name would be appearing at the top of the left sidebar.

      * In the left sidebar, select APIs under the APIs & auth section. A list of Google APIs appears.

      * Find the Google+ API service and set its status to Enable.

      * In the sidebar, select Credentials under the APIs & auth section.

      * In the OAuth section of the page, select Create New Client ID.

      1.Create Client ID dialog box would be appearing for choosing application type.

      2.In the Application type section of the dialog, select Web application and click on the Configure consent screen button.

      3.Choose Email address, enter Product name and save the form.

      4.In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins.

      5.In the Authorized redirect URI field, enter the redirect URL.

      6.Click on Create Client ID.

      * Now you can see the Client ID for web application section. Note the Client ID and Client secret that will need to use to access the APIs.

      Linkdin Tab

      LinkedIn App Creation:


      * Go to the Apps page at LinkedIn Developer Network and login with your LinkedIn account credentials https://www.linkedin.com/secure/developer

      * Click on the Add New Application link for create new App.
      * Enter the new application details into the app registration form.

      * Company Info: If you already have not any company page, select “New Company” and enter your company name.

      * Application Info: Enter all the application details and select “Live” option as “Live Status”.

      * Contact Info: Enter your contact details.

      * Select the LinkedIn API Terms of Use checkbox.

      * Click on the Add Application button.

      * Once the application is created successfully, application details would be displayed.

      * Keep the API Key and Secret Key for later use.

      Step 8
      Go To Admin Panel > Desgin > Layouts > Select Login Page Position
      Step 9: Login Page
      Step 10: Checkout Page Layout Position
      Step 11: Checkout Login

How To Social Login Module Journal3 Layout Setting

    • Step 1
      Go To Admin Panel > Journal > Layouts > Click On Account Edit Icon
      Step 2
      Click Content Top > Click Add Row Button > and Select Module
      Step 3: Click Opencart
      Step 4: Select TMD Social Login Module
      Step 5: Click Save Button And Clear Cache Button
      Step 6: Click Login Popup

      Step 7
      Go To Admin Panel > Journal > Layouts > Click On Checkout Edit Icon
      Step 8
      Click Content Top > Click Add Row Button > and Select Module
      Step 9: Click Opencart and Select TMD Social Login Module

      Step 10: Click Save Button And Clear Cache Button


      Step 11: Checkout Page

How To Make Facebook Application

    • Step 1: Please open this url
      https://developers.facebook.com/apps
      Step 2: Click on Add New app as per screen shoot
      Step 3:
      Complete your information , like your app display name and email address
      Step 4:
      After feel information you can see bottom screen shoot select facebook login
      Step 5: Now select web
      Step 6: Now put your website url like:
      https://www.yourwebsite.com Make sure its will match with your config HTTP_SERVER if you are using SSL then HTTPS_SERVER
      Step 7:
      please input your website name on APP Domain www.yourwebsite.com
      Step 8: Callback url Please use
      For Opencart 2.x.x_2.2.x
      yourwebsiteurl/index.php?route=module/tmdsociallogin/fbredirecturl

      For Opencart 2.3.x_3.x.x
      yourwebsiteurl/index.php?route=extension/module/tmdsociallogin/fbredirecturl
      Step 9: How To Get Information

How To Make Twitter Apps Creation:

    • Step 1: Please open this url
      https://apps.twitter.com/app/new
      Step 2:

      Please complete this information , as per your website

      Step 3:

      Website : you need put your website url, like https://www.yourwebsite.com
      Make sure its will match with your config HTTP_SERVER if you are using SSL then HTTPS_SERVER


      Callback url Please use

      For Opencart 2.x.x_2.2.x

      yourwebsiteurl/index.php?route=module/tmdsociallogin/twitredirect


      For Opencart 2.3.x_3.x.x

      yourwebsiteurl/index.php?route=extension/module/tmdsociallogin/twitredirect

      Step 4: How to get information

How To Google Developers Console

    • Step 1:
      Go to the Google Developers Consolehttps://console.developers.google.com/
      Step 2:

      Select an existing project, or create a new project by clicking Create Project: 1.In the Project name field, type in a name for your new project. 2.In the Project ID field, the console has created project ID. Optionally you can type in a project ID for your project. But project ID must be unique world-wide. 3.Click on the Create button and the project to be created within some seconds. Once the project is created successfully, the project name would be appearing at the top of the left sidebar.

      Step 3:

      In the left sidebar, select APIs under the APIs & auth section. A list of Google APIs appears.

      Step 4:

      Find the Google+ API service and set its status to Enable.


      Step 5:

      In the sidebar, select Credentials under the APIs & auth section.

      Step 6:

      In the OAuth section of the page, select Create New Client ID. 1.Create Client ID dialog box would be appearing for choosing application type. 2.In the Application type section of the dialog, select Web application and click on the Configure consent screen button. 3.Choose Email address, enter Product name and save the form. 4.In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, or subdomains, then you can enter multiple origins. Website : you need put your website url, like https://www.yourwebsite.com Make sure its will match with your config HTTP_SERVER if you are using SSL then HTTPS_SERVER 5.In the Authorized redirect URI field, enter the redirect URL. Callback url Please use For Opencart 2.X yourwebsiteurl/index.php?route=module/tmdsociallogin/gogleredirect For Opencart 2.3.x and 3.x yourwebsiteurl/index.php?route=extension/module/tmdsociallogin/gogleredirect

      Step 7:

      Click on Create Client ID. Now you can see the Client ID for web application section. Note the Client ID and Client secret that will need to use to access the APIs.

icon

Contact Us

If you have question which is beyond this knowledgebase Kindly contact us

Write to Us Now