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

In the previous post Brief End to End Procedure for Azure Function Apps Authentication Using Google(1/2) we have managed to a create secured Azure App Function App with Google as the Authentication provider.

In the previous post we tested the Authentication by adding function URI directly to browser and continued the authentication process triggered by being redirected to google login page.

In this post we are going to implement a basic HTML client that calls the API we’ve created in the previous post and because this API is secured by google authentication, our HTML client must authenticate before being able to get proper response.

Understanding browser internals of Azure Function Apps Authentication

To understand how Azure Function App authentication work, lets go back to previous post and repeat the step of adding function URI directly to browser and continue the authentication process triggered by being redirected to google login page.

After you return back to Api response page, view the developer page of your browser(press F12 in case of Chrome). Open Application tab then from left menu open Cookies tree and select “https://trygoogleauth.azurewebsites.net” item.

The bordered Cookie entry in above image is the token used to authenticate calls from the browser to Azure Function App. And this Cookie should also be used calling the API from Ajax code by notifying the browser that i need to include the Cookies with request to the API.

Including Cookies in Ajax request

To include Cookies in Ajax request, you must set “credentials” property in request options object to “include” as follows:

fetch("https://trygoogleauth.azurewebsites.net/api/HttpTriggerCSharp1?name=test function app", 
 {
     credentials: "include",
     method: "get"
 })
 .then((result) => {
     return result.json();
 });

For security reasons there are two headers must be included in response to be able to use credentials include in Ajax requests. These two headers are “Access-Control-Allow-Credentials” with “true” value and “Access-Control-Allow-Origin” with the client domain as the value lets assume the your domain is “http://localhost:8080” while you are developing your HTML client.

Adding Headers to Function App API response

For the sake of simplicity we could add the required headers directly from function code. In later post i will show you how to modify response headers using function app proxies.

You can add the required header by simply modifying response object in function code.

Unfortunately these headers are being overridden by the function app CORS settings. So that we must clear all entries from CORS settings of our APP.

Adding Login Control to HTML Client

The target of this Login control is to have the “AppServiceAuthSession” Cookie stored in web client cookies so that it could be used later as a token in all requests to Azure Function App.

We can achieve this by letting user reqirected to same URI being used when we try to access the Function URI directly from the browser. This URI is “https://trygoogleauth.azurewebsites.net/.auth/login/google”. The problem in this case is that the user will stay in the Function App domain and not returned back to our client.

To let user returned back automatically to our domain we need to do two thing:

  1. Adding our domain to “ALLOWED EXTERNAL REDIRECT URLS” entry in Authentication setting in our Function App 
  2. Concatenating “?post_login_redirect_uri=http://localhost:8080” to the end of authentication link. The final code of login control is as follows:
<a href="https://trygoogleauth.azurewebsites.net/.auth/login/google?post_login_redirect_uri=http://localhost:8080">Login</a>

HTML Code of the full Page

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body >
 <script>
 fetch("https://trygoogleauth.azurewebsites.net/api/HttpTriggerCSharp1?name=test function app", 
 {
 credentials: "include",
 method: "get"
 })
 .then((result) => {
 return result.json();
 })
 .then((text) => {
 document.getElementById("responseDiv").innerHTML = "<span>" + text + "</span>"; 
 });
 </script>
 <a href="https://trygoogleauth.azurewebsites.net/.auth/login/google?post_login_redirect_uri=http://localhost:8080">Login</a>
 <div id = "responseDiv"></div>
 </body>
</html>

Conclusion

In this post we’ve covered how to call secured Azure Function App from HTML client using Ajax requests after authenticating the client with Google Identity. This method can also be used in any Front End modern framework like Angular or React.

In later post i will show you how to use Azure Function App proxies to modify responses headers and to have restful like URI patterns.

Stay TUNED !!!

Leave a Reply

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