Creating the Facebook app

The first thing we need to do is to create the Facebook app. Doing that is just as easy as following the mentioned steps:

Go to the Facebook Developer page at https://developers.facebook.com/.

In order to access most of the Facebook Developer page's features, we need to log in using a Facebook Developer Account; to achieve such status, depending on the Facebook policies for your country, you might be asked to verify your identity using a mobile number or a credit card. For detailed information about upgrading your account to a Facebook Developer Account, you can take a look at https://www.facebook.com/help/167551763306531.

Once inside, click on Add a New App:, select Website, fill in the required fields, and click on Create App ID:

It's worth saying that external provider web platforms are subject to frequent and major changes; the actual pages and forms might be different from those depicted by the screenshots made at the time of writing.

As soon as we get past the CAPTCHA, a new Facebook app will be added to our account, and we'll be automatically brought to the Add Products selection screen.
Once there, we should be able to add a new Facebook Login product by selecting the appropriate card and clicking on the Set Up button:

We should then be prompted by a wizard-like view where you can choose between various platforms: iOS, Android, Web, and Other; we can choose Web and go ahead.

In the following wizard-like screen, we'll be asked for our main website URL. Ensure that you specify the development URL there, including the port:

http://localhost:14600/

This step is very important for both implicit and explicit flows; all the HTTP requests coming from any other URL will be rejected by Facebook. It goes without saying that we'll have to change it as soon as we'll publish our app, but that will go for now.

In the subsequent parts of the wizard, we'll be given the chance to read about the Facebook JavaScript SDK, which is the client-side framework made by Facebook with the intent to provide web developers a standard, easy-to-use interface to implement the whole auth process to their website. Take a good look at those sample code lines, because that's precisely what we'll use when implementing our implicit flow, with some minor changes to make them work in Angular.

Once done, select the Facebook Login | Settings link from the left menu. From there, we can enter our production and development URIs with the /auth/signin-facebook route suffix in the Valid OAuth Redirect URIs input field:

We're free to chose a different route if we prefer to, as long as we'll configure it within our web application later on. Anyway, when we're done, we can click on Save Changes and go ahead.

Again, this is a very important step for explicit flow only, as implicit flow won't use them; the good news here is that we can specify multiple URIs; hence, we can add the development and production host names right from the start.

By clicking on the Settings link in the left navigation menu, we can retrieve the AppId and AppSecret of our Facebook App--ensure that you write them down--and configure some additional information regarding our Facebook App: the Display Name, the App Icon, the WebSite URL we entered a short while ago, and so on. None of them are required, so we can skip everything and click on the App Review link, where we have the chance to make our app available to the public. All we need to do here is to turn the switch on:

As soon as we do that, we will see a list of Approved Items, containing the default information we'll be able to access when our users will confirm their choice to log in to our site with Facebook; as we can see, the first one among them is the user email address, which we'll need soon enough.

Table of Contents for Creating the Facebook app

Create new playlist

Sign In

Sign Up

Table of Contents for
Creating the Facebook app