Configuring sign up and sign on options to leverage Facebook is actually not terribly difficult. And really only consists of a couple key steps. First, you need to create a Facebook application and then, you need to configure Facebook as an identity provider in the Azure tenant. Lastly, you need to configure your application to leverage the actual authentication of Facebook. One key thing to note here is that using Facebook to login to applications does require an Azure active directory B2C Tenant. 

The standard Azure active directory tenant doesn't work, you need a B2C Tenant. In this demonstration, I'm going teach you how to configure a basic Azure web app to use Facebook for authentication. To prepare for this demo, I've already deployed An Azure active directory B2C Tenant and I also deployed a basic PHP web application in Azure. As we work through this demonstration, we'll create the Facebook application first. We will then configure Facebook as an identity provider in the Azure tenant. 

Lastly, we'll configure the web app to use Facebook for authentication. for granting access to the application. Using Facebook as an identity provider in Azure active directory B2C requires you to first create a Facebook application and supply it with the proper parameters. As such, you're going to need a Facebook account to do this. Now, to create a Facebook application, what you need to do is visit the Facebook for developers website and sign in with the Facebook account credentials. 

You're also going to need to register as a Facebook developer. To do this, you would simply visit the developer website and I'm going to switch over here, It's actually developers.facebook.com and what you would do is you would click register, accept the policies and then complete the free registration. I already have a developer account so I don't need to go through the registration process and to be honest, this particular demonstration isn't about registering with Facebook it's about Facebook as an identity provider within Azure. Once you've registered as a developer you need to start the process of creating a Facebook application. To do that, click My Apps here up in the upper right hand corner. And then click add new app. You're going to need to provide a display name and a valid contact email address here. 

So what we'll do for our display name for our application, we'll call it my demo application. And we'll keep my throw away email here as my contact. Create the new app id, we simply click create app id. If you're prompted to confirm that you're not a robot, go ahead and confirm that you're not a robot. After creating the app id, what you need to do is over in the left column click settings. And then basic. So in this configuration screen, we're gonna make some changes to create our application. First thing we're gonna do is select a category, and this category can be anything, but what I typically do is select business and pages. After selecting our category, you can scroll down to the bottom here and click on add platform. Since we're creating this application to integrate authentication for a website, we'll select website. In the site url field, enter the url of the web app and then what we'll do is we'll click save changes. 

The url of the web app can be tracked down through the Azure dashboard by clicking on the application. As you can see here up in the upper right hand corner we have a url for our application. So we'll copy this url and this gets pasted into the site url screen. At this point we can save our changes. After saving our changes, we're presented with an app id and an app secret. We need to note both of these. To view the app secret we can click show and then we're prompted to re-authenticate to Facebook. In addition to our app id and our app secret we also have to specify a privacy policy to conform with Facebook privacy policies. 

Typically this would be a privacy policy page on the website that you're giving people access to. For this demonstration, I'm just going to use my understandingazure.com just as a filler. From here we can click save. Next we need to add a product. The product we're going to add is the Facebook login. So from the add a product screen, we click setup under Facebook login. Now instead of using the quick start here to configure the Facebook login we're going to click settings underneath. On the client oauth settings screen, we need to provide valid oauth redirect URIs. And what these URIs do is prompt for a login when a person hits the website and isn't logged in to Facebook and at the same time it also allows when a person is logged into Facebook to get the little prompt that says, we're going to share your information with this application. 

We're going to do here is paste in two URLs here. As you can see here, the first valid oauth redirect URI is actually the url of the website with a trailing signin-facebook. The second URI that we're going to enter is the same thing, we have the url to our application but we're trailing it with a .auth/login/Facebook/callback that's the call back url. After adding the redirect URIs we click save. Now you can see up here, it's hidden, it tells me that it's actually saved. So we now have the application in Facebook created, however before the Facebook application is usable my Azure AD B2C it needs to be made publicly available. You can make the application publicly available by clicking app review on the left navigation here and setting the make my demo application public switch to yes. It will ask you if you're sure and you can confirm it. 

With the Facebook application created and configured you can figure Facebook as an identity provider in the Azure tenant, which is what we're going to do now. With the Facebook application created and configured, we can now configure Facebook as an identity provider within the Azure Tenant. To configure Facebook as an identity provider what we do is, we switch over to the tenant and we browse to the B2C features blade in the Azure portal. From the B2C features blade here we simply click identity providers. 

After clicking on identity providers, click add at the top of the screen here and provide a friendly name for the identity provider configuration. You may typically call this Facebook. Next, click on identity provider type and select Facebook from the list. And then click okay. At this you click setup this identity provider and then you need to supply the app id and app secret from the application in Facebook. We supply the app id and the app secret in their respective fields. Then we create and save the configuration by clicking okay and then create. 

At this point, we now have Facebook configured as an identity provider within the tenant. With the Facebook application created and Facebook configured as an identity provider, the web app can now be configured to leverage Facebook authentication. To configure the web app to use Facebook for authentication, browse to the application in the resource group to which it's been deployed. From our dashboard here, we'll click our demo app. And from here, we click on authentication and authorization. Keep in mind this setting is listed under the settings subheader. From here we turn on app service authentication by switching the toggle to on. And to prevent anonymous access we change the option for action to take when request is not authenticated to login with Facebook. So what this will do is force authentication before allowing access to the web app. 

Next we click Facebook here to configure it. Again we need to provide our app id and app secret from our Facebook application. We provide the app id and the app secret and click okay. Lastly, click save up top, to save the configuration. By saving this configuration, we complete the configuration of the web app to use Facebook for authentication. To test the login for the web app, browse to the web app and right click on the url that's listed for the web app. What we'll do here is open the link in an incognito window. 

And what will happen here is the application will actually direct us to Facebook to login. As you can see we're prompted for a Facebook login and supply my credentials here and login. We're then prompted to continue as Tom. From there, we are redirected back to the application which is just a dummy PHP app, but as you can see, the login information was accepted and the authentication process took me back to the web app after being successfully authenticated via Facebook. So in this demonstration you learned how to configure a web app, to use Facebook authentication by creating the necessary Facebook application configuring Facebook as an identity provider and then configuring the web app to use Facebook for authentication.