DEV Community: Michał Żołnieruk

Handling expired Azure Blob Storage links in a user-friendly way

Michał Żołnieruk — Thu, 16 Dec 2021 10:50:58 +0000

📝 Use case: your app hosts files in Azure Blob Storage and users can generate expiring links to these files (using SAS tokens)

🤕 Problem: when a user opens a link with an expired SAS token, an unfriendly XML is displayed containing a technical error

😊 Solution: proxy the link with SAS token through an endpoint (Azure Function in my case), which will either redirect to the file (if the token is still valid) or show a descriptive error message

Recently the sex education app which we’ve created together with Kasia Koczułap, Marek Majchrzak and Radek Czemerys had a requirement to generate expiring links to files. As we store our files in Azure Blob Storage, using SAS tokens was an obvious choice — for each file requested, our backend generates a link with SAS token valid for 30 minutes:

https://{blobPath}?sv=2019-02-02&sr=b&sig=6KHcOyMni6PTld/V0WUojJO2ORxcDVdgRgIklH0hV5k=&se=2021-01-10T20:32:58Z&sp=r

It works great when the token is valid, but here’s what the user sees after opening an expired link:

More technical users may figure out that the link expired. Others may think that the app is broken or the link got corrupted during copying.

Not only this page does not explain what happened — it also does not provide the next steps. Users may feel lost and in effect, they may leave a bad review or ask support for help, even though they could fix this situation by regenerating the link.

Fixing the flow

A better UX would be to show a clear & detailed error message in case the link expired. The way I approached this in our app was to proxy the original link with SAS token through a new HTTP Triggered Azure Function. This function checks whether the token is still valid and if yes, then simply redirects to the file. Otherwise, it returns a simple HTML page with a descriptive message.

The fact that I’ve used Azure Function does not mean you can not use the same logic in your WebAPI endpoints (or whatever else you’re using). For us Azure Function was an obvious choice, as we use them heavily in our project 🏋🏻‍♀️

How to detect link expiration?

You may have noticed that the link with SAS token has a few parameters:

https://{blobPath}?sv=2019-02-02&sr=b&sig=6KHcOyMni6PTld/V0WUojJO2ORxcDVdgRgIklH0hV5k=&se=2021-01-10T20:32:58Z&sp=r

sv=2019–02–02 is a version of the API which was used to generate this SAS token

sr=b means that the SAS token was created for a blob

sig is the signature of the token

sp=r means that the token is valid only for reading

… and:

se=2021–01–10T20:32:58Z, which specifies the moment when the SAS token expires. So in order to verify that the token is still valid, we just need to check whether the se parameter contains a date which is in the future — easy peasy! ✨

Code

Here’s a proof of concept of all of the stuff described above. If you’d like to run it or you’d need the list of nugets used, check out the full project here: https://github.com/miszu/expire-sas-token-handling

Let me know if you have any doubts or questions. If something above was useful to you, I’d be extremely grateful for any feedback you may have. Good luck with whatever you’re doing! 🙌🏻

Follow me on Twitter for more insights about Azure 🚀

Michał Żołnieruk

@michalzolnieruk

Your app generates #Azure Blob Storage links using SAS tokens? Here's how you can show a descriptive expiration message to your users 👨‍💻 (instead of a harsh XML error) miszu.medium.com/handling-expir… @AzureFunctions #Microsoft365Dev #azurefunctions

08:03 AM - 11 Feb 2021

Creating a VR experience for an art exhibition

Michał Żołnieruk — Thu, 16 Dec 2021 10:50:55 +0000

In 2018 a close friend of me — Jagna Nawrocka (make sure to check out the portfolio) — was creating an art piece for the Survival exhibition in Wrocław. She asked me to help out with the technical side of the project and even though my experience with VR was not existent, I was excited to give it a go.

The event takes place each year in unique places across the city and the 16th edition was no exception — artists were invited to fill the space of Wallenberg-Pachaly Palace, a classicist gem from the XVIII century located right in the city centre.

What we wanted to do

The exhibition’s theme was “Capital”. Jagna envisioned an experience in which visitors physically located inside of an empty, grey room of the Palace (the building is not used at the moment) could be taken into The Amber Room — a historical chamber filled with, well, amber and gold of tremendous value, once considered an Eighth Wonder of the World.

