DEV Community: kemurayama

Azure Communication Services Group Call Demo on Azure Static Web App

kemurayama — Sat, 20 Mar 2021 04:48:44 +0000

If you want to add video, chat, SMS and telephony-over-IP to your application, Azure Communication Services is the good option.

This post introduces a quick sample that is Group Call demo app on Azure Static Web App.

What is Azure Communication Services ?

Azure Communication Services is cloud-based communications services with rich communication experiences used by Microsoft Teams

What is Azure Static Web Apps ?

Azure Static Web App is a web services where you can host your application with your frontend framework such as React.js, Vue.js and more.

Backend is powered by Azure Functions that is a serverless service on Azure.

Prerequisites

This post uses below repository. you can git clone or fork.

kemurayama / acs-group-call-demo

Azure Communication Services Group Call Demo

On Frontend, it uses React.js.

This Application also uses Azure Functions Python for creating Azure Communication Services User ID and issuing VoIP token.

Install Tools

Create Azure Communication Services

Create Azure Communication Services

Set Connection String value at local.settings.json after creating New Project for Azure Functions.

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "python",
    "COMMUNICATION_SERVICES_CONNECTION_STRING": "",
  }
}

Setup Local

Clone This Repository
Run yarn install (or npm install) at repository root
Go to api folder
Create New Azure Functions Project. (Ctrl + Shift + P then choose Azure Functions: Create New Project...)
Activate virtualenv if not activated (source .venv/bin/activate or \.venv\Scripts\activate)
Run pip install -r requirements.txt
Open api by VS Code

Start Group Call at Local

Run yarn start or npm start
Run func host start at api

Create user with ACS ID

Issue VoIP Token

Choose your Devices and Join Group Call

Enjoy your group call

You can join the same group call if you input the same group call ID.

When you want to try camera in group call, you have to turn on BEFORE you join.

Deploy to Azure Static Web App

How to deploy

Clone or Fork this repository.

Go to Azure Portal and create Azure Static Web Apps.

Choose your cloned repo and set build details.

Build Presets: React
App location: /
Api location: api
Outout location: build

Set Up Configuration

Set Azure Communication Services connection string on Azure Static Web App.

key: COMMUNICATION_SERVICES_CONNECTION_STRING
value: Connection String Value

Troubleshooting

If you failed something on Azure Static Web App, you can add Application Insights

Set environment variables in the same way.

See API support in Azure Static Web Apps Preview with Azure Functions and Monitor Azure Functions for more details.

key: APPINSIGHTS_INSTRUMENTATIONKEY
value: app instrumentation key value

You can monitor your backend API.

Next Steps

This application uses below libraries but the latest version of communication-calling is 1.0.0-beta.9.

"@azure/communication-calling": "^1.0.0-beta.6",
"@azure/communication-common": "^1.0.0-beta.5",

~~I will update library someday.~~

Updated the latest libraries

kemurayama / acs-group-call-demo

Azure Communication Services Group Call Demo

Access AAD Protected App with Managed Identity

kemurayama — Thu, 29 Oct 2020 13:44:25 +0000

In my previous post, I explained how to access AAD protected Function App with AAD app client ID and secret.
You can protect your API endpoints by AAD that is much safer than Function key.

Access AAD protected Azure Functions

kemurayama ・ Oct 5 '20 ・ 4 min read

#azure #azurefunctions #aad

However, in previous scenario, you still need to manage AAD client ID and secret securely. As your service grow, your API will also increase and it becomes more difficult to recognize all secrets.

In such scenario, you can use Managed Identity to reduce your concern if your APIs/Apps are hosted on Azure Web Apps, Azure Functions or Azure Virtual Machines.

This post will explain how to set Managed Identity and access AAD protected app with it.

Prerequisites

If you are new to AAD, Azure Functions and Azure Web Apps, you can check tutorials first.

In SPA scenario, you can check this repository

Azure-Samples / ms-identity-javascript-angular-spa-aspnetcore-webapi

An Angular single-page application that authenticates users with Azure AD and calls a protected ASP.NET Core web API using MSAL Angular v2 (Preview)

page_type

languages

products

description

urlFragment

sample

javascript

typescript

csharp

angular

dotnet-core

msal-angular

microsoft-identity-web

azure-active-directory

This sample demonstrates an Angular single-page application calling a .NET Core web API secured with Azure Active Directory using MSAL Angular v2

ms-identity-javascript-angular-spa-aspnetcore-webapi

