建築ビデオチャットアプリ、パート1 -セットアップ

先週私はnew stream series その中で我々は見てみるつもりですAzure Communication Services (ACS) .
さて、最初のエピソードは出ています、そして、私は我々がACSの上で建築で学んだものを文書化したかったです.

場面の設定
ACSは本質的にチームのためのバックエンドですが、既存のアプリケーションに統合することができます.我々のケースのために、我々はゼロから構築しています、そして、目標配備はそうですAzure Static Web Apps (SWA) これは私たちのAPIバックエンド(ユーザ管理のための)、我々の反応フロントエンドと最も重要なのは、アカウント管理のためのホストを与えます.
コードベースについては、React TypeScript GitHub template 私がSWAのために作成したのは、APIバックエンドがtypescript azure関数で書かれています.

ユーザーアクセス
ACSについて本当に素晴らしいことの一つは、自分の認証モデルを持っているということです.つまり、あなたのアプリケーションをazure adや何かに移植することを強制されていないということです.
さて、SWAで使用しているAPIバックエンドが登場するところですが、ユーザのトークンを発行するトークンサービスが必要です.そのやり方を見てみましょう.

トークンサービスの作成
私たちはHTTP Trigger これを行うには/api/issueToken . その中にapi Git Repoのフォルダ

func new --template HttpTrigger --name issueToken

我々の機能では、我々がする最初のことは、ログインしているユーザーがいることを確認することです.SWAはそれを行うメカニズムを提供するvia its config file , しかし、我々はまた、user profile そして、それを検証します(我々はまだプロフィールを使用しません、しかし、将来、我々はそうします).
BoilerPlate関数コードを削除して、我々のものを入れ始める時間

import { AzureFunction, Context, HttpRequest } from "@azure/functions";

type ClientPrincipal = {
    identityProvider: string;
    userId: string;
    userDetails: string;
    userRoles: string[];
};

const httpTrigger: AzureFunction = async function(
    context: Context,
    req: HttpRequest
): Promise<void> {
    const header = req.headers["x-ms-client-principal"];
    const encoded = Buffer.from(header, "base64");
    const decoded = encoded.toString("ascii");

    const principal: ClientPrincipal = JSON.parse(decoded);

    if (!principal.userId) {
        context.res = {
            status: 401,
            body: "The user name is required to ensure their access token"
        };
        return;
    }

    context.res = {
        body: "TODO"
    };
};

export default httpTrigger;

ここでは、ヘッダーを展開して、aがあることを保証していますuserId 校長では、そうでなければ、我々は悪い要求を返します.
さて、ACS管理NPMパッケージを統合します. @azure/communication-administration これはユーザにトークンを発行する能力を与えます.このトークンをクライアントアプリケーションで使用して、ACSと接続し、クライアントが行うことができます.

npm install --save @azure/communication-administration

パッケージをインストールすると、我々はそれを組み込むことができると私たちのトークンを発行します.それをするために、私たちはCommunicationIdentityClient , 接続文字列をacsに提供します.
まだACSリソースを作成していない場合は、チェックアウトthe docs .

import { AzureFunction, Context, HttpRequest } from "@azure/functions";
import { CommunicationIdentityClient } from "@azure/communication-administration";

const identityClient = new CommunicationIdentityClient(
    process.env["COMMUNICATION_SERVICES_CONNECTION_STRING"]
);

// snip

接続文字列をlocal.settings.json , につきAzure Functions docs 呼ばれるCOMMUNICATION_SERVICES_CONNECTION_STRING それは私にACSへのアクセスを与える.
一度identityClient 準備ができたら、関数の中で使用できます.
`` ` type `` hLLINE =[ 20 , 21 ] }
//snip
const httptrigger : azurefunction = async関数
コンテキスト:コンテキスト
req : httprequest
)
constヘッダ= req .ヘッダー", "X - MS -クライアント"
CONSTエンコード=バッファ.( header , base 64 "から)
デコードした.tostring ("ascii ");

const principal: ClientPrincipal = JSON.parse(decoded);

if (!principal.userId) {
    context.res = {
        status: 401,
        body: "The user name is required to ensure their access token"
    };
    return;
}

const user = await identityClient.createUser();
const tokenResponse = await identityClient.issueToken(user, ["voip"]);

context.res = {
    // status: 200, /* Defaults to 200 */
    body: {
        token: tokenResponse.token,
        expiresOn: tokenResponse.expiresOn,
        communicationUserId: user.communicationUserId
    } as TokenResponse
};

//
デフォルトのhttptriggerをエクスポートします

The important lines from above are these two lines:



```typescript
const user = await identityClient.createUser();
const tokenResponse = await identityClient.issueToken(user, ["voip"]);

一つ目はACSでユーザを作ることです.このユーザーが我々のシステムで既に持っているユーザーアカウントに直接の関係を持っていないことに注意してください.これは、ACSユーザをシステムユーザと関連づけるよりも、トークンを必要とするたびに、全く新しいユーザを作成していることを意味します.ですから、トラックを下ろすには、より効果的に行う方法を解決する必要があるでしょう.一度我々はCommunicationUser 次に、issueToken メソッドを使用して、ユーザーが持っているスコープを提供します.この場合、トークンはVoIPケーパビリティを持っているだけですが、チャットをしたい場合は、明示的にそれらを付与する必要があります.
しかし、それで、我々のバックエンドはされます、そして、我々はクライアントアプリケーションのためにトークンを発行することができます.

結論
これは我々が最初のエピソードで得ることができたすべてでありません、しかし、一旦我々がトークンを出すことができるので、それは最も重要なことです.あなたはそのコードを見つけるでしょう part-01 tag on GitHub , そして、あなたはYouTube上で全体のエピソードを見ることができます.NEX時間、我々はカメラのフィードを表示し、マイクにアクセスを開始する予定です.