Das Szenario Schritte Voraussetzungen Erstellen Sie die Ressourcen AWS Erstellen Sie den HTML-Code Bereiten Sie das Browser-Skript vor Führen Sie die App aus Löschen Sie die AWS Ressourcen

Erstellen Sie eine Transkriptions-App mit authentifizierten Benutzern

In diesem Kurs lernen Sie Folgendes:

Implementieren Sie die Authentifizierung mithilfe eines Amazon Cognito Cognito-Identitätspools, um Benutzer zu akzeptieren, die mit einem Amazon Cognito Cognito-Benutzerpool verbunden sind.
Verwenden Sie Amazon Transcribe, um Sprachaufnahmen zu transkribieren und im Browser anzuzeigen.

Das Szenario

Die App ermöglicht es Benutzern, sich mit einer eindeutigen E-Mail-Adresse und einem eindeutigen Benutzernamen anzumelden. Nach Bestätigung ihrer E-Mail können sie Sprachnachrichten aufzeichnen, die automatisch transkribiert und in der App angezeigt werden.

Funktionsweise

Die App verwendet zwei Amazon S3 S3-Buckets, einen zum Hosten des Anwendungscodes und einen zum Speichern von Transkriptionen. Die App verwendet einen Amazon-Cognito-Benutzerpool zur Authentifizierung Ihrer Benutzer. Authentifizierte Benutzer verfügen über IAM-Berechtigungen für den Zugriff auf die erforderlichen Dienste. AWS

Wenn ein Benutzer zum ersten Mal eine Sprachnachricht aufzeichnet, erstellt Amazon S3 einen eindeutigen Ordner mit dem Namen des Benutzers im Amazon S3 S3-Bucket zum Speichern von Transkriptionen. Amazon Transcribe transkribiert die Sprachnachricht in Text und speichert sie in JSON im Ordner des Benutzers. Wenn der Benutzer die App aktualisiert, werden seine Transkriptionen angezeigt und können heruntergeladen oder gelöscht werden.

Für dieses Tutorial benötigen Sie ungefähr 30 Minuten.

Schritte

Voraussetzungen

Richten Sie die Projektumgebung ein, um diese JavaScript Node-Beispiele auszuführen, und installieren Sie die erforderlichen Module AWS SDK for JavaScript und Module von Drittanbietern. Folgen Sie den Anweisungen auf GitHub.
Erstellen Sie eine freigegebene Konfigurationsdatei mit Ihren Anmeldeinformationen. Weitere Informationen zur Bereitstellung einer Datei mit gemeinsam genutzten Anmeldeinformationen finden Sie unter Dateien mit gemeinsam genutzten Konfigurationen und Anmeldeinformationen im Referenzhandbuch für AWS SDKs und Tools.

Wichtig

In diesem Beispiel wird ECMAScript6 (ES6) verwendet. Dies erfordert Node.js Version 13.x oder höher. Informationen zum Herunterladen und Installieren der neuesten Version von Node.js finden Sie unter Node.js downloads. .

Wenn Sie jedoch die CommonJS-Syntax bevorzugen, finden Sie weitere Informationen unter. JavaScript ES6/CommonJS-Syntax

Erstellen Sie die Ressourcen AWS

In diesem Abschnitt wird beschrieben, wie Sie AWS Ressourcen für diese App mithilfe von bereitstellenAWS Cloud Development Kit (AWS CDK).

Anmerkung

Das AWS CDK ist ein Softwareentwicklungsframework, mit dem Sie Cloud-Anwendungsressourcen definieren können. Weitere Informationen finden Sie im AWS Cloud Development Kit (AWS CDK)-Entwicklerhandbuch.

Um Ressourcen für die App zu erstellen, verwenden Sie die Vorlage hier weiter, GitHub um einen AWS CDK Stack entweder mit der AWSWeb Services Management Console oder dem zu erstellen AWS CLI. Anweisungen zum Ändern des Stacks oder zum Löschen des Stacks und der zugehörigen Ressourcen, wenn Sie das Tutorial abgeschlossen haben, finden Sie hier GitHub.