An Angular single-page application that authenticates users against Azure AD and calls a protected ASP.NET Core web API

Overview

This sample demonstrates a cross-platform application suite involving an Angular SPA (TodoListSPA) calling an ASP.NET Core web API (TodoListAPI) secured with Azure Active Directory (Azure AD) using the Microsoft Authentication Library for Angular (Preview) (MSAL Angular).

Scenario

TodoListSPA use MSAL-Angular to sign-in a user.
The app then obtains an access token from Azure AD for the signed-in user.
The access token is then used to authorize the…

View on GitHub

What is Managed Identity ?

Managed Identity is the feature of AAD. Imagine you use Azure Web Apps that call Function App which is protected by AAD.

Generally, you create AAD app for the Web App and get access_token with its ID and secrets to access the Functions App. With Managed Identity, you don't have to create AAD App and manage its secrets. If you host your application on specific services, AAD manage your app identity on behalf of you.

Managed Identity has two types. One is System-assinged, another is User-assigned.
System-assigned Managed Identity is one-to-one relationship between the service and ID. You can enable Managed Identity for the services. If you delete the service, Azure Platform automatically delete the ID at the same time.

User-assigned Managed Identity is similar to Azure AD App. You create Managed Identity as an Azure resource then assign it to cresponding services. The relationship is one-to-many and it will remain even you delete services. The difference between AAD App and User-assigned Managed Identity is you still don't need to manage secrets.

For detail explanation, check What are managed identities for Azure resources?

With Managed Identity, your app Blob Storage, SQL Database and more. Services that support managed identities for Azure resources

In this post, I use System-assigned Managed Identity to access Function App which is protected by AAD.

Setup Environment

I created sample apps for testing Managed Identity.

kemurayama / azure-functions-python-samples

Azure Functions v2.0 Python samples

Clone and run deploy.sh.

Make sure you have the permission to create AAD App and the subscription you use.

Create manifest.json to add permission to the App. Your App need User.Read API permission.
You should check your resourceAppId and resourceAcces id.

[
    {
        "resourceAppId": "xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        "resourceAccess": [
            {
                "id": "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy",
                "type": "Scope"
            }
        ]
    }
]

Test Managed Identity

After you deployed test application, you can access Web App /request_function. It calls Function App protected by AAD with Managed Identity.

Next Step

In SPA scenario, you can check this document.

With Managed Identity, you can authenticate PostgreSQL.

Access AAD protected Azure Functions

kemurayama — Mon, 05 Oct 2020 12:03:09 +0000

Securing resources are really important. When you create APIs or other web sites and expose to public internet, it is necessary to protect your endpoints if you.

IP restriction is the common way to limit the clients who can access the endpoint. However, it is getting more difficult to manage all public IPs of the clients these days because clients access your services from anywhere.

On Microsoft Azure, Azure Active Directory (AAD) protects your APIs/Webs through OAuth 2.0, OpenID Connect, SAML and etc.. When you use PaaS such as Azure Web Apps / Azure Functions, just turning on the feature let you protect your endpoints.

This post explains how to protect your APIs with AAD on Azure and access them.

Prerequisites

This post doesn't explain what Azure Active Directory (AAD) is. If you are interested in it, you can check this.

Application and service principal objects in Azure Active Directory

If you haven't created Azure Web Apps or Azure Functions, I recommend you to create them first.

Create Azure Functions

First of all, you need to create Azure resources that host your API.
Create your HTTPTrigger Function Quickstart: Create a function in Azure using Visual Studio Code.
You can publish your own API in minutes.

After deploying your HTTPTrigger Function to Azure, call it from cURL command, Postman or any other tools that create HTTP requests.
If the authentication level is set function, you can call your API with the Function key code=xxxx in query parameter or x-functions-key: xxxx in request header.
For more details, check Azure Functions HTTP trigger.

Fig 1. Successful Postman Requests

Enable AAD Authentication

In Development or Staging environment, you can use Function Keys to protect your Function App. However, in Production, it is difficult to manage your Function Key securely when you distribute the key to all clients that call the Function.
Once the key is leaked, you have to change the setting for all apps.

To secure your app and manage the authentication/authorization, you can use Azure Active Directory (AAD).
AAD assign unique ID with each app, and each authentication is logged.

In Azure Web App / Azure Functions, you can enable AAD auth feature from Azure portal or commands,
thought AAD auth is not available for Azure Function Linux consumption plan (Oct.2020).
See Configure your App Service or Azure Functions app to use Azure AD login.

This feature is currently not available on Linux Consumption plan for Azure Functions

After you enabled the feature for your Function App, it returns HTTP 401 unauthrized because AAD protects your endpoint.

Fig 2. Unauthorized Requests to Function App

Get Access Token to Authenticate

In order to access AAD protected Function App, you need to get access token from AAD for the Function App.
In case of API call, set Bearer token to Authroization header.

You need to create client application on AAD to authenticate Function App.
If you use Azure CLI, you can create client AAD app for testing like below.

az ad sp create-for-rbac -n "TestAuthClientApp"

It outputs the result as JSON. Store your appId and password to authenticate Function App.

Fig 3. Azure CLI result

To get access token for the Function App, copy Function App AAD ID as target from Azure Portal.
You can check from [Authentication/Authorization] blade.

Fig 4. Function App ID

Call https://login.microsoftonline.com/<Your AAD Tenant ID>/oauth2/token to get access token.
When you use cURL, below command works.

curl -X POST https://login.microsoftonline.com/<TENANT ID>/oauth2/token  \
  -F grant_type=client_credentials \
  -F resource=<Web App CLIENT ID> \
  -F client_id=<Client Application ID> \
  -F client_secret=<SECRET>

Before requesting Function App, you need to change AAD App Setting for Function App. Check Access tokens to enable program to get access_token with implicit grant flow.

Request Function App with Token

Function App and request with Authroization:Bearer xxxx header, which needs white space between Bearer and token then you should get HTTP 200 OK.

Now you can set function auth level from function to anonymous because AAD protects your API.

Next Step

Now you protect your API with AAD. However, you still need to manage AAD client app credentials. More secure way is to use Managed Identity that enable Function App to authenticate Azure services without secrets.
If your code runs on specific services such as Web App or Function App where Managed Identity enabled, Azure manage their authentication automatically.

What are managed identities for Azure resources?

Access AAD Protected App with Managed Identity

kemurayama ・ Oct 29 '20

Deploying Azure Functions Python with Terraform

kemurayama — Wed, 23 Sep 2020 11:29:17 +0000

This post will focus on deploying Azure Functions Python with Terraform. If you are new to both services, you can start from Prerequisites.

Prerequisites

Overview

Azure Functions is FaaS (function-as-a-service) on Microsoft Azure. It enables you to create your exciting services faster because it is a serverless service. You only need to focus on your code and don't need to care about OS updates and middleware.

In addition, Azure Functions is event-driven that is triggered by external events:

Upload images on Azure Blob Storage (Object Storage service)
Insert / Update items on Azure Cosmso DB (NoSQL DB service)
HTTP incoming requests
Timer defined by cron

However, deploying all services and configuring them from Azure Portal take a long time and happens mistakes.

To increase our productivity and deploy safely, I would like to use IaC (Infrastructure as Code) tools, such as ARM Template or Terraform, rather than deploying each resource from Azure Portal. Especially in production environment, managing your infrastructure as code is really important.

Set Up Environment

Terraform >= 0.12
azurerm provider >= 2.21
azure cli

Define Resources

Let's define resources. In Terraform, you define your resources in .tf files.

main.tf

# https://github.com/terraform-providers/terraform-provider-azurerm/issues/7960
provider "azurerm" {
  version = ">=2.21.0"
  features {}
}

resource "azurerm_resource_group" "funcdeploy" {
  name     = "rg-${var.prefix}-function"
  location = var.location
}

resource "azurerm_storage_account" "funcdeploy" {
  name                     = "${var.prefix}storage"
  resource_group_name      = azurerm_resource_group.funcdeploy.name
  location                 = azurerm_resource_group.funcdeploy.location
  account_tier             = "Standard"
  account_replication_type = "LRS"
}

resource "azurerm_storage_container" "funcdeploy" {
  name                  = "contents"
  storage_account_name  = azurerm_storage_account.funcdeploy.name
  container_access_type = "private"
}

resource "azurerm_application_insights" "funcdeploy" {
  name                = "${var.prefix}-appinsights"
  location            = azurerm_resource_group.funcdeploy.location
  resource_group_name = azurerm_resource_group.funcdeploy.name
  application_type    = "web"

  # https://github.com/terraform-providers/terraform-provider-azurerm/issues/1303
  tags = {
    "hidden-link:${azurerm_resource_group.funcdeploy.id}/providers/Microsoft.Web/sites/${var.prefix}func" = "Resource"
  }

}

resource "azurerm_app_service_plan" "funcdeploy" {
  name                = "${var.prefix}-functions-consumption-asp"
  location            = azurerm_resource_group.funcdeploy.location
  resource_group_name = azurerm_resource_group.funcdeploy.name
  kind                = "FunctionApp"
  reserved            = true

  sku {
    tier = "Dynamic"
    size = "Y1"
  }
}

resource "azurerm_function_app" "funcdeploy" {
  name                       = "${var.prefix}func"
  location                   = azurerm_resource_group.funcdeploy.location
  resource_group_name        = azurerm_resource_group.funcdeploy.name
  app_service_plan_id        = azurerm_app_service_plan.funcdeploy.id
  storage_account_name       = azurerm_storage_account.funcdeploy.name
  storage_account_access_key = azurerm_storage_account.funcdeploy.primary_access_key
  https_only                 = true
  version                    = "~3"
  os_type                    = "linux"
  app_settings = {
      "WEBSITE_RUN_FROM_PACKAGE" = "1"
      "FUNCTIONS_WORKER_RUNTIME" = "python"
      "APPINSIGHTS_INSTRUMENTATIONKEY" = "${azurerm_application_insights.funcdeploy.instrumentation_key}"
      "APPLICATIONINSIGHTS_CONNECTION_STRING" = "InstrumentationKey=${azurerm_application_insights.funcdeploy.instrumentation_key};IngestionEndpoint=https://japaneast-0.in.applicationinsights.azure.com/"
  }

  site_config {
        linux_fx_version= "Python|3.8"        
        ftps_state = "Disabled"
    }

  # Enable if you need Managed Identity
  # identity {
  #   type = "SystemAssigned"
  # }
}

variables.tf

variable "location" {
    type    =   string
    default =   "japaneast"
}

variable "prefix" {
    type    =   string
    default =   "my"

}

Here are some tips for successful deployment.

Use azurerm >= 2.21.0
Add Hidden Link Tag
Set version = ~3 (default is v1)

Deploy Azure Resources

After you created above files, let's deploy !

If you don't want to install Terraform on your local PC, use Azure Cloud Shell as test.

Make sure your each resource name is unique.

$ terraform init

...
Terraform has been successfully initialized!
...

$ terraform plan 
$ terraform apply

...
Apply complete! Resources: 6 added, 0 changed, 0 destroyed.

Fig.1 The result of terraform apply

Then you see Azure Functions on your Azure Portal.

Fig.2 Resources on Azure Portal

Deploy Function

After terrafrom apply, you may upload your code to your Function with Visual Studio Code.

Once deployed your code to Function App, you can see your functions on Azure Portal.

Fig.3 Functions on Azure Portal

You can manage various resources and control versions in .tf file. In production, you should use CI/CD tools such as GitHub Actions or Azure DevOps.

Reference

Hosting Pyodide on Azure Static Web App

kemurayama — Fri, 29 May 2020 12:15:09 +0000

The post is showing how we host Pyodide on Azure Static Web Apps.

What is Azure Static Web Apps?

Azure Static Web Apps is a new service on Azure announced at Microsoft Build 2020.

What is Pyodide ?

Pyodide enable us to run Python on Web browser via WebAssembly. It is a related project of Iodide.

I wanted to try Azure Static Web App but am not familiar with JavaScript Frameworks at all. Since I have Python experience a little bit, I tried Pyodide.

Create Your Azure Static Web Apps

First of all, you need to create your own Static Web Apps for hosting your Pyodide App. There are some Static Web App templates (Angular, React, Vue or Vanilla) on GitHub and you can folk them.

In case of Pyodide, I think vanilla-javascript is good place to start and try.

After you created your Static Web App, you will find your GitHub repo has .github/workflows folder. It contains yaml file for GitHub Actions.

GitHub Actions automate your Build and Deploy workflow. This time you don't need to edit this yaml file because we just want to deploy our static files.

Set up index.html with Pyodide

After deploying, you can see your Web App. I wrote index.html on my repo below.

kemurayama / my-pyodide-sample

When you call Python in <script> tag, pyodide.runPython is needed. When you want to use packages, you can use loadPackage such as

$('#matplotlib').on('click', function () {
      pyodide.loadPackage(['matplotlib', 'numpy']).then(() => {
        var plot = pyodide.runPython(`<your Python Code !!>

and available packages are listed in Pyodide repository.

Push and Deploy

When you finish local development, let's push your code to GitHub.
GitHub Actions automatically deploy your code to Azure Static Web App.

You can use matplotlib or numpy on your browser. Available packages are here.

Tips

By developer tool, you can check whether Pyodide is loaded successfully or not. If successfully loaded, Python initialization complete show up on console.
If Pyodide fails with this message Unchecked runtime.lastError: The message port closed before a response was received., you can try in Secret Browser.

My aiohttp and jinja2 app sample

kemurayama — Sat, 09 May 2020 12:30:07 +0000

Recently, I started to use aiohttp server and aiohttp_jinja2 for my personal project. It is very useful.

My python version is 3.8.2.

$ python --version
Python 3.8.2

# requirements.txt
aiohttp[speedups]
aiohttp_jinja

pip install aiohttp[speedups]
pip install aiohttp_jinja

Project directory is like below

.
└── app
    ├── main.py
    └── templates
        ├── index.html
        └── layout.html

aiohttp_jinja and aiohttp Class Based View can be used like below example.

# main.py

import logging
import pathlib
import sys

import jinja2
import aiohttp_jinja2
from aiohttp import web

@aiohttp_jinja2.template("index.html")
class HomeHandler(web.View):

    async def get(self):
        return {}

    async def post(self):
        form = await self.request.post()
        return {"name":form['name']}


if __name__ == "__main__":

    logging.basicConfig(level=logging.DEBUG)

    app = web.Application()

    # setup jinja2 
    aiohttp_jinja2.setup(app,
        loader=jinja2.FileSystemLoader(
            'templates'
            ))

    app.router.add_get('/', HomeHandler, name="index")
    app.router.add_post('/', HomeHandler)


    web.run_app(app)

<!-- layout.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>aiohttp and jinja test</title>
</head>
<body>

    <h1>My aiohttp jinja demo</h1>

    {%block body%}{%endblock%}

</body>
</html>

<!-- index.html -->
{% extends "layout.html" %}
{% set title = "Main" %}
{% block body %}

    <h2>Form test extended from layout.html</h2>

    <form method="POST" action="{{ url('index') }}">
        <input type="text" name="name" id="name"/>
        <input type="submit">
    </form>

    {% if name %}

        <p>My name is {{ name }}</p>

    {% endif %}
{% endblock %}

Select a row with Whereclause in SQLAlchemy

kemurayama — Mon, 27 Apr 2020 13:35:01 +0000

I am new to SQLAlchemy and aiopg. After defined a Tabled object and finished DB initialization, I wanted to fetch one row with specified id in aiohttp server.

import aiopg.sa
from sqlalchemy import (
    MetaData, Table, Column, ForeignKey,
    Integer, String, Date
)

...

product = Table(
    'product', meta,

    Column('id', Integer, primary_key=True),
    Column('Name', String(200), nullable=False),
    Column('Description', String(200), nullable=False),
    Column('Price', Integer, nullable=False),

)

async def init_pg(app):
    conf = app['config']['postgres']
    engine = await aiopg.sa.create_engine(
        database=conf['database'],
        user=conf['user'],
        password=conf['password'],
        host=conf['host'],
        port=conf['port'],
        minsize=conf['minsize'],
        maxsize=conf['maxsize'],
    )
    app['db'] = engine

After spending all afternoon, finally I figured it out. text can convert string as TextClause and it can be used in Whereclause.

https://docs.sqlalchemy.org/en/13/core/selectable.html#sqlalchemy.sql.expression.select

from sqlalchemy import text

...

async with request.app['db'].acquire() as conn:
        whereclause = text('id = {}'.format(request.match_info['id']))
        cursor = await conn.execute(db.product.select(whereclause=whereclause))
        record = await cursor.fetchone()
        product = Product(*record.values())

I am really happy to know it :) and I had better look into Official Document more carefully.

When you want to create a new blob in your code Azure Functions

kemurayama — Sat, 25 Apr 2020 10:41:36 +0000

You can create a new blob file by writing like below.
Plus {rand-guid} generate guid. It is useful !!

Storage Account Setting is set by Storage Account Attribute.

[FunctionName("MyTestFuncion")]
[StorageAccount("StorageConnectionAppSetting")]

public static async Task Run([EventHubTrigger("myeh", Connection = "EHConnection")] EventData[] events,
        Binder binder,
        ILogger log)
    ...

    using (var writer = await binder.BindAsync<TextWriter>(
                        new BlobAttribute("<container>/{rand-guid}.json")))
                    {
                        writer.Write(<what you want to write>);
                    }