Facebook - Plugin
The Facebook plugin allows you to integrate Facebook into your web application so that users can sign up or login to the web app through their Facebook accounts.
Follow these steps to successfully integrate LinkedIn into your web app:
Steps to Install Facebook Plugin
Step 1: Login to Facebook Developer Console
Go to Facebook Developer and log in using your Facebook credentials.
NOTE: Please do not log in using a business account as Facebook will not allow you to create an app if you do so.
Step 2: Open My Apps
Come back to the Facebook Developer page and click the My Apps button.
Step 3: Create App
Click the Create App button located in the top right side of My Apps page.
Step 4: Select the App Type
Choose Consumer as the app type. It connects consumer products and permissions such as Facebook login.
Once done, click the Next button.
Step 5: Add App Details
Add App Display Name and App Contact Email. Then, click the Create App button.
Step 6: Facebook Login Set Up
Once you have landed on the App dashboard, select Facebook Login, click the Set Up button.
Step 7: Select a Platform for Your App
Now choose a platform for your app. As you are building a web app, the option, Web is the suitable one.
Step 8: Add Your Web App URL
To set Web as the platform, add the URL of your web app and click the Save button.
Step 9: Open Facebook Login Settings
Click on "Settings" in the sidebar under Facebook Login.
Step 10: Add Valid OAuth Redirect URLs
Ensure Client OAuth Login and Web OAuth Login are on, if not then turn them on. Also, put the valid redirect URL (i.e. the URL of the your web app on DrapCode) in the field, Valid OAuth redirect URLs.
Step 11: Allow Domains for the JavaScript SDK
Now add the URL of your web app in the Allowed Domains for the JavaScript SDK field. Once done, click the Save Changes button.
Step 12: Open Basic Settings
Click on the "Basic" category under Settings in the sidebar.
Step 13: Add App Details
Add a display name for your app, add your web app URL in the App Domains field and give your email ID. Also, provide the Privacy policy link and add the same link in the User data deletion field. ( Dummy: https://www.freeprivacypolicy.com/live/084cf9bb-79c9-407f-bdd5-4e802a38fa66)
Once done, click the Save Changes button.
Step 14: Change the App Mode/Status
Change the status of the app from Development to Live from the top-right corner.
Now your Facebook app is ready. You can start implementing the Facebook login.
Step 15: Go to DrapCode Builder
Go to the App builder and open plugins. Find the Facebook Login plugin and click the install button.
Step 16: Copy Client ID & Client Secret
Copy the Client ID and the Client Secret key previously generated.
Step 17: Install the Facebook Plugin
Paste the copied client ID and client secret key in the respective feilds assigned for them on the Facebook Login Installation page on the builder.
Once done, click the Install Plugin button.
Step 18: Go to Events
As click you on the install button, Facebook login plugin will get successfully installed as shown below in the image. Now, click on the events icon in the top bar and open events.
Step 19: Social Login/Sign Up Event
Create a new event and add Social Login/Sign Up event action.
Step 20: Choose Google As Provider
Select user role, choose Google as provider and select the page you users to land on after logging in via Facebook account. Once done, click the Save button.
Step 21: Open the Login Form
If you have already installed Login/Sign Up plugin, then the login form page will have the Facebook login button. If not, then go to the Social category under Components and drag and drop a Facebook button in your Login form.
Step 22: Bind the Event
Open the settings of the button and change the type from Submit to Button. As you change the type, option to bind a workflow event would appear. So select the Google Login event from the list.
Step 23: Test the Facebook Login
Now, open the page in the preview or publish mode to see how the logging in through Google works.