Anmerkung

Der Stack-Name muss innerhalb einer AWS Region und eines AWS Kontos eindeutig sein. Sie können bis zu 128 Zeichen angeben. Zahlen und Bindestriche sind zulässig.

Der resultierende Stapel stellt automatisch die folgenden Ressourcen bereit.

Ein Amazon Cognito Cognito-Identitätspool mit einer authentifizierten Benutzerrolle.
Eine IAM-Richtlinie mit Berechtigungen für Amazon S3 und Amazon Transcribe ist an die Rolle des authentifizierten Benutzers angehängt.
Ein Amazon Cognito Cognito-Benutzerpool, der es Benutzern ermöglicht, sich bei der App zu registrieren und anzumelden.
Ein Amazon S3 S3-Bucket zum Hosten der Anwendungsdateien.
Ein Amazon S3 S3-Bucket zum Speichern der Transkriptionen.

Wichtig
Dieser Amazon S3 S3-Bucket ermöglicht den öffentlichen Zugriff READ (LIST), sodass jeder die Objekte innerhalb des Buckets auflisten und die Informationen möglicherweise missbrauchen kann. Wenn Sie diesen Amazon S3-Bucket nicht unmittelbar nach Abschluss des Tutorials löschen, empfehlen wir Ihnen dringend, die Best Practices für Sicherheit in Amazon S3 im Amazon Simple Storage Service-Benutzerhandbuch zu befolgen.

Erstellen Sie den HTML-Code

Erstellen Sie eine index.html Datei, kopieren Sie den folgenden Inhalt und fügen Sie ihn ein. Die Seite enthält ein Bedienfeld mit Schaltflächen zum Aufzeichnen von Sprachnachrichten und eine Tabelle, in der die zuvor transkribierten Nachrichten des aktuellen Benutzers angezeigt werden. Das Skript-Tag am Ende des body Elements ruft die aufmain.js, die das gesamte Browser-Skript für die App enthalten. Sie erstellen die Datei main.js mithilfe von Webpack, wie im folgenden Abschnitt dieses Tutorials beschrieben.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="recorder.css">
    <style>
        table, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<h2>Record</h2>
<p>
    <button id="record" onclick="startRecord()"></button>
    <button id="stopRecord" disabled onclick="stopRecord()">Stop</button>
<p id="demo" style="visibility: hidden;"></p>
</p>
<p>
    <audio id="recordedAudio"></audio>
</p>

<h2>My transcriptions</h2>
<table id="myTable1" style ="width:678px;">
</table>
<table id="myTable" style ="width:678px;">
        <tr>
    <td style = "font-weight:bold">Time created</td>
    <td style = "font-weight:bold">Transcription</td>
    <td style = "font-weight:bold">Download</td>
    <td style = "font-weight:bold">Delete</td>
       </tr>
</table>

<script type="text/javascript" src="./main.js"></script>
</body>

</html>

Dieses Codebeispiel ist hier unter verfügbar GitHub.

Bereiten Sie das Browser-Skript vor

Es gibt drei Dateien, index.htmlrecorder.js, undhelper.js, die Sie main.js mithilfe von Webpack zu einer einzigen bündeln müssen. In diesem Abschnitt werden nur die Funktionen detailliert beschriebenindex.js, für die das SDK verwendet wird JavaScript, das hier verfügbar GitHub ist.

Anmerkung

recorder.jsund helper.js sind erforderlich, werden aber, da sie keinen Node.js Code enthalten, in den Inline-Kommentaren hier bzw. hier erklärt GitHub.

