In this demonstration, I'm going to teach you how to configure a basic Azure web app to use Google for authentication. To prepare for this demo, I've already deployed an Azure Active Directory B2C Tenant, which is what you see here on the screen. And I've also deployed a basic PHP Web App in Azure. 

As we work through this demo, we'll create a Google App first, we will then configure Google as an Identity Provider in the Azure Tenant, lastly we'll configure the web app to use Google for authentication, and we'll test authentication. Before configuring Google as an Identity Provider, you need to create a Google Plus application, and supply it with the right parameters. To do this you need to have a Google Plus account already. If you don't have a Google Plus account you can set one up at https://accounts.google.com/signup. 

After getting your Google Plus account, browse to the Google Cloud Platform Console and sign in with your Google Plus account credentials. As I bounce over here into my other tab, you can see that I'm already logged into my Google Cloud Platform Console. To get started, click the project drop down box at the top here, and select New Project. From here, give the New Project a name. After giving it a name, you can click Create. Before continuing, ensure that the proper project is selected, and then, hover over APIs and Services, and select Credentials. 

From this screen, you should click on OAuth consent screen. From here you'll need to provide a valid email address, and a product name to show users. We'll just call it Azure Authentication here. The rest of these fields are optional at this point. After providing an email address and product name, click save. After saving your project, select Create credentials, and then OAuth client ID. From here select Web application. At this point, you need to give your web app a name, I'm just going to leave the default name here for Web client 1. However, we also need to enter the Web app's URL in the authorized JavaScript origins field, and we also have to add a version of our Web app URL into the Authorized redirect URIs field. To get our Web app URL, we switch over to Azure, and select our web app. In the right corner here, we see the URL for the web app, and we can copy it. 

We take that URL, supply it in the origins field, and we also supply it in the redirect field. However, we need to append this URL. What we need to do is add the following. We need to append our URL with .auth/login/google/callback. This is essentially the path that the application uses for redirection after they're authenticated with Google. After supplying this information, you click Create. From the OAuth client screen, copy the values for the client ID and the client secret, these will be used later on. After copying your values click okay. 

So now that we've created the Google Plus application, we can go ahead and configure Google Plus as an Identity Provider in the Tenant. To configure Google as an Identity Provider in our Tenant, we switch over to our Tenant, and browse to the Azure AD B2C blade, which I've done here on a screen. To add Google we simply select Identity providers. As you can see, we already have Facebook here from the previous exercise. To add Google, click add, and then give the provider a friendly name. We'll give it Google. After supplying a name, we click Identity provider type, and select Google from the list, and click OK. 

Next, we click Set up this identity provider, and we provide the client ID and secret codes that we got from our Google app. After supplying our client ID and secret, we click OK, and then Create. With that, you'd configured Google as an Identity provider. With the Google app created, and Google configured as an Identity provider, the web app itself can now be configured to leverage Google authentication. To configure the web app to use Google for authentication, browse through the application in the resource group where it's been deployed. And then once the application opens, click on Authentication and Authorization. 

Authentication and Authorization is listed below settings, in the left pane here. We already have the app service authentication turned on because we turned it on when we configured Facebook. If it's not on already, you just click the On toggle. After ensuring that the app service authentication is on, change the action to take when request is not authenticated to log in with Google. What this will do is force Google authentication before allowing access to the web app. Next, click Google under the Authentication Providers section. 

And again you're going to provide the Client ID, and the Client Secret that you got from your Google app earlier on. Click okay to save your values. And then lastly, click Save up above to save the configuration for this web app. Doing so completes configuration of the web app to use Google for authentication. To test log in, browse to the web app, and open it's URL in an incognito window, or private window if you're using IE. As you can see, the web app directs me to Google to log in first. So I'll go ahead and log in here. 

And after logging in, access is granted to the web app. Now of course the web app isn't doing a whole lot, it's just a blank PHP page, but as you can see, it took my authentication and redirected me back to the web app. So in this demonstration you learned how to configure a web app to use Google Authentication by creating a necessary Google app, configuring Google as an Identify Provider in the Azure Tenant, and configuring the web app itself to use Google for authentication.