The current whereabouts of the original room remain unknown and although reconstruction of it is open for visitors in Russia, it’s fair to say that the actual Amber Room resides mostly in people’s minds — as a symbol of lost wealth which disappeared in mysterious circumstances.

The plan was to create a 3D space with two connected rooms — one grey, with textures based on black and white photographs of the original Amber Room. The other one similar, but with coloured pictures. Visitors would start the experience in the grey room and after some time would be “allowed” into the golden room — by flying through a mirror — as simple as that ✨

Technical requirements

After a few discussions with Jagna, we’ve agreed upon the most important technical requirements of our solution — it had to be:

Cheap — we had no budget to spend, so using a fancy VR set like Oculus Rift was out of the question
Accessible— this particular exhibition is visited by hundreds of people daily, often in quick waves, so we had to find a way for many people to be able to experience the art piece at once
Maintenance-free — the exhibition lasted few days and we were not able to be on-site all the time, so we hoped to create something which does not need anyone to operate the equipment or explain how it works.

Web VR to the rescue

After considering a few possible frameworks which allow creating VR stuff (including Unity — check out my other article to see how to use it), I’ve stumbled upon something I haven’t considered — a web VR framework called A-Frame. After checking it out roughly, it turned out to be perfect for our use-case, mostly because:

It’s simple — going from zero to a nice, interactive scene is really fast (thanks to the fact that there’s plenty of examples, documentation is decent and that the framework is based on HTML and a component approach)
The app is a website — the experience can be hosted online and users can view it on their devices — there’s no need for fancy VR sets or human-assistance on-site.

Coming up with the code

The full solution&demo is here: https://github.com/miszu/vr-amber-room, feel free to ask questions if something is not working for you.

As I mentioned, A-Frame is a web framework— all 3D objects, components, animations, scripts et cetera are defined in HTML and JavaScript. Our app was not complicated and in total it ended up being just 83 lines of HTML, plus some images.

We needed to create a 3D scene with 2 rooms. Designing in A-Frame is quite straight forward, as the framework provides a tool called Inspector (ctrl+option+i), which is an interactive scene editor. We’ve added all of the needed planes (floors, walls, mirrors, ceilings), and then imported textures for each of them (Jagna has prepared them based on actual photographs of the Amber Room).

As for the movement, we’ve decided that users will be able to fly around both rooms, but in a limited manner — if they hold their gaze at one of the circles on the ground (called checkpoints — see the code snippet below to see how it’s configured), they would fly there to see the scene from that perspective.

Between two rooms there are mirrors — we’ve used them to create a “portal” between them. We wanted the coloured room to be accessible only after some delay, so to each mirror (which connect the rooms) we’ve added two animations — first one is making the mirrors disappear after 10 seconds, the other one moves them out of the way (that was needed because hidden objects are blocking the gaze-based movement).

Going public

Okay, the code was ready — how did we make it available for the visitors of the exhibition?

Thanks to the fact that the app was basically a website, we just needed to host it somewhere. I’ve decided to go simple and use GitHub pages for it, which is a really reasonable hosting option for small apps. The process is simple:

push the code to GitHub’s repository
enable GithHub pages for that repository, which deploys the website to a public endpoint (in our case https://miszu.github.io/vr-amber-room/ — you can visit it on your mobile phone right now and try it out 🤞🏼)

Then, to make it accessible for the visitors, on-site of the exhibition we’ve provided:

few QR codes pointing to the GitHub Pages deployment
a few pairs of cheap VR cardboards (we got some from Flying Tiger for about 2 euros for a pair)
a few copies of step-by-step instructions.

How did the exhibition go?

I was not there to see it sadly (fun fact — I was in Saint Petersburg back then and I got to see the reconstruction of the Amber Room), but from what I’ve heard it was quite a success — a lot of people were visiting “our” room and trying the VR experience on their phones.

One more cool thing about web-based VR apps is that one can add Google Analytics to track the usage — thanks to that I know that:

On the first day of the exhibition, 123 phones opened our app. The actual number of people experiencing was much higher for sure, as people were sharing phones
In total, more than 400 phones opened it during the exhibition

In general, I really loved the experience of using new tech for creating something artsy and can’t wait to do it again — maybe AR next, who knows? Let me know if you’d like to create something together! 🎨

If you’ve learned something new here and/or found the topic interesting, make sure to let me know, I'd really appreciate it 👏🏻 Follow me on Twitter for more insights about VR and other tech 🚀

Michał Żołnieruk

@michalzolnieruk

Some time ago I helped my friend (Jagna Nawrocka) to create a VR experience for the Survival Art Review in Wrocław - check out how we've used @aframevr to put people inside of the Amber Room (code&demo included) 🎨 #VirtualReality #aframe link.medium.com/vBklExTPH8

15:30 PM - 05 Aug 2020

Pausing UIImageView animation in Xamarin.iOS

Michał Żołnieruk — Thu, 16 Dec 2021 10:50:52 +0000

First things first — did you know that you can use UIImage to show frame-by-frame animations? It’s actually quite straight forward, all you need to do is:

Prepare your frames in png format, name them using an ordering convention (for example “Frame1.png”, “Frame2.png”, …)
Add these images to your Xamarin.iOS project, let’s say to Resources/Animation folder
Make sure all of your images are referenced as BundleResource in your csproj:

<ItemGroup>  
  <BundleResource Include="Resources\\Animation\\\*.png" />  
</ItemGroup>

Load your images as UIImage and pass them to the UIImageView using AnimationImages property:

Add animatedImageView to your controller and here’s what you will see:

Great, it’s alive! 🧟‍♂️ What if you’d like to pause the animation on tap and then resume it after another tap? Sadly, there’s no API for this in the UIImageView, but there is a way to accomplish it using UIImageView’s Layer.

I’ve found it described in one of the Technical Q&As on developer.apple.com. This Objective C code may not be so easy to rewrite to C#, especially if you’re just getting started, so below is a working solution in Xamarin.iOS. You may want to polish the code a bit (extracting StopAnimation/StartAnimation extension methods may be a good start).

Now you should be able to pause/resume the animation with taps:

Do I need to add my frames as iOS Assets? It’s kind of tedious with so many files!
No, you can just drag and drop the whole folder to Resources, remember to reference files as BundleResource.

The animation is not pausing when I tap it, what’s wrong?
You might have forgotten to set UserInteractionEnabled to true on the UIImageView.

I hope that this quick tutorial was helpful to you. Let me know if something is not clear. Follow me on Twitter for more insights about mobile dev and other tech 🚀

Michał Żołnieruk

@michalzolnieruk

My first Xamarin article got featured on WeeklyXamarin, thanks @kphillpotts 🙌🏻 if you’re interested, here it is - link.medium.com/UHpfxNXDZeb twitter.com/kphillpotts/st…

07:05 AM - 01 Apr 2021

Kym Phillpotts @kphillpotts
You slack off for one week and before you know it, WeeklyXamarin has 40 articles. Make sure to check out the Easter Edition: https://t.co/0ARPoNcw4v https://t.co/Npf2nyzpX6

How to create a Telegram Bot with Azure Functions (NET 6, isolated process)

Michał Żołnieruk — Wed, 15 Dec 2021 16:53:25 +0000

I’ve written about hosting a python based Telegram bot here before. This time we’ll take look at doing it with NET 6, C#, Azure Functions V4 and the still fresh execution mode called isolated process. In this mode, each function runs in a separate environment.

GitHub repo with the full solution

What we’ll cover

creating a sample Azure Functions project and deploying it to your Azure subscription
creating a Telegram Bot and using it in a webhook configuration

Prerequisites

NET 6 installed
Azure Functions Core tools 4 installed
Azure CLI installed
Azure subscription created
An IDE may be useful, I’m using Visual Studio Code

Check out this article for step by step instructions – https://docs.microsoft.com/en-us/azure/azure-functions/create-first-function-cli-csharp

Setting up and deploying blank Azure Functions project

We’ll first create the blank Azure Functions project with a sample HTTP Trigger

func init TelegramFunctions --worker-runtime dotnet-isolated
cd TelegramFunctions
func new --name SetUpBot --template "HTTP trigger" --authlevel "anonymous"

The above commands should create all necessary files to run the functions. There’s one manual step you need to do to use the V4 Azure Functions. Open the .csproj file in the TelegramFunctions folder and bump the version manually from v3 to:

<AzureFunctionsVersion>v4</AzureFunctionsVersion>
Now you should be ready to run the Functions, do it with this command:

func start

In the output, you should see a link to the sample HTTP trigger function called ‘SetUpBot’. It was created above with the func new command. Open the link to make sure that the Function is working properly:

Perfect! 🎊 Now let’s deploy it online. Before doing that, we first need to prepare the needed resources in Azure. Run the following scripts (make sure to update the parameters to your own names):

az login

// below creates a resource group in a specified location
az group create --name RESOURCE_GROUP_NAME --location germanywestcentral

// below creates a storage account needed to set up the functions
az storage account create --name STORAGE_ACCOUNT_NAME --location germanywestcentral --resource-group RESOURCE_GROUP_NAME --sku Standard_LRS

// below creates the functions app on a Consumption plan with isolated execution mode
az functionapp create --resource-group RESOURCE_GROUP_NAME --consumption-plan-location germanywestcentral --runtime dotnet-isolated --functions-version 4 --name FUNCTIONS_APP_NAME  --storage-account STORAGE_ACCOUNT_NAME

… and then we’ll deploy our project:

func azure functionapp publish FUNCTIONS_APP_NAME

If everything went well (hopefully), in the output you’ll see the link to your publicly available Azure Function – after opening it in your browser, you should see the exact same output as when running it locally. Your sample function is officially alive 🎉

Creating a Telegram bot

To start using the bot, we first need to create it, which is super easy:

Open the Telegram app on any device and start a conversation with @ botfather
Send this command: /newbot
Answer his questions about the bot’s name and handle
He’ll responsd with the bot’s token similar to the one below:

20323326:AAHgxV73CgPNKxc9lEWa_2XpZ10mf

We’ll use it in the next steps. Make sure to keep it safe, anyone who has access to it can fully control your bot! 🚨

Telegram integration

To make things easier, we’ll use the Telegram.Bot nuget for communication with the Telegram services. Add it to your project with this command:

dotnet add package Telegram.Bot --version 17.0.0
Now we’re ready to create 2 HTTP Triggered Azure Functions, we’ll do it in the SetUpBot.cs file which you should already have in your project folder.

/setup – the first function will setup our bot to operate in a webhooks mode. This means that whenever anyone interacts with the bot, Telegram will send a POST request to the endpoint we specify (as you can see below, we specify the link to the second function, handleupdate)
/handleupdate – this function receives the Update object from Telegram services and reacts accordingly. All of the messages, replies, images etc will arrive to this endpoint. For the purposes of this tutorial, we’ll try to evaluate user’s message as a math expression and will return the result

Both functions are using the _botClient instance, which is created in the class constructor and uses the bot token from the environment variables.

When functions are run locally, you can specify the value for the TelegramBotToken variable in the local.settings.json file. For the deployed Functions app, you can configure it with the below command:

az functionapp config appsettings set --name FUNCTIONS_APP_NAME --resource-group RESOURCE_GROUP_NAME --settings "TelegramBotToken=YOUR_BOT_TOKEN"

Let’s talk

Deploy the updated project with the same command as before:

func azure functionapp publish FUNCTIONS_APP_NAME
In the output, you’ll see 2 links to our Functions – before talking to the bot, we first need to open the /setup link, which will configure the bot to call our second function.

Then we should be ready to get some answers from the bot. Start a conversation with it on Telegram and either try to ask some math questions or try to recreate the Space Oddysey scene (at your own risk!) ☺️

Things are working as expected, that’s great! I’m positively surprised how fast the interaction is – the questions go through and back the Telegram API & Azure in a blink of an eye as you can see above 👁

Clean up

After you’re done, make sure to remove the Azure resources you’ve created, you don’t want to pay for the resources that you don’t use. Deleting the whole resource group can be done with the following command:

az group delete --name RESOURCE_GROUP_NAME

Where to go from here

Now that you know how to use Azure Functions as the brain for your bots, diving deeper into documentations might give you some nice ideas on what to do next. The API is quite rich, you can create pools, send locations, even accept payments or validate user’s identity with Telegram Passport.

Bots: An introduction for developers (official Telegram website)
Telegram.Bot nuget documentation

Also before deploying your Bot, it might be wise to think twice about the security of your API. The setup function above should probably be authenticated with a Function access key. The handleupdate function could also have a password/token in the URL, to make sure that the request comes from Telegram services.

Let me know if you’d have any questions/problems with creating the bots with Azure Functions, I’d be happy to help 🚀

Follow me on Twitter for more insights about Azure 🚀
// Detect dark theme var iframe = document.getElementById('tweet-1359775045640474627-475'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1359775045640474627&theme=dark" }