Definieren Sie zunächst die Parameter. COGNITO_IDist der Endpunkt für den Amazon Cognito Cognito-Benutzerpool, den Sie im Erstellen Sie die Ressourcen AWS Thema dieses Tutorials erstellt haben. Er ist formatiertcognito-idp.AWS_REGION.amazonaws.com/USER_POOL_ID. Die Benutzerpool-ID ist ID_TOKEN im AWS Anmeldeinformationstoken, das durch die getToken Funktion in der Datei 'helper.js' aus der App-URL entfernt wird. Dieses Token wird an die loginData Variable übergeben, die den Amazon Transcribe- und Amazon S3 S3-Client-Objekten Logins zur Verfügung stellt. Ersetzen Sie „REGION“ durch die AWS Region und „BUCKET“ durch das Ersetzen Sie „IDENTITY_POOL_ID“ durch das IdentityPoolId von der Beispielseite des Amazon Cognito Cognito-Identitätspools, das Sie für dieses Beispiel erstellt haben. Dies wird auch an jedes Client-Objekt übergeben.


// Import the required AWS SDK clients and commands for Node.js
import "./helper.js";
import "./recorder.js";
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import {
  CognitoIdentityProviderClient,
  GetUserCommand,
} from "@aws-sdk/client-cognito-identity-provider";
import { S3RequestPresigner } from "@aws-sdk/s3-request-presigner";
import { createRequest } from "@aws-sdk/util-create-request";
import { formatUrl } from "@aws-sdk/util-format-url";
import {
  TranscribeClient,
  StartTranscriptionJobCommand,
} from "@aws-sdk/client-transcribe";
import {
  S3Client,
  PutObjectCommand,
  GetObjectCommand,
  ListObjectsCommand,
  DeleteObjectCommand,
} from "@aws-sdk/client-s3";
import fetch from "node-fetch";

// Set the parameters.
// 'COGINTO_ID' has the format 'cognito-idp.eu-west-1.amazonaws.com/COGNITO_ID'.
let COGNITO_ID = "COGNITO_ID";
// Get the Amazon Cognito ID token for the user. 'getToken()' is in 'helper.js'.
let idToken = getToken();
let loginData = {
  [COGNITO_ID]: idToken,
};

const params = {
  Bucket: "BUCKET", // The Amazon Simple Storage Solution (S3) bucket to store the transcriptions.
  Region: "REGION", // The AWS Region
  identityPoolID: "IDENTITY_POOL_ID", // Amazon Cognito Identity Pool ID.
};

// Create an Amazon Transcribe service client object.
const client = new TranscribeClient({
  region: params.Region,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: params.Region }),
    identityPoolId: params.identityPoolID,
    logins: loginData,
  }),
});

// Create an Amazon S3 client object.
const s3Client = new S3Client({
  region: params.Region,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: params.Region }),
    identityPoolId: params.identityPoolID,
    logins: loginData,
  }),
});

Wenn die HTML-Seite geladen wird, updateUserInterface erstellt der einen Ordner mit dem Namen des Benutzers im Amazon S3 S3-Bucket, falls er sich zum ersten Mal bei der App anmeldet. Wenn nicht, aktualisiert es die Benutzeroberfläche mit allen Abschriften der vorherigen Sitzungen des Benutzers.


