Single Sign-On-Authentifizierung mit Teams Toolkit und Visual Studio Code für Registerkarten

Wichtig

Dieses Dokument bezieht sich auf eine alte Version von Teams Toolkit.

Aktuelle Informationen finden Sie unter den Voraussetzungen, und folgen Sie einem der neueren Lernprogramme.

Mit dem Microsoft Teams Toolkit können Sie die SSO-Authentifizierung (Single Sign-On) für Registerkarten-Apps direkt in Visual Studio Code erstellen. Das Toolkit führt Sie durch den Prozess und bietet alles, was Sie benötigen, einschließlich der Bereitstellung Ihrer Microsoft Identity Platform Registrierung im Azure-Portal.

Erste Schritte – Erstellen eines Projekts

  1. Erstellen Sie ein neues Projekt im Toolkit.
  2. Wählen Sie die Registerkarte als Typ der Erweiterung aus, die Sie erstellen möchten.
  3. Wählen Sie die Option zur Unterstützung von SSO aus.

Tipp

Nach der Installation sollte das Teams Toolkit in der Visual Studio Code Aktivitätsleiste angezeigt werden. Wenn dies nicht der Fall ist, klicken Sie mit der rechten Maustaste in die Aktivitätsleiste, und wählen Sie Microsoft Teams aus, um das Toolkit für einfachen Zugriff zu anheften.

Konfigurieren Ihres Projekts

  1. Um SSO innerhalb Teams zu aktivieren, muss Ihre App über eine Azure-App-Registrierungsressource verfügen. Das Teams Toolkit stellt die App-Registrierung in Ihrem Auftrag bereit.
  2. Geben Sie die URL ein, unter der Ihre App gehostet wird, und wählen Sie als Nächstes aus. Ihre App-Registrierung wird mithilfe der bereitgestellten URL konfiguriert.
  3. Die Konfigurationsdetails der App-Registrierung werden in den .env Dateien im Quellcode Ihres Projekts gespeichert.

Wenn Sie mehr darüber erfahren möchten, wie Ihre Azure-App-Registrierung bereitgestellt wird, lesen Sie unsere SSO-Unterstützung (Single Sign-On) für die Dokumentation zu Registerkarten.

Tipp

Sie müssen zu Azure App-Registrierungen wechseln und Ihren API-URI aktualisieren und URLs umleiten, wenn Sie diese URL ändern.

Ausführen ihres Projekts

  1. Wählen Sie "npm install" aus dem api-server Ordner aus. Dann npm start.
  2. Wählen Sie "npm install" aus dem .src Ordner aus. Dann npm start.
  3. Wenn Sie einen Tunneldienst wie ngrokverwenden, führen Sie ihn aus, und stellen Sie sicher, dass die URL mit dem übereinstimmt, was Sie im Projekterstellungs-Assistenten eingegeben haben. Wenn dies nicht der Fall ist, müssen Sie Ihren API-URI und die Umleitungs-URL in der App-Registrierung aktualisieren, die in Azure erstellt wurde.
  4. Navigieren Sie zur Aktivitätsleiste auf der linken Seite des Visual Studio Code Fensters.
  5. Wählen Sie das Symbol "Ausführen" aus, um die Ansicht "Ausführen" und "Debuggen" anzuzeigen.
  6. Sie können auch die Tastenkombination STRG+UMSCHALT+D verwenden.

Tipp

Möglicherweise wird das Dialogfeld "App-Installation" im Browser nicht angezeigt, wenn Popupfenster für Ihren Browser deaktiviert sind. Aktivieren Sie in diesem Fall Popupfenster, und aktualisieren Sie die Seite.

Siehe auch

Erstellen von Apps mit dem Microsoft Teams Toolkit und Visual Studio Code