I. Introduction

In this tutorial, I will demonstrate how to perform Facebook Login in Vue 3 with a sample application that allows you to log in with Facebook and view / update / delete the registered account in the Vue app based on a post. written by Jason.

The first time you log in with Facebook, an account will be registered in the Vue app with your Facebook id so that it can identify you when you log back in with Facebook. An account created with a name from your Facebook account and an extraInfo field with some default text, both name and additional information can be updated in the app, but updating account details only changes. them in the app without having an effect on Facebook.

II. Create Facebook App

My application has 3 main routers to perform login function, display a list of all accounts and edit accounts.

Login (/ login) – contains a Facebook login button that activates authentication with Facebook and registration / authentication with Vue.js. Home (/) – shows a list of all accounts in the Vue app with buttons to edit or delete any of them. Edit Account (/ edit /: id) – contains a form for updating account details.

1. Create App Fakebook

First we need the Facebook App for Facebook Login To integrate Facebook Login into a website or app, you need to create a Facebook App at https://developers.facebook.com/apps/ and set up your account. Facebook login in the App. Creating the Facebook App will give you the necessary Facebook App ID when initializing Facebook’s JavaScript SDK (FB.init (…)). For more information, see the Facebook Signing documentation at https://developers.facebook.com/docs/facebook-login/web .

After creating a Facebook App you will get an ID used for logging in. For example, here I have the login ID that I created for this tutorial (app ID: 314930319788683). This Facebook application ID you need to add in the dotenv file (/.env). With the name VUE_APP_FACEBOOK_APP_ID or another name, you can choose). To call the ID in vue you can use this way process.env. <Variable name> (eg process.env.VUE_APP_FACEBOOK_APP_ID). If you need more information on how to use environment variables in Vue, see https://cli.vuejs.org/guide/mode-and-env.html#enosystem-variables .

2. Fake API backend

You can simply understand that in order to run the King application we need to call the api to the backend to handle the task, but here we will fake the api backend to allow it to run completely in the browser without an api. backend-less. The pseudo apk contains routes to authenticate and operate the CRUD account, it uses the browser’s local memory to save the data. To disable the fake-backend, simply remove a few lines of code from the main.js file, which I will guide below.

3. Scope of influence when updating

Updating or deleting account information in the Vue 3 app will only change the data saved in the app, it won’t (and can’t) change anything in the linked Facebook account.

4. Authentication flow with Facebook access tokens and JWT tokens

Authentication is done through the access token of Facebook and the token of JWT. Upon successful login to Facebook, the access token is returned back to the Vue 3 app, which is then used to authenticate with the api. The JWT token will expire after 15 minutes and is used for secure access on the API and the Facebook access token is used to re-authenticate with the api to receive a new JWT token or when it expires. The Vue app starts the re-authentication timer for the new JWT token 1 minute before it expires to keep the account logged in we can use apiAuthenticate () method.

III. Run the application.

1. Install Node.js and npm from https://nodejs.org
2. Download or copy the project’s source code from https://github.com/cornflourblue/vue-3-facebook-login-example
3. Install all required npm packages by running npm install from the command line in the project root directory (where package.json is located).
4. Start the application in SSL (https) mode by running npm run serve: ssl from the command line in the project root directory, SSL is required for the Facebook SDK to run properly, this will launch the browser with URL https: // localhost: 8080 /. You should see the message Your Connection is not private (or something similar in non-Chrome browsers), which is nothing to worry about just because the Vue development server runs with the certificate SSL. To open the application, click the “Proceed” button and link to the server “localhost”.

IV. Project structure.

1. Structure

Vue-CLI is an NPM package that is installed worldwide to provide vue in the terminal. By using Vue Create, Vue serve it will assist you in building projects easily and quickly.

2. Main Index Html File

Path: /public/index.html The index.html file is the first page loaded by the browser to start everything up. The Vue CLI (with hidden Webpack) packs all the compiled javascript files together and puts them in the body of the index.html page so the browser can load and execute the scripts.

3. Auth Guard

Path: /src/_helpers/auth.guard.js Auth guard is a Vue Router Navigation Guard that helps prevent unauthenticated users from accessing restricted routes. If the function returns true, the navigation is confirmed and allowed to continue, otherwise if the function returns false, the navigation is canceled.

Vue router guards navigation are attached to routes in the router configuration, these authentication guards are used in router.js to protect home and modify account routes.

4. Error Interceptor

Path: /src/_helpers/error.interceptor.js

Error Interceptor intercepts http responses from the api to check for any errors. All errors are logged in the dashboard and if there is a 401 Unauthorized or 403 Forbidden response the account will be automatically logged out of the application.

It is implemented as an axios response interceptor, by passing callback functions to axios.interceptors.response.use (), you can intercept responses before they are processed by then () or catch. (). The first callback function intercepts successful responses and the second callback function intercepts error responses. For more information about the axios blocker, see https://github.com/axios/axios#interceptors .

The error blocker is launched on application startup in the main.js file.

5. Fake Backend

Path: /src/_helpers/fake-backend.js

To run a Vue 3 application without the API backend, this example will fake the backend by blocking HTTP requests from the Vue application and returning “fake” responses. This is done by returning fake responses when calling axios requests (get, post, put, delete).

The fake backend is written as a handleRoute () function that checks requests for urls and methods to determine how requests are handled. For fake routes, one of the router functions will be called, and for all other routes, the request is forwarded by calling the axios request function (axios [ original $ {method} ] (url, body ( ))). Below the router functions helper functions are used to return different types of responses and perform small tasks.