I tried two days trying to implement facebook login in my electron application. I went through lots of forums and lots of documentation. After much searching and combining what I found in multiple articles and forums answers, I made it to work. So I thought I should share how I implemented facebook login in my electron application.
To begin, let’s clone the starter templated by electron developers themselves
git clone https://github.com/electron/electron-quick-start.git
This should clone the repository. Let’s just rename the project directory to
Let’s cd into the
electron-facebook directory and run
yarn install (If you don’t know what yarn is or don’t have yarn already, it’s a wonderful replacement for npm. visit https://yarnpkg.com for more details.)
This should install the dependencies required, which in this case is only one
Once the dependencies are install just run
yarn start and this should run electron hello world program.
So let’s begin what we are here to do, implement facebook authentication system in electron based desktop applications.
While in your project root directory in your terminal run
yarn add fb
This should add NodeJS Library for facebook. We will use this later to access facebook api.
Let’s add a button to allow user to Login with facebook and some other tags to display user’s profile after login is completed successfully.
index.html and replace the body of the html file with following code
Nothing fancy here, requiring electron IpcRenderer to send message from renderer process to main process. A button showing login with facebook,when user clicks, message is sent to the main process to authenticate with facebook. A table with bunch of rows and columns to show user profile name, id and picture if login is successful.
- Goto https://developers.facebook.com and if you have not already logged in, login.
- On the top right, there is a menu called My Apps, hover over My Apps and you will see the list of apps you host, also there is an option Add a New App below the list of your apps, click on Add a new App
- You then will be provided with a new App dialog, fill in the dialog and click on the “Create App ID” button. You can use the display name, contact email and category of your desire.
- Confirm the security check in the next dialog, solving the provided Captcha.
- If everything goes well, you will be redirected to your newly created apps Product Setup Page. And at the top left corner you can see your App ID. We will need that in next step.
- At this page, choose, Facebook Login and click get started button at the right side of the option
- You will see the Choose platform, however we do not want any platform, we want to build login flow manually, so skip this, on the left sidebar click on Settings submenu of facebook login and you will see the as in the following image
- In the Valid OAuth Uri field add the following
https://www.facebook.com/connect/login_success.htmland click save changes button at the bottom right.
And that’s done
main.js file and at the end add the following codes
In this part, we are manually building the facebook login progress as discussed here in facebooks documentation.
In place of place the App ID of the app you created in previous step.
Now, launch your electron app using
yarn start command at your project root from terminal.
You will see the following window
Click on the Sign in With Facebook button and following window should popup
Login with your username and password and you will see the authentication screen as follows
Once you click continue, the popup window should close, and you should see your info being loaded in the main window as follows
That’s it, this is the facebook login system implemented in electron, that actually works.
Please provide us with comments on what do you think.