Erstellen der Dokumentsignatur in besprechungsinternen Dokumenten
Die Besprechungssignatur ist eine Microsoft Teams-Beispiel-App, mit der Benutzer Dokumente in Echtzeitszenarien signieren können. Es bietet eine verbesserte Benutzererfahrung, da die Benutzer während Besprechungen Dokumente in einer einzigen Sitzung überprüfen und signieren können. In diesem Beispiel können Benutzer Dokumente mit ihrer aktuellen Mandantenidentität elektronisch signieren. Die Benutzer können die folgenden Dokumente während Besprechungen signieren:
- Kaufverträge.
- Bestellungen.
Die Vorlage kann auch für andere Szenarien verwendet werden, z. B. für die Überprüfung und Genehmigung von Codebeispielen und gemeinsamen Dokumenten. Die Benutzer können anpassen, um andere Arten von Signaturen zu integrieren:
- Handschriftliche Signaturen.
- Zertifikatbasierte Signaturen.
Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen einer Dokumentsignatur-App in Besprechungen. Die folgende Ausgabe wird angezeigt, nachdem Sie diese Anleitung abgeschlossen haben:
Voraussetzungen
Stellen Sie sicher, dass Sie die folgenden Tools installieren, um Ihre Entwicklungsumgebung einzurichten:
| Installieren | Zum Benutzen... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams für die Zusammenarbeit mit allen, mit denen Sie arbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort. | |
|
Visual Studio 2022 |
Sie können die Unternehmensversion in Visual Studio 2022 und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version. | |
| .NET Core SDK | Angepasste Bindungen für lokales Debuggen und Bereitstellungen von Azure Functions-Apps. Verwenden Sie die neueste Version, oder installieren Sie die portable Version. | |
| Entwicklungstunnel | Teams-App-Features (Konversationsbots, Nachrichtenerweiterungen und eingehende Webhooks) erfordern eingehende Verbindungen. Ein Tunnel verbindet Ihr Entwicklungssystem mit Teams. Dev Tunnel ist ein leistungsstarkes Tool, um Ihren Localhost sicher für das Internet zu öffnen und zu steuern, wer Zugriff hat. Dev Tunnel ist in Visual Studio 2022 Version 17.7.0 oder höher verfügbar. Oder Sie können ngrok auch als Tunnel verwenden, um Ihr Entwicklungssystem mit Teams zu verbinden. Dies ist nicht für Apps erforderlich, die nur Registerkarten enthalten. Dieses Paket wird im Projektverzeichnis installiert (mithilfe von npm devDependencies). |
|
| Microsoft 365-Entwicklerkonto | Zugriff auf das Teams-Konto mit den entsprechenden Berechtigungen zum Installieren einer App. |
Hinweis
Nachdem Sie ngrok heruntergeladen haben, registrieren Sie sich, und installieren Sie authtoken.
Tipp
Stellen Sie sicher, dass das Microsoft Teams-Konto kein Gastkonto ist.
Einrichten Ihres Teams-Entwicklungsmandanten
Ein Mandant ist wie ein Raum oder ein Container für Ihre Organisation in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen ausführen. In diesem Bereich laden Sie auch Ihre benutzerdefinierte App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.
Überprüfen auf benutzerdefinierte App-Uploadoption
Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.
Hinweis
Ein benutzerdefinierter App-Upload ist für die Vorschau und das Testen von Apps in der lokalen Teams-Umgebung erforderlich. Aktivieren Sie den benutzerdefinierten App-Upload, um eine Vorschau ihrer App in Teams lokal anzuzeigen und zu testen.
Verfügen Sie bereits über einen Mandanten und haben Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies wirklich tun!
So überprüfen Sie das Hochladen von Apps in Teams:
Wählen Sie im Teams-Client das Symbol Apps aus.
Wählen Sie Verwalten Ihrer Apps aus.
Wählen Sie App hochladen aus.
Suchen Sie nach der Option Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.
Hinweis
Wenden Sie sich an Ihren Teams-Administrator, wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden.
Einrichten einer lokalen Umgebung
Öffnen Sie Microsoft-Teams-Samples.
Wählen Sie Code aus.
Wählen Sie im Dropdownmenü Mit GitHub Desktop öffnen aus.
Wählen Sie Klonen aus.
Aktualisieren der Registrierung der Microsoft Entra-App
Die folgenden Schritte helfen Ihnen beim Erstellen und Registrieren Ihres Bots im Azure-Portal:
- Erstellen und registrieren Sie Ihre Microsoft Entra-ID.
- Erstellen Sie einen geheimen Clientschlüssel, um die SSO-Authentifizierung des Bots zu aktivieren.
- Fügen Sie den Teams-Kanal hinzu, um den Bot bereitzustellen.
- Erstellen Sie einen Tunnel zu den Endpunkten Ihres Webservers mithilfe von Dev Tunnel (empfohlen) oder ngrok.
- Fügen Sie dem von Ihnen erstellten Entwicklungstunnel einen Messagingendpunkt hinzu.
Hinzufügen der App-Registrierung
Navigieren Sie zum Azure-Portal.
Wählen Sie App-Registrierungen aus.
Wählen Sie + Neue Registrierung aus.
Geben Sie den Namen Ihrer App ein.
Wählen Sie Konten in einem beliebigen Organisationsverzeichnis (Beliebiger Microsoft Entra ID-Mandant – Mehrinstanzenfähig) aus.
Wählen Sie Registrieren aus.
Ihre App ist in der Microsoft Entra-ID registriert. Die App-Übersichtsseite wird angezeigt.
Hinweis
Speichern Sie die App-ID unter Anwendungs-ID (Client) und Verzeichnis-ID (Mandant) zur weiteren Verwendung.
Erstellen eines Tunnels
Öffnen Sie Visual Studio.
Wählen Sie Neues Projekt erstellen aus.
Geben Sie im Suchfeld ASP.NET ein. Wählen Sie in den Suchergebnissen ASP.NET Core Web App aus.
Wählen Sie Weiter aus.
Geben Sie Projektname ein , und wählen Sie Weiter aus.
Wählen Sie Erstellen aus.
Ein Übersichtsfenster wird angezeigt.
Wählen Sie in der Dropdownliste Debug die Option Dev Tunnels (kein aktiver Tunnel)>Tunnel erstellen... aus.
Ein Popupfenster wird geöffnet.
Aktualisieren Sie die folgenden Details im Popupfenster:
- Konto: Geben Sie ein Microsoft- oder GitHub-Konto ein.
- Name: Geben Sie einen Namen für Ihren Tunnel ein.
- Tunneltyp: Wählen Sie in der Dropdownliste die Option Temporär aus.
- Zugriff: Wählen Sie in der Dropdownliste Öffentlich aus.
Wählen Sie OK aus.
Ein Popupfenster wird angezeigt, in dem angezeigt wird, dass der Entwicklungstunnel erfolgreich erstellt wurde.
Wählen Sie OK aus.
Sie finden den tunnel, den Sie erstellt haben, in der Debug-Dropdownliste wie folgt:
Wählen Sie F5 aus, um die Anwendung im Debugmodus auszuführen.
Wenn ein Dialogfeld Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.
Ein Popupfenster wird geöffnet.
Wählen Sie Weiter.
Die Dev Tunnel-Startseite wird in einem neuen Browserfenster geöffnet, und der Entwicklungstunnel ist jetzt aktiv.
Wechseln Sie zu Visual Studio, und wählen Sie Ausgabe anzeigen >aus.
Wählen Sie im Dropdownmenü Ausgabekonsoledie Option Dev Tunnels aus.
In der Ausgabekonsole wird die Dev Tunnel-URL angezeigt.
Hinzufügen einer Webauthentifizierung
Wählen Sie im linken Bereich unter Verwalten die Option Authentifizierung aus.
Wählen SiePlattformweb>hinzufügenaus.
Geben Sie den Umleitungs-URI für Ihre App ein, indem Sie an den vollqualifizierten Domänennamen anfügen
auth-end. Zum Beispielhttps://your-devtunnel-domain/auth-endoderhttps://your-ngrok-domain/auth-end.Aktivieren Sie unter Implizite Genehmigung und Hybridflows die Kontrollkästchen Zugriffstoken und ID-Token .
Wählen Sie Konfigurieren aus.
Wählen Sie unter Web die Option URI hinzufügen aus.
https://token.botframework.com/.auth/web/redirecteingeben.Klicken Sie auf Speichern.
Erstellen eines geheimen Clientschlüssels
Wählen Sie im linken Bereich unter Verwalten die Option Zertifikate & Geheimnisse aus.
Wählen Sie unter Geheime Clientschlüsseldie Option + Neuer geheimer Clientschlüssel aus.
Das Fenster Geheimen Clientschlüssel hinzufügen wird angezeigt.
Geben Sie Beschreibung ein.
Klicken Sie auf Hinzufügen.
Wählen Sie unter Wertdie Option In Zwischenablage kopieren aus, um den Wert des geheimen Clientschlüssels zur weiteren Verwendung zu speichern.
API-Berechtigungen hinzufügen
Wählen Sie im linken Bereich API-Berechtigungen aus.
Hinweis
Benutzer müssen diesen Berechtigungen nur zustimmen, wenn die Microsoft Entra-App in einem anderen Mandanten registriert ist.
Wählen Sie + Berechtigung hinzufügen aus.
Wählen Sie Microsoft Graph aus.
Wählen Sie Delegierte Berechtigungen aus.
Wählen Sie die folgenden Berechtigungen aus:
- OpenId-Berechtigungen>email, offline_access, openid, profile.
- Benutzer>User.Read, User.ReadBasic.All
Wählen Sie Berechtigungen hinzufügen aus.
Hinzufügen des Anwendungs-ID-URI
Wählen Sie im linken Bereich unter Verwalten die Option API verfügbar machen aus.
Wählen Sie neben Anwendungs-ID-URIdie Option Hinzufügen aus.
Aktualisieren Sie den Anwendungs-ID-URI im
api://your-devtunnel-domain/botid-{AppID}Format oderapi://your-ngrok-domain/botid-{AppID}, und wählen Sie Speichern aus.
Die folgende Abbildung zeigt den Domänennamen:
Hinzufügen eines Bereichs
Wählen Sie im linken Bereich unter Verwalten die Option API verfügbar machen aus.
Wählen Sie + Bereich hinzufügen aus.
Geben Sie access_as_user als Bereichsnamen ein.
Wählen Sie unter Wer kann zustimmen?die Option Administratoren und Benutzer aus.
Aktualisieren Sie die Werte für die restlichen Felder wie folgt:
Geben Sie Teams kann als Anzeigename der Administratoreinwilligungauf das Profil des Benutzers zugreifen ein.
Geben Sie Erlaubt Teams das Aufrufen der Web-APIs der App als aktuellen Benutzer als Beschreibung der Administratoreinwilligung ein.
Geben Sie Teams kann auf das Benutzerprofil zugreifen und Anforderungen im Namen des Benutzers als Anzeigename für die Benutzereinwilligung stellen ein.
Geben Sie Teams aktivieren ein, um die APIs dieser App mit den gleichen Rechten wie der Benutzer als Beschreibung der Benutzereinwilligung aufzurufen.
Stellen Sie sicher, Zustand auf Aktiviert festgelegt ist.
Klicken Sie auf Bereich hinzufügen.
Die folgende Abbildung zeigt die Felder und die Werte:
Hinweis
Der Bereichsname muss mit dem Anwendungs-ID-URI übereinstimmen, der
/access_as_useram Ende angefügt ist.
Hinzufügen einer Clientanwendung
Wählen Sie im linken Bereich unter Verwalten die Option API verfügbar machen aus.
Identifizieren Sie unter Autorisierte Clientanwendungen die Anwendungen, die Sie für die Webanwendung Ihrer App autorisieren möchten.
Wählen Sie + Clientanwendung hinzufügen aus.
Fügen Sie Teams mobile oder Desktop- und Teams-Webanwendung hinzu.
Für Teams Mobile oder Desktop: Geben Sie die Client-ID als ein
1fec8e78-bce4-4aaf-ab1b-5451cc387264.
Für Teams-Web: Geben Sie die Client-ID als ein
5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Aktivieren Sie das Kontrollkästchen Autorisierte Bereiche .
Wählen Sie Anwendung hinzufügen aus.
Die folgende Abbildung zeigt die Client-ID:
Erstellen Ihres Bots
Erstellen einer Azure-Botressource
Hinweis
Wenn Sie Ihren Bot bereits in Teams testen, melden Sie sich von dieser App und Von Teams ab. Melden Sie sich erneut an, um diese Änderung anzuzeigen.
Wechseln Sie zu Startseite.
Wählen Sie + Ressource erstellen aus.
Geben Sie in das Suchfeld Azure Bot ein.
Drücken Sie die EINGABETASTE.
Wählen Sie Azure Bot aus.
Wählen Sie Erstellen aus.
Geben Sie den Botnamen im Bothandle ein.
Wählen Sie Ihr Abonnement aus der Dropdownliste aus.
Wählen Sie Ihre Ressourcengruppe aus der Dropdownliste aus.
Wenn Sie nicht über eine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Führen Sie die folgenden Schritte aus, um eine neue Ressourcengruppe zu erstellen:
- Wählen Sie Neu erstellen aus.
- Geben Sie den Ressourcennamen ein, und wählen Sie OK aus.
- Wählen Sie in der Dropdownliste Neuer Ressourcengruppenstandort einen Standort aus.
Wählen Sie unter Preise die Option Plan ändern aus.
Wählen Sie FO Free>Select aus.
Wählen Sie unter Microsoft App-IDdie Option App-Typ als mehrinstanzenfähig aus.
Wählen Sie unter Erstellungstyp die Option Vorhandene App-Registrierung verwenden aus.
Geben Sie die App-ID ein.
Hinweis
Sie können nicht mehr als einen Bot mit derselben Microsoft-App-ID erstellen.
Wählen Sie Überprüfen + erstellen aus.
Nachdem die Überprüfung erfolgreich war, wählen Sie Erstellen aus.
Die Bereitstellung des Bots dauert einige Minuten.
Wählen Sie Zu Ressource wechseln aus.
Sie haben Ihren Azure-Bot erfolgreich erstellt.
Hinzufügen eines Teams-Kanals
Wählen Sie im linken Bereich Kanäle aus.
Wählen Sie unter Verfügbare Kanäledie Option Microsoft Teams aus.
Aktivieren Sie das Kontrollkästchen, um die Nutzungsbedingungen zu akzeptieren.
Wählen Sie Zustimmen aus.
Wählen Sie Anwenden aus.
So fügen Sie einen Messagingendpunkt hinzu
Verwenden Sie die Dev Tunnel-URL in der Ausgabekonsole als Messagingendpunkt.
Wählen Sie im linken Bereich unter Einstellungen die Option Konfiguration aus.
Aktualisieren Sie den Messagingendpunkt im Format
https://your-devtunnel-domain/api/messages.
Wählen Sie Anwenden aus.
Sie haben erfolgreich einen Bot im Azure Bot-Dienst eingerichtet.
Hinweis
Wenn der Application Insights-Instrumentierungsschlüssel einen Fehler anzeigt, aktualisieren Sie mit der App-ID.
Einrichten von App-Einstellungen, Manifest- und Env-Dateien
Nachdem Sie die Microsoft Entra-App konfiguriert haben, müssen Sie App-Details in den App-Einstellungen, dem Manifest und der Env-Datei konfigurieren.
So konfigurieren Sie App-Einstellungen
Wechseln Sie zur appsettings.json-Datei im geklonten Repository.
Öffnen Sie die appsettings.json-Datei , und aktualisieren Sie die folgenden Informationen:
- Legen Sie auf die Microsoft-App-ID Ihrer App fest
"ClientId". - Legen Sie
"ClientSecret"auf den geheimen Clientwert Ihrer App fest. - Legen Sie auf den Anwendungs-ID-URI Ihrer App fest
"Audience".
- Legen Sie auf die Microsoft-App-ID Ihrer App fest
So konfigurieren Sie die App-Manifestdatei
Wechseln Sie zur manifest.json-Datei im geklonten Repository.
Öffnen Sie die manifest.json-Datei , und aktualisieren Sie die folgenden Informationen.
- Legen Sie auf Microsoft-App-ID fest
"ID". - Ersetzen Sie alle Vorkommen von
"deployment-url"durch Ihren vollqualifizierten ngrok- oder devtunnel-Domänennamen. - Ersetzen Sie alle Vorkommen von
"aad-id"durch die Microsoft App-ID Ihrer App.
- Legen Sie auf Microsoft-App-ID fest
So konfigurieren Sie die Env-Datei
Wechseln Sie zur ENV-Datei im geklonten Repository.
Öffnen Sie die ENV-Datei , und aktualisieren Sie die folgenden Informationen.
- Legen Sie auf die Microsoft-App-ID Ihrer App fest
REACT_APP_AAD_CLIENT_ID. - Legen Sie auf die Microsoft-App-ID Ihrer App fest
REACT_APP_MSA_ONLY_CLIENT. - Legen Sie
REACT_APP_MSA_ONLY_SCOPEauf den geheimen Clientschlüssel Ihrer App Wert fest.
- Legen Sie auf die Microsoft-App-ID Ihrer App fest
Erstellen und Ausführen des Diensts
Zum Erstellen und Ausführen des Diensts mithilfe von Visual Studio.
Öffnen Sie Visual Studio.
Wechseln Sie zu Datei>Projekt>/Projektmappe öffnen....
Öffnen Sie die MeetingSigning.sln-Datei in Visual Studio.
Press F5 to run the project.
Wählen Sie Ja aus, wenn das folgende Dialogfenster angezeigt wird:
Die folgende Webseite wird geöffnet.
Hinzufügen der Besprechungssignatur-App zu Teams
Navigieren Sie in Ihrem geklonten Repository zu Quelle > MeetingSigning.Web > AppManifest.
Erstellen Sie eine .zip-Datei mit den folgenden Dateien, die im Ordner AppManifest vorhanden sind:
- manifest.json
- outlineIcon.png
- colorIcon.png
Erstellen Sie eine Besprechung in Teams mit einigen Referenten und Teilnehmern.
Nehmen Sie an der Besprechung teil.
Nachdem die Besprechung gestartet wurde, wählen Sie Apps aus.
Wählen Sie im Popupfenster Apps verwalten aus.
Wählen Sie App hochladen aus.
Wählen Sie die .zip Datei aus, die Sie im Ordner AppManifest erstellt haben, und wählen Sie Öffnen aus.
Klicken Sie auf Hinzufügen.
Jetzt wird der Besprechung die App für die Besprechungssignatur hinzugefügt.
Wechseln Sie zurück zur Seite mit den Besprechungsdetails, und wählen Sie Apps>Meeting Signing App aus.
Klicken Sie auf Speichern.
Die App "Besprechungssignatur" wird im Besprechungsfenster angezeigt.
Wechseln Sie zum Besprechungschat in Teams, wählen Sie die Registerkarte Besprechungssignatur aus, und wählen Sie dann Dokumente erstellen aus.
Geben Sie im Fenster Besprechungssignatur die folgenden Details ein.
- Wählen Sie die erforderlichen Dokumente aus, die Sie überprüfen möchten.
- Geben Sie Die Viewer der Dokumente ein.
- Geben Sie Die Unterzeichner der Dokumente ein.
- Wählen Sie Fertig aus.
Wählen Sie Zustimmung aus, um der App die Berechtigung für den Zugriff auf Daten aus Ihrem Konto zu erteilen.
Melden Sie sich mit Ihren Anmeldeinformationen bei Teams an, und wählen Sie Anmelden aus.
In Teams erhalten Sie eine Benachrichtigung über die erfolgreiche Erstellung des Dokuments.
Wechseln Sie zurück zur Teams-Besprechung, und jetzt können Sie die Dokumente im Seitenbereich anzeigen.
Wählen Sie Für Besprechung freigeben aus, um das Dokument in einer Besprechung freizugeben.
Die folgende Abbildung zeigt das in der Besprechung freigegebene Dokument.
Abschließen der Herausforderung
Haben Sie sich so etwas einfallen lassen?
Herzlichen Glückwunsch!
Herzlichen Glückwunsch! Sie haben das Tutorial zum Erstellen der Signierungs-App in Besprechungen abgeschlossen.
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.