Academy LMS now offers a user-friendly Social Login feature to simplify the login process. Social Login allows users to access the Academy LMS-powered website using their existing social media credentials.
Prerequisite #
You must Install and Activate Academy LMS 2.0 Free and Pro versions for this add-on to work.
Enable The Social Login/Register add-on #
Login to your Academy LMS installed website and navigate to Academy LMS > add-ons. Scroll down until you see the Social Login/Register add-on, and Turn it on.
Enable Social Login Options #
Now go to Settings > General and enable the Anyone can register option.
Now, click Academy LMS > Settings > Advanced, where you can see the social login settings are visible.
Now activate Facebook from the Social Login option and head to your website’s front end.
As you can see, the Social Login option for Facebook is available on the Login page.
Similarly, head back to your website, activate the Google from Social Login plugin, and click Save.
You can now see the login option on the front end of your website, which includes Google for social login.
You’ve successfully activated the Social login options on your site using the social login add-on from Academy LMS. Now, you must provide a Google Client ID to activate Google Login. Also, the Facebook App ID and secret key are needed to enable the Facebook Login process.
In both cases, you must create those client IDs and submit them to the Add-on to activate the login option. Check out the following instructions for creating the IDs.
Facebook App ID for Social Login #
Follow these steps to create a Facebook App ID to integrate with the Social Login add-on.
Go to the Facebook Developers website and log in with your Facebook account.
Click on the Create App option at the top-right corner of the page.
Choose Other When prompted to select what you want your app to do.
Choose Consumer when it comes to Selecting an app type for social login.
Now, enter a name for your app and click the Create App button.
In the app dashboard, find Facebook Login or click on Add Product and set it up by providing the necessary information.
Select Web as the platform to add Facebook login functionalities suitable for Academy LMS.
Now, Enter your website URL and Save the changes.
Also, add the Privacy Policy URL and data deletion URL. These URLs are required for handling and updating user data.
Go to the Facebook Login Settings page, enable the Login with the JavaScript SDK option, and add the allowed domains.
Toggle the app status to Live using the button at the top.
Go to the Academy LMS > Settings > Advanced > Social Login. Paste the App ID into the Facebook App ID field and click Save.
Facebook App Secret #
Now head back to your Facebook Developers Dashboard and click the app that you’ve already created.
Click App Settings > Basic and copy Facebook App Secret from this section. To show the app secret you need provide your login credentials.
Now, head back to your website and navigate to Academy LMS > Settings > Social Login and paste the Facebook App Secret.
You have now provided both the Facebook APP ID and Facebook APP Secret into the social login area. This enables users to log in to your website using their Facebook credentials.
Note: The Facebook App ID for user login process may take some time to get approved via Facebook.
Google Client ID for Social Login #
With the Google sign-in option, you can log in using your Gmail account. The Academy Social Login Feature requires a Google Client ID to activate login using Google.
Here are the steps to create a Google Client ID:
New Project Creation #
Sign in to your personal Google account using your credentials from the Google Sign-in page. Then, visit Google Developers Console and click on My First Project and then NEW PROJECT in the top right corner of the prompted window.
Enter a project name and click CREATE. If you are a part of an organization, add your organization.
Once created, the project dashboard will show traffic, errors, and medium latency.
OAuth Consent Screen Setup #
Now, click on the APIs & Services > OAuth consent screen from the left sidebar.
Select External for User Type (select internal if the project is for your organization) and click CREATE.
For the App Information section, provide the App name, User support email, App logo, and Developer’s contact email. Scroll down a bit and click the SAVE AND CONTINUE button.
For the App Domain, these data will be captured automatically:
- App homepage link
- App privacy policy link
- App terms & condition link
- Authorized domain names
Add required scopes by clicking on ADD OR REMOVE SCOPES and selecting Userinfo.email and Userinfo.profile.
Next, click the Update button and then click the Save and Continue button.
In the Test User section, carefully add test users by entering their email addresses and clicking Add.
You are allowed to add 100 users as test users on your app, but you can add more users upon verification. Proceed by clicking the SAVE AND CONTINUE button.
Review the summary thoroughly and scroll down when everything is perfect. Then click the Back To Dashboard option.
Lastly, click the Publish App button, which will make your App available to any user with a Google Account.
OAuth Client ID Creation #
To create your OAuth Client ID, select Credentials in the left sidebar. Then click + CREATE CREDENTIALS and choose OAuth client ID.
On the next screen, select Web application as the application type. Also, enter your application name and website URL.
Provide the Authorized JavaScript origins URL without any / at the end of the URL and click CREATE.
Now, you will be prompted with a window saying: OAuth client created. In this window, you will get the Client ID; just copy it.
Client ID Insertion on Social Login #
Insert the copied Google Client ID in the blank and click the Save button.
Now, return to your website’s front end and refresh the page. Click the Dashboard option to view the dashboard login form. As you can see, the Google Login Option is available in the login form. Users can now log in to your website using their Google Account within seconds.
Note: This is a login form for your site’s dashboard.
And that’s how you can use social logins with Academy LMS for your eLearning website!