Vue.js & Django Social Scheduler: connect Facebook Pages using API

In this video I'm explaining how I'm connecting the Facebook Pages in my Social Scheduler app using the official API.

Transcript

00:00In this video, I'll explain how I'm connecting Facebook pages in my social scheduler app.

00:11And, to connect the Facebook pages, I need to click on this button.

00:20And, it will connect the Facebook pages in my application.

00:34Now, let's take a look at the code.

00:39I have an event handler for clicks on the Connect button.

00:51When I click on this button, it triggers this function.

01:03And, this function opens a pop-up with this view file.

01:19And, I'm using an unmounted hook here to execute an HTTP request after the component has been rendered.

01:36The scope of this request is to request a URL redirection for Facebook to request an authorization code with permissions to grant.

02:01Sure, I could generate this URL directly here.

02:09But, I don't want to use the Facebook application ID and secret in multiple places like frontend and backend.

02:26For this reason, I'm using the Facebook credentials only in the backend.

02:38When this request returns the redirect URL, I'm using it to redirect the user to the Facebook login page

02:52where the user should grant the permissions.

02:59Then, the user will be redirected to this URL which will call this view.

03:29In this view, I'm using the unmounted hook with HTTP request

03:39where I will use the authorization code to exchange for an access token in the backend.

04:09If the access token was obtained successfully, I will request the Facebook pages and I will save them in the database.

04:39And, finally, I will close the model or pop-up and will reload the social accounts.