window.onload = async () => {
  // Set the parameters.
  const userParams = {
    // Get the access token. 'GetAccessToken()' is in 'helper.js'.
    AccessToken: getAccessToken(),
  };
  // Create a CognitoIdentityProviderClient client object.
  const client = new CognitoIdentityProviderClient({ region: params.Region });
  try {
    const data = await client.send(new GetUserCommand(userParams));
    const username = data.Username;
    // Export username for use in 'recorder.js'.
    exports.username = username;
    try {
      // If this is user's first sign-in, create a folder with user's name in Amazon S3 bucket.
      // Otherwise, no effect.
      const Key = `${username}/`;
      try {
        const data = await s3Client.send(
          new PutObjectCommand({ Key: Key, Bucket: params.Bucket })
        );
        console.log("Folder created for user ", data.Username);
      } catch (err) {
        console.log("Error", err);
      }
      try {
        // Get a list of the objects in the Amazon S3 bucket.
        const data = await s3Client.send(
          new ListObjectsCommand({ Bucket: params.Bucket, Prefix: username })
        );
        // Create a variable for the list of objects in the Amazon S3 bucket.
        const output = data.Contents;
        // Loop through the objects, populating a row on the user interface for each object.
        for (var i = 0; i < output.length; i++) {
          var obj = output[i];
          const objectParams = {
            Bucket: params.Bucket,
            Key: obj.Key,
          };
          // Get the name of the object from the Amazon S3 bucket.
          const data = await s3Client.send(new GetObjectCommand(objectParams));
          // Extract the body contents, a readable stream, from the returned data.
          const result = data.Body;
          // Create a variable for the string version of the readable stream.
          let stringResult = "";
          // Use 'yieldUnit8Chunks' to convert the readable streams into JSON.
          for await (let chunk of yieldUint8Chunks(result)) {
            stringResult += String.fromCharCode.apply(null, chunk);
          }
          // The setTimeout function waits while readable stream is converted into JSON.
          setTimeout(function () {
            // Parse JSON into human readable transcript, which will be displayed on user interface (UI).
            const outputJSON =
              JSON.parse(stringResult).results.transcripts[0].transcript;
            // Create name for transcript, which will be displayed.
            const outputJSONTime = JSON.parse(stringResult)
              .jobName.split("/")[0]
              .replace("-job", "");
            i++;
            //
            // Display the details for the transcription on the UI.
            // 'displayTranscriptionDetails()' is in 'helper.js'.
            displayTranscriptionDetails(
              i,
              outputJSONTime,
              objectParams.Key,
              outputJSON
            );
          }, 1000);
        }
      } catch (err) {
        console.log("Error", err);
      }
    } catch (err) {
      console.log("Error creating presigned URL", err);
    }
  } catch (err) {
    console.log("Error", err);
  }
};

// Convert readable streams.
async function* yieldUint8Chunks(data) {
  const reader = data.getReader();
  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) return;
      yield value;
    }
  } finally {
    reader.releaseLock();
  }
}

Wenn der Benutzer eine Sprachnachricht für Transkriptionen aufzeichnet, upload lädt er die Aufzeichnungen in den Amazon S3 S3-Bucket hoch. Diese Funktion wird aus der Datei aufgerufen. recorder.js



// Upload recordings to Amazon S3 bucket
window.upload = async function (blob, userName) {
  // Set the parameters for the recording recording.
  const Key = `${userName}/test-object-${Math.ceil(Math.random() * 10 ** 10)}`;
  let signedUrl;

  // Create a presigned URL to upload the transcription to the Amazon S3 bucket when it is ready.
  try {
    // Create an Amazon S3RequestPresigner object.
    const signer = new S3RequestPresigner({ ...s3Client.config });
    // Create the request.
    const request = await createRequest(
      s3Client,
      new PutObjectCommand({ Key, Bucket: params.Bucket })
    );
    // Define the duration until expiration of the presigned URL.
    const expiration = new Date(Date.now() + 60 * 60 * 1000);
    // Create and format the presigned URL.
    signedUrl = formatUrl(await signer.presign(request, expiration));
    console.log(`\nPutting "${Key}"`);
  } catch (err) {
    console.log("Error creating presigned URL", err);
  }
  try {
    // Upload the object to the Amazon S3 bucket using a presigned URL.
    response = await fetch(signedUrl, {
      method: "PUT",
      headers: {
        "content-type": "application/octet-stream",
      },
      body: blob,
    });
    // Create the transcription job name. In this case, it's the current date and time.
    const today = new Date();
    const date =
      today.getFullYear() +
      "-" +
      (today.getMonth() + 1) +
      "-" +
      today.getDate();
    const time =
      today.getHours() + "-" + today.getMinutes() + "-" + today.getSeconds();
    const jobName = date + "-time-" + time;

    // Call the "createTranscriptionJob()" function.
    createTranscriptionJob(
      "s3://" + params.Bucket + "/" + Key,
      jobName,
      params.Bucket,
      Key
    );
  } catch (err) {
    console.log("Error uploading object", err);
  }
};

// Create the AWS Transcribe transcription job.
const createTranscriptionJob = async (recording, jobName, bucket, key) => {
  // Set the parameters for transcriptions job
  const params = {
    TranscriptionJobName: jobName + "-job",
    LanguageCode: "en-US", // For example, 'en-US',
    OutputBucketName: bucket,
    OutputKey: key,
    Media: {
      MediaFileUri: recording, // For example, "https://transcribe-demo.s3-REGION.amazonaws.com/hello_world.wav"
    },
  };
  try {
    // Start the transcription job.
    const data = await client.send(new StartTranscriptionJobCommand(params));
    console.log("Success - transcription submitted", data);
  } catch (err) {
    console.log("Error", err);
  }
};

deleteTranscriptionlöscht eine Transkription von der Benutzeroberfläche und deleteRow löscht eine bestehende Transkription aus dem Amazon S3 S3-Bucket. Beide werden durch die Schaltfläche Löschen auf der Benutzeroberfläche ausgelöst.


// Delete a transcription from the Amazon S3 bucket.
window.deleteJSON = async (jsonFileName) => {
  try {
    await s3Client.send(
      new DeleteObjectCommand({
        Bucket: params.Bucket,
        Key: jsonFileName,
      })
    );
    console.log("Success - JSON deleted");
  } catch (err) {
    console.log("Error", err);
  }
};
// Delete a row from the user interface.
window.deleteRow = function (rowid) {
  const row = document.getElementById(rowid);
  row.parentNode.removeChild(row);
};

Führen Sie abschließend an der Eingabeaufforderung den folgenden Befehl aus, um die Datei JavaScript für dieses Beispiel in einer Datei mit dem Namen zu bündelnmain.js:


webpack index.js --mode development --target web --devtool false -o main.js

Anmerkung

Hinweise zur Installation von Webpack finden Sie unterAnwendungen mit Webpack bündeln.

Führen Sie die App aus

Sie können die App dann an der folgenden Stelle anzeigen.


DOMAIN/login?client_id=APP_CLIENT_ID&response_type=token&scope=aws.cognito.signin.user.admin+email+openid+phone+profile&redirect_uri=REDIRECT_URL

Amazon Cognito erleichtert die Ausführung der App, indem es einen Link in der AWS Web Services Management Console bereitstellt. Navigieren Sie einfach zur App-Client-Einstellung Ihres Amazon Cognito Cognito-Benutzerpools und wählen Sie Launch Hosted UI aus. Die URL für die App hat das folgende Format.

Wichtig

Die gehostete Benutzeroberfläche verwendet standardmäßig den Antworttyp „Code“. Dieses Tutorial ist jedoch für den Antworttyp „Token“ konzipiert, sodass Sie ihn ändern müssen.

Löschen Sie die AWS Ressourcen

Wenn Sie das Tutorial abgeschlossen haben, sollten Sie die Ressourcen löschen, damit Ihnen keine unnötigen Kosten entstehen. Da Sie Inhalt zu beiden Amazon S3 S3-Buckets hinzugefügt haben, müssen Sie sie manuell löschen. Anschließend können Sie die verbleibenden Ressourcen entweder mit der AWSWeb Services Management Console oder mit dem AWS CLIlöschen. Anweisungen zum Ändern des Stacks oder zum Löschen des Stacks und der zugehörigen Ressourcen, wenn Sie das Tutorial abgeschlossen haben, finden Sie hier GitHub.

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

Serviceübergreifend: App zum Senden von Daten

Serviceübergreifend: Amazon API Gateway und Lambda