I like to explore interesting new technologies. I also love to learn more from the materials available on Microsoft Virtual Academy, Google Developers channel, and several other tech/dev events.
Learning a new language other than C#, especially a language which is not in .NET, gives me a new perspective on understanding web development. With powerful framework like ASP .NET Core, it’s easy for developers who build their web applications do not understand why the frameworks do things in certain ways and trade-offs in the frameworks.
ASP .NET Core makes developers’ life easier with Convention over Configuration concept. As long as we know the conventions of where everything is located and you place each component into its correct location, we can easily build a web application. However, this also hide too much details from us and eventually makes us hard to master web development. Hence, learning Golang helps me to gain a new perspective in understanding web development.
When I am working with ASP .NET Core, I normally deal with MS SQL Server or Azure SQL (which is cloud-based MS SQL Server). In the Golang web development, I switch to use PostgreSQL, which is also available on Microsoft Azure.
Contents
During the long holiday in Chinese New Year, I spent my time in reading the book and online resources regarding Golang web programming. With the new opening of library beside my workplace, I also get to spend time there after work to do some Golang coding.
After one to two months of self-learning, I managed to compile some notes about what I’ve learnt in this Spring. The following is a list of nine topics that I learned in the early-stage of my Golang journey.
I’m working in Haulio, a startup incubated by PSA. Since it’s a startup and I am the CTO, I have no choice but to stay late in office most of the time, especially the period when we rushed for the launch of our mobile application in end of February.
Hence, whenever I have time, I will spend it on doing some Golang research and coding. Sometimes, however, I am just too tired and I would not write anything even though it’s weekend. Hence, I end up finishing all the nine topics only in mid of March.
I’m also very fortunate to have to share what I have learned with engineers in Azure Community Singapore. It turns out that many of them are using Golang too. Hence, that also gives me a great opportunity to learn from those experienced Golang developers. =)
Again, I am not that hardworking to work on personal projects every day. Sometimes, I will accompany my Mom at home. Sometimes I will have dinner with friends. Sometimes, I will travel to overseas (I am writing this in Japan). Sometimes, I will also play computer games or simply just sleep at home. So ya, this self-learning project takes a longer time to complete.
Working on personal projects after work is stressful also. Yup, so the project involved in this self-learning is about creating a YouTube Re-Player to loop my favourite YouTube music to calm myself down. =P
In January 2019, we also successfully presented our solution during the Singapore .NET Developers Community meetup. Taking the opportunity, I also presented how Azure Key Vault is used in our project to centralize our key and secret management.
Marvin is sharing with the audience about Custom Vision during the meetup.
Hence, in this article, I’d like to share about this project in terms of how we use Cognitive Services and Key Vault.
Code Repository
The code of our project is available in both Azure DevOps and Github. I will update both places to make sure the codes are updated.
The reason I have my codes in both places because the project is originally collaborated in Azure DevOps. However, during meetup, I realized majority of the audience still prefer us to have our codes on Github. Well…
Our “FutureNow” tool where user can use it to analyze text on images.
Custom Vision
What Marvin has contributed fully is to implement a function to detect and identify the handwritten texts in the uploaded image.
To do so, he first created a project in Custom Vision to train the model. In the project, he uploaded many images of paper documents and then labelled the handwritten texts found on the paper.
The part where the system analyzes the uploaded image and finds the handwriting part is in the TagAndAnalyzeService.cs.
In the AnalyzeImageAsync method, we first use the Custom Vision API which is linked to Marvin’s project to identify which parts in the image are “probably” handwritten.
At this point of time, the system still cannot be hundred-percent sure the parts it identifies as handwritten text really contain handwritten text. Hence, the result returns from the API contains a probability value. That’s why we have a percentage bar on our front-end to control the threshold for this probability value to accept only those results having a higher probability value will be accepted.
Handwritten Text Extraction with Computer Vision
After the previous step is done, then we will crop those filtered sections out from the uploaded image and then send each of the smaller image to the text recognition API in Cognitive Service to process the image and to extract out the text.
There is an interesting do…while loop in the method. The loop is basically used to wait for the API to return the image processing results. It turns out that most of the time, the API will not directly return the result. Instead, it will return a JSON object telling us that it’s still processing the image. Only when it returns the JSON object with status set to “Succeeded”, then we know that the analysis result is returned together in the JSON object.
do { var textOperation = response.Headers.GetValues("Operation-Location").FirstOrDefault();
var result = await client.GetAsync(textOperation);
if (!isAnalizying) { return handwrittenAnalyzeResult; } } while (isAnalizying);
In order to display to the user in front-end the results, we will store the cropped images in Azure Blob Storage and then display both the images and their corresponding extracted texts on the web page.
Using Computer Vision to perform OCR can better detect and extract text in an image especially when the image is a screenshot of a computer generated PDF file.
In OpticalCharacterRecognitionService, we simply call the Computer Vision API OCR method with the uploaded image and language set to English by default, then we can easily get the result of the OCR back in JSON format.
Key Vault
Key Vault in this project is mainly for managing the keys and connection string to the Azure Blob Storage.
Secrets of the FutureNow project in the Azure Key Vault.
var azureServiceTokenProvider = new AzureServiceTokenProvider();
var keyVaultClient = new KeyVaultClient(new KeyVaultClient.AuthenticationCallback(azureServiceTokenProvider.KeyVaultTokenCallback));
var secret = await keyVaultClient.GetSecretAsync($"https://futurenow.vault.azure.net/secrets/{ secretName }").ConfigureAwait(false);
According to Microsoft Azure documentation, there are service limits in Key Vault to ensure quality of service provided. Hence, when a service threshold is exceeded, any further requests from the client will not get successful response from Key Vault. Instead, HTTP status code 429 (Too many requests) will be returned.
Regarding this problem, I have raised issues (#22859 and #22860) and submitted a pull request to Microsoft on Github. Currently the PR is not yet approved but both Bryan Lamos and Prashanth Yerramilli have agreed that the code is indeed incorrect. Anyway, in our KeyVaultService class, the code has already been corrected.
EDIT (26 January 2019): The pull request has been approved. =)
Conclusion
Even though this project is just an experimental project for us to understand more about the power of Custom Vision and Computer Vision, I am glad that through this project, I manage to learn additional knowledge about Blob Storage, Azure DevOps, Key Vault, etc. and then later share it with the Singapore .NET Developers Community members.
Special thanks to Marvin for helping me in this project.
[This post is updated on 19th July 2020 to reflect the latest UI of both Azure Portal and Postman. I’d like to take this chance to correct some of my mistakes made in earlier post, as friendly pointed out by readers in the comment section.]
Today is the first working day of a new year. Today is the second half of year 2020 where I have been instructed to work from home for months. I thus decided to work on a question raised previously by the senior developer in my previous job back in 2018: How do we authenticate an Azure Function?
The Azure Function that I’m discussing here is the Azure Function app with .NET Core 3.1 runtime stack and published as Code instead as Docker Container.
🎨 Creating a new Function that will be deployed on Windows. 🎨
The whole Function creation process takes about 2 minutes. Once it is successfully created, we can proceed to add a new function to it. In this case, we are going to choose a HTTP trigger, as shown in the screenshot below. We choose to use a HTTP trigger function because later we will show only authenticated users can get the results when sending a POST request to this function.
🎨 Creating a function which runs when it received an HTTP request. 🎨
Once the trigger is created, we will see that there is a default C# code template given which will return the caller a greeting message if a name is provided in the body of HTTP request (or through query string).
🎨 Default template code for HTTP Trigger. 🎨
HTTP Methods and Function Keys
Before we continue, there are a few things we need to handle. The steps below are optional but I think they are useful for the readers.
Firstly, by default, the Function accepts both GET and POST requests. If you would like to only allow POST request, changing only the C# codes above is not going to help much. The correct way is to choose the accepted HTTP methods for this Function under its “Integration” section, as shown in the screenshot below.
🎨 This shows where to locate the “Selected HTTP methods”. 🎨
In our case, since we will only accept POST request, we will tick only the POST option.
As you notice in the “Authorization level” dropdown which is right above the “Selected HTTP methods”, it currently says “Function”. Later we must change this but for now we keep it as it is. If you would like to manage the Function Key, or checkout the default one, you can find the keys in the “Function Keys” section of the Function.
Secondly, what is the URL of this Function? Unlike the previous version of Azure Function, the URL of the Function can be retrieved at both the Overview section and the Code + Test section of the Function. However, the URL in the Overview section has no HTTPS, so we will be using the HTTPS URL found in Code + Test, as shown in the screenshot below.
🎨 Getting the function URL (in HTTPS). 🎨
Now if we send a GET request to the Function, we shall receive 404 Not Found, as shown in the following screenshot, because we only open for POST requests.
🎨 GET request sent to our Function will now be rejected. 🎨
Thus, when we send another HTTP request but make it to be a POST request, we will receive the message that is found in the C# codes in the Function, as shown in the following screenshot.
🎨 Yay, the POST requests are allowed. 🎨
Now, everyone can send a POST request and get the message as long as they know the Function Key. So how do we add Authentication to this Function?
Authorization Level for the Function
Remember in the earlier section above, we talked about the Authorization Level of the Function? It has three options: Function, Admin, and Anonymous.
We must change the Authorization Level of the Function to be “Anonymous”, as shown in the screenshot below. This is because for both “Function” and “Admin” levels, they are using keys. What we need here is user-based authentication, hence we must choose “Anonymous” instead.
🎨 Without setting the Authorization Level to be Anonymous, the Azure AD authorisation will not work as expected. 🎨
This step is very important because if we forgot to change the Authorization Level to “Anonymous”, the Function will still need the Function Key as the query string even though the request comes in with a valid access token.
Enable App Service Authorization
After that, we need to visit the App Service of the Function App to turn on App Service Authentication. This feature is at App Service level instead of the Function itself. So please pay attention to where to look for the feature.
🎨 This is the place to turn on the “App Service Authentication” for the Function app. 🎨
After the Authentication is turned on, we need to specify “log in with Azure Active Directory” as the action to be taken when the request is not authenticate, as illustrated below. This step is also very important because if we forgot to change it and “Allow Anonymous requests (no action)”, then no matter whether we set the Authentication Providers or not, people can still access the Function. Hence, please remember to change this setting accordingly.
🎨 Turning on App Service Authentication. 🎨
Next, please click on the Azure Active Directory which is listed as one of the Authentication Providers. It is currently labelled as “Not Configured”. Don’t worry, we will now proceed to configure it.
Firstly, we choose the Express mode as management mode. Then we can proceed to create a new Azure AD. The Portal then will help us to setup a new AD Application (or choose from existing AD Application). You can go to Advanced directly if you are experienced with Azure AD.
You should now see the page which looks like what is shown in the following screenshot.
🎨 Creating a new Azure AD Application for the Function in an easy way. (Waypoint 1) 🎨
There is one thing that may catch your attention. It is the last item in the page called “Grant Common Data Service Permissions”. Common Data Service, or CDS, is Microsoft way of providing a secure and cloud-based storage option for our data. There is a one-hour Microsoft online course about CDS, you can take the course to understand more. Grace MacJones, Microsoft Azure Customer Engineer, also gave us a short-and-sweet explanation about this setting on GitHub.
We basically can leave everything as default in the page and proceed to click the “OK” button at the bottom of the page.
After this, the Azure AD will be labelled as “Configure (Express Mode: Create)”. We can then proceed to save the changes.
🎨 Do not forget to save the settings! 🎨
After the settings are saved, we can refresh the page and realising the Azure AD is now labelled as “Configure (Express: Existing App)”. That means the Azure AD app has been created successfully.
🎨 The status of Azure AD for the Function is updated. 🎨
Now, click in to the Azure AD under the Authentication Providers list again. We will be brought to the section where we specified the management node earlier. Instead of choosing Express mode, now we can proceed to choose the Advanced mode.
We will then be shown with Client ID, Issuer Url, and Client Secret, as shown in the following screenshot. According to Ben Martens’ advise, we have to add one more record, which is the domain URL of the Function, to the “Allowed Token Audiences” list to make Azure AD work with this Function, as shown in the following screenshot. (This step is no longer needed with the new interface since October 2019 so I strikethrough it)
🎨 Getting the Azure AD important parameters. 🎨
When you leave this page, the Azure Portal may prompt you to save it. You can choose not to save it. It is optional. If you save it, the Azure AD mode will be changed from Express to Advanced and this will not affect our setup.
Testing on Postman
Now, let’s test our setup above.
When we send the same POST request to the Function again (with the code query string removed since it’s no longer necessary), this time with the App Service Authorization enabled for the Function App, we will no longer be able to get the same message back. Instead, we are told to be 401 Unauthorised and “You do not have permission to view this directory or page”, as shown in the screenshot below.
🎨 Yup, we are unauthorised now. 🎨
Now, let’s try to authenticate ourselves.
To do so, we will make a POST request with the body containing Grant Type, Client ID, Client Secret, and Resource to the following URL: https://login.microsoftonline.com/<Tenant ID>/oauth2/token to retrieve the access token, as shown in the following screenshot.
🎨 Yesh, we got the access token. 🎨
If we use the access token to send POST request to our Function, we will be told that we are now authorised and the message found in C# code is presented to us, as shown in the following screenshot.
🎨 Yay, we can access our Function again! 🎨
Conclusion
If you would like to get the claims in the Azure Function, you can refer to the following code which loops through all the claims. If you would like to allow a certain client app to call the Azure Function, you can check for the value of the claim having “appid” as its type.
That’s all it takes to setup a simple authentication for Azure Function with Azure AD. If you find anything wrong above, feel free to correct me by leaving a message in the comment section. Thanks!
In the afternoon, I received a message from my colleague in Marketing Team asking whether we could purchase an SSL certificate for the company blog which is powered by WordPress on Azure. There is almost no complete online tutorial on how to do this, hence I decided to write one.
Purchasing SSL Certificate and Binding it to Azure Web App
We can now easily purchase a SSL certificate from Azure Portal with less than USD 70 and enjoy auto renewal by default. By following the steps I documented on my Github page, we can easily bind the certificate to the WordPress site which is running as Azure Web App.
After that, we need to set the HTTPS Only option to be “On” so that all HTTP traffic will be redirected to HTTPS.
Updating WordPress Address and Site Address
After that, we need to proceed to the wp-admin to update the addresses. By default, for WordPress sites running as Azure Web Apps, the two fields, i.e. WordPress Address and Site Address, will be greyed out, as shown in the following screenshot.
We have no choice but to update HTTP to HTTPS in the URLs in the wp-config.php in wwwroot directory that we can download via FTP. The two lines that we need to update to use HTTPS are stated below.
//Relative URLs for swapping across app service deployment slots define('WP_HOME', 'https://'. filter_input(INPUT_SERVER, 'HTTP_HOST', FILTER_SANITIZE_STRING)); define('WP_SITEURL', 'https://'. filter_input(INPUT_SERVER, 'HTTP_HOST', FILTER_SANITIZE_STRING));
Updating wp-config.php
At this point of time, we will realize we can no longer enter the wp-admin web page. There will be saying our site is being redirected too many times or there is a redirect loop, as shown in the following image.
define('FORCE_SSL_ADMIN', true); // in some setups HTTP_X_FORWARDED_PROTO might contain // a comma-separated list e.g. http,https // so check for https existence if (strpos($_SERVER['HTTP_X_FORWARDED_PROTO'], 'https') !== false) $_SERVER['HTTPS']='on';
Yup, after doing all these, we have our blog secured.
cuteprogramming 