Brief End to End Procedure for Azure Function Apps Authentication Using Google(1/2)

Following this guide, you will be able to create secured Azure Functions Apps using Google Authentication.

Azure account and prior knowledge of Azure function Apps is required to fully understand these steps.

Problem definition

Our goal is to create a sample web page that calls a simple API implemented by Azure Function Apps. This API is secured with Google identity and our web page need to be authenticated by Google to be able to call this API. This blog post will cover the Function App Part and will also cover testing the authentication by accessing the API from the browser. The next Post Brief End to End Procedure for Azure Function Apps Authentication Using Google(2/2) will cover the Front End Part to complete the End to End solution.

Create new function app

Create a new function app to try google authentication with it or use the app you already created and you need to add authentication to it. The app name created in my case is “trygoogleauth”

In this case the url of my function app is “https://trygoogleauth.azurewebsites.net/” which will be different in your case depending on Function App name “https://[App Name].azurewebsites.net/”

Configure new project and client in Google API

You need to register in google developers https://developers.google.com/ and create a new project https://console.developers.google.com/project.

After creating your project in google you need to create credentials to the project that’s going to be used by your function app for authentication, navigate to  https://console.developers.google.com/apis/credentials and select your project.

In OAuth consent screen tab, enter the product name that’s going to be shown to user when asking them to allow you application to use their public profile.

In Credentials tab, click create credentials with OAuth client ID option selected from drop down list.

In create client page, select Web Application option and enter a new name for your client. And in Authorized redirect URIs input, enter URI of your function app followed by “/.auth/login/google/callback”. For function app i’ve created the complete URI is “https://trygoogleauth.azurewebsites.net/.auth/login/google/callback” and click the create button.

Copy client ID and client secret as they are going to be used later. You can always copy them from client page in your google project console.

Configure your function app to use google authentication

Go back to Azure portal and open the function app you’ve created and navigate to Platform features tab. Click “Authentication / Autherization” link, that will open a panel on the right. On Authentication / Autherization panel switch on the App Service Authentication. And change the Action to take when request is not authenticated to Log in with Google.

From list of Authentication Providers select google and enter Client ID and Client Secret copied from google client page into their inputs in the Google Authentication Settings Panel.

Don’t forget to save your settings before going forward.

Testing Authentication Settings

To make sure that our authentication settings are working properly we need to create a new function in our function app and try to access this function with and without authentication.

Click on Plus Sign on Functions tab under your function app tree, and select Webhook + API scenarion with CSharp as the language and then click create this function.

A sample function will be created for you. This function simply return the name send to it in body request or in query string concatenated with the word Hello at the beginning of the sentence.

Navigate to Integrate settings of the function you have just created. Leave all inputs with default values, except for the Authorization Level, change it to Anonymous and click save.

Now we have created a secured API that need the user to be authenticated with Google to be able to access it.

To make sure that it is working copy the function URI to you browser and it will redirect you to google authentication and then redirect back to the API showing “Please pass a name on the query string or in the request body” error. Try to add a name to the query string and try again to get the results without an error.

Conclusion

In this post we have covered how to create a secure API using Azure Function Apps and Google as the Authentication Provider. We also tested the authentication by accessing the API URI directly from the browser.

In the coming post Brief End to End Procedure for Azure Function Apps Authentication Using Google(2/2) i will show how to call this API from a Web Page using JavaScript fetch API.

Leave a Reply

Your email address will not be published. Required fields are marked *