Facebook Login is the easiest way to integrate the login system on the website. Facebook Login allows users to log into the web application with their Facebook account without registration on your website. Facebook provides various SDK or API to Login with Facebook functionality on the website. But Facebook SDK for JavaScript is the most user-friendly way to integrate Facebook Login on the web page.
Facebook JavaScript SDK allows the user to sign-in to your website with their Facebook credentials. Using JavaScript SDK, you can implement the user login system with Facebook account on a single page without page refresh. In this example script, we will authenticate the user with Facebook login credentials and fetch the user profile data from Facebook using JavaScript SDK.
facebook js sdk login example
There are two primary ways to let a user login to Facebook via your app. You can try to do this automatically for the user, or you can integrate a login button on your site that the user has to click to login to Facebook via your app. You can also do both.
The button above will be unstyled before the SDK loads, which you may not like. Facebook provides another method of including a login button on your site that supports a sort of loading indicator before the SDK loads:
The first argument of FB.login is a callback function that will be called once the user has finished with the login popup. That callback receives one argument, which is the authorization response from the SDK, and you can pass that straight to your statusChangeCallback function.
If you use one of the Facebook-supplied login buttons described above and include the onlogin attribute, the SDK will call that function when the user finishes interacting with the login popup. In that function, you can check if the user successfully logged in, then pass that authorization response to the same statusChangeCallback function:
We discussed above that the first argument of FB.login is a callback function that will be called after the user interacts with the login popup. The second argument that FB.login accepts is a set of properties. Probably the most important is the scope property, as this is where you define what permissions you would like the user to approve for your app. The list of possible permissions is available in the documentation. Note that most permissions you request from users require app review by Facebook before you can actually request them live on your website. The review process can be laborsome and confusing, so be prepared. It often requires detailed explanation of why you are requesting the permission and even a screen recording of exactly how you are using it on your site.
FB.getLoginStatus: This function should get used on page load, right after FB.init. The major advantage of using this instead of a server side login process (with the PHP SDK, for example) is that it will refresh the User Token without page refresh. That is another benefit of using the JavaScript SDK, and its a pretty important one.
FB.api: This is actually not about the login process anymore, its just a basic API call to get the basic user data in the example. FB.api can only be used after FB.init. Should be obvious though, you cant use the API before initializing the SDK.
return_scopes: Asking for permissions in the authorization process is not a sure thing. The user can just deselect the email permission in the authorization popup, for example. Its quite easy to check for the authorized permissions by setting return_scopes in FB.login, as you can see in the code. If you add that parameter, you will get a list of all granted permissions in the grantedScopes field of response.authResponse.
isomorphic apps dont just run the exact same code on server and client, they share parts of the codes. for example, you can use the same components if you work with react. of course the javascript sdk only works client side, so thats not really isomorphic.
thats a basic browser feature, to block popups/ad-iframes. you can only call FB.login on user interaction, as it opens a popup.loading the js sdk after a user clicks on a login button does not make any sense, you need the js sdk to make the login work.
The above code will render as a Facebook branded button which will show whether a user is logged in or not on your application/website. If not, it will show login text, after clicking on it, a small pop-up window will appear to the user with the request permission page. After use allows the permission, this window will close, the button will show logout text as user is now logged in after allows the permission.
Here I have tried to give you a very basic introductory overview and examples for facebook javascript API. You can refer to the official facebook javascript API documentation for more details options you can use. Also, you will be able to test and run your javascript api code in the javascript test console. Here are the links to those resources:
Hello Sir, I want to add button of add photos on my web application like facebookAnd then I want to share selected image on facebook wall.Please give me code or Any Idea. My EmailID is gautammithilesh15@gmail.com.Thanks
The first time you login with Facebook an account is registered in the Vue app with your Facebook id so it can identify you when you login again with Facebook. The account is created with the name from your Facebook account and an extraInfo field with some default text, both the name and extra info can be updated in the Vue app, and updating account details only changes them in the app it doesn't affect anything on Facebook.
To integrate Facebook Login into a website or application you need to create a Facebook App at and set up the Facebook Login product under the App. Creating a Facebook App will provide you with a Facebook App ID which is required when initializing the Facebook JavaScript SDK (FB.init(...)). For more info see the Facebook Login docs at -login/web.
The example Vue.js app uses a Facebook App named JasonWatmore.com Login Example that I created for this tutorial (App ID: 314930319788683). The Facebook App ID is located in the dotenv file (/.env) in the example, environment variables set in the dotenv file that are prefixed with VUE_APP_ are accessible in the Vue app via process.env. (e.g. process.env.VUE_APP_FACEBOOK_APP_ID). For more info on using environment variables in Vue see -and-env.html#environment-variables.
The example Vue app runs with a fake backend api by default to enable it to run completely in the browser without a real api (backend-less), the fake api contains routes for authentication and account CRUD operations and it uses browser local storage to save data. To disable the fake backend you just have to remove a couple of lines of code from the main.js file, you can refer to the fake-backend to see what's required to build a real api for the example.
Authentication is implemented with Facebook access tokens and JWT tokens. On successful login to Facebook an access token is returned to the Vue app, which is then used to authenticate with the api (or fake backend) which returns a short lived JWT token that expires after 15 minutes. The JWT is used for accessing secure routes on the api, and the Facebook access token is used to re-authenticate with the api to get a new JWT token when (or just before) it expires. The Vue app starts a timer to re-authenticate for a new JWT token 1 minute before it expires to keep the account logged in, this is done in the apiAuthenticate() method of the account service.
Each feature has it's own folder (home & login), other shared/common code such as services, helpers etc are placed in folders prefixed with an underscore _ to easily differentiate them from features and group them together at the top of the folder structure.
The auth guard is a Vue Router Navigation Guard function that prevents unauthenticated users from accessing restricted routes. If the function executes next with no arguments (next()) the navigation is confirmed and allowed to proceed, otherwise if the function executes next with a route object (next( path: '/login', query: returnUrl: to.fullPath )) the navigation is aborted and the user is redirected.
In order to run and test the Vue.js app without a real backend API, the example uses a fake backend that intercepts the HTTP requests from the Vue app and sends back "fake" responses. This is done by monkey patching the axios request methods (get, post, put, delete) to return fake responses for a specific set of routes.
The init Facebook SDK function runs before the Vue app starts up in main.js, it loads and initializes the Facebook SDK and gets the user's login status from Facebook. If the user is already logged in with Facebook they are automatically logged into the Vue app using the Facebook access token and taken to the home page, otherwise the app starts normally and displays the login page.
The linkActiveClass: 'active' parameter passed to the router sets the active CSS class for router-link components to active, this is so the nav bar links in the example show as active with Bootstrap CSS (the default class is router-link-active).
On successful login the api returns the account details and a JWT token which are published to all subscriber components with the call to accountSubject.next(account) in the apiAuthenticate() method. The method then starts a countdown timer by calling startAuthenticateTimer() to auto refresh the JWT token in the background (silent refresh) one minute before it expires in order to keep the account logged in.
The logout() method revokes the Facebook App's permissions with FB.api('/me/permissions', 'delete') then logs out of Facebook by calling FB.logout(), revoking permissions is required to completely logout because FB.logout() doesn't remove the FB auth cookie so the user is logged back in on page refresh. The logout() method then cancels the silent refresh running in the background by calling stopAuthenticateTimer(), logs the user out of the Vue app by publishing a null value to all subscriber components (accountSubject.next(null)) and redirects to the login page. 2ff7e9595c
Comments