AzureFunction + AppServiceでTwilioAPIを利用する Part1

AzureFunction + AppServiceを利用して、TwilioのAPIをたたいてみようと思います。
TwilioのAPIをクライアント側には配布したくないが、組織で一括でマネージしたいときなど、有効かと思います。

Part1では、バックエンド部分となるAzureFunctionの開発を行い、Part2では、フロント側の開発を実施します。

構成

簡単ですが、下記のような構成で行こうと思います。
ユーザはAppServiceに、認証付き（EasyAuth）でアクセスし、フロント画面が表示されます。
画面の中には、テキストボックスと送信ボタンが配置されていて、ボタンを押すとFunctionが動作します。
Functionは、KeyVaultからTwilioAPIキーを読みだして、TwilioのAPIを実行して、結果を、フロント画面に返却します。

Azure Functionローカル環境準備

Linux環境で試したかったため、WSL上で行っています。
また、Nodeのバージョンが古いと、CoreToolsから怒られるので、Node.jsのバージョンアップを実施しておいてください。
Ubuntu で Node の最新版/推奨版を使う (n コマンド編) #Node.js – Qiita

Core Tools を使用してローカルで Azure Functions を開発する | Microsoft Learn
Core Toolsを、WSL環境にインストールします。
また、Visual StudioCodeで開発する場合は、Azure Toolsの拡張機能もインストールしておきます。
これらをインストールすると、WSL + VisualStudio環境下で、Functionの開発がローカルで可能になります。(Function自体、ローカルじゃなくても最初からクラウドで作成することは可能ですが、デバッグが面倒。)

ローカルFunctionプロジェクトの作成

Functionにコードを書いていくために、ローカル側のプロジェクトを作成します。

F1 → Create New Project

Javascriptを選択

今回は、フロント側からHTTP Requestがあれば、動作させたいので、HTTP triggerを選択

ローカルのFunctionプロジェクトが作成されました。

F5でデバック実行して、ちゃんと環境が整っていれば、成功してローカルホストにアクセスすると、以下のような画面が表示されます。

また、ローカルプロジェクトを生成した時には、Getパラメータを引っ張てHello Worldをするようになっているので、実際のAPIに近い動作も確認できます。

Twilo APIの利用

環境に、Twilioを入れるため、npm install twilioを実施します。

今回、使いたいAPIは下記のものだったので、Verified caller ID の friendly nameに、userPrincipalNameを入力するように関数を作成します。（AppServiceのEasyAuthから取得予定）
Outgoing Caller IDs | Twilio

POSTメソッドで受け付けて、その中に、userPrincipalNameとphoneNumberを抜き出し、TwilioのAPIへ投げるコードです。

const { app } = require('@azure/functions');
const twilio = require("twilio");


const accountSid = "";
const authToken = "";
const client = twilio(accountSid, authToken);

async function createValidationRequest(userPrincipalName,phoneNumber) {
    const validationRequest = await client.validationRequests.create({
        friendlyName: userPrincipalName,
        phoneNumber: phoneNumber,
    });

    return validationRequest.validationCode;
}

app.http('httpTrigger1_doVerifiedCallerID', {
    methods: ['POST'],
    authLevel: 'anonymous',
    handler: async (request, context) => {
        context.log(`Http function processed request for url "${request.url}"`);

        // Read the body stream
        const requestData = await request.json(); 
        context.log(`Http function processed request for body "${requestData}"`);
        const userPrincipalName = requestData.userPrincipalName;
        const phoneNumber = requestData.phoneNumber;

        if (!userPrincipalName || !phoneNumber) {
            return { status: 400, body: "userPrincipalName and phoneNumber are required." };
        }

        try {
            const validationRequestReturn = await createValidationRequest(userPrincipalName,phoneNumber);
            return { body: `${validationRequestReturn}` };
        } catch (error) {
            return { body: `${error.message}` };
        }
    }
});

作成した関数を簡単に試すには、Visual StudioCodeでF5のデバッグ実行したうえで、アドインなどを使ってAPIを投げると動作確認ができます。
userPrincipalNameとphoneNumberをBODYに入力し、responseには、TwilioからのResponseが表示されています。

Talend API Tester – Free Edition – Chrome ウェブストア (google.com)

TwilioのAPIを利用するためには、Auth Token(パスワード相当)が必要なので、KeyVaultなどに保管し、Function側から環境変数として読み込むなどしてください。
[Azure] Azure FunctionsからAzure Key Vaultの値を参照する #AzureFunctions – Qiita