Freigeben über

Verwenden externer OAuth-Anbieter

  • Artikel

Hinweis

Dieses Thema enthält Version 2.0.x der Microsoft Teams JavaScript-Clientbibliothek (TeamsJS). Wenn Sie eine frühere Version verwenden, finden Sie in der Übersicht über die TeamsJS-Bibliothek Anleitungen zu den Unterschieden zwischen den neuesten Versionen von TeamsJS und früheren Versionen.

Sie können externe OAuth-Anbieter oder Drittanbieter wie Google, GitHub, LinkedIn und Facebook mithilfe der aktualisierten authenticate() API unterstützen:

function authenticate(authenticateParameters: AuthenticatePopUpParameters): Promise<string>

Fügen Sie der API die authenticate() folgenden Werte hinzu, um externe OAuth-Anbieter zu unterstützen:

  • isExternal Parameter
  • Drei Platzhalterwerte im vorhandenen url Parameter

Die folgende Tabelle enthält eine Liste der authenticate() API-Parameter (AuthenticatePopUpParameters) und -Funktionen sowie deren Beschreibungen:

Parameter Beschreibung
isExternal Der Parametertyp ist Boolean, was angibt, dass das Authentifizierungsfenster in einem externen Browser geöffnet wird.
height Die bevorzugte Höhe für das Pop-up. Der Wert kann ignoriert werden, wenn er außerhalb der akzeptablen Grenzen liegt.
url
Die URL des Drittanbieter-App-Servers für das Authentifizierungs-Popup mit den folgenden drei Parameterplatzhaltern:

- oauthRedirectMethod: Übergeben des Platzhalters in {}. Die Teams-Plattform ersetzt diesen Platzhalter durch einen Deep-Link oder eine Webseite, die den App-Server aktualisiert, wenn der Anruf von einer mobilen Plattform stammt.

- authId: UUID (Universal Unique identifer) ersetzt diesen Platzhalter. Der App-Server verwendet es, um die Sitzung zu verwalten.

- hostRedirectUrl: Pass-Platzhalter in {}. Die aktuelle Plattform und der Client ersetzen diesen Platzhalter durch eine Umleitungs-URL, die den Benutzer nach Abschluss der Authentifizierung an den richtigen Client umleitet.
width Die bevorzugte Breite für das Pop-up. Der Wert kann ignoriert werden, wenn er außerhalb der akzeptablen Grenzen liegt.

Hinweis

Der authID Parameter ist für die Dauer der Authentifizierungssitzung gültig, die ein Standardtimeout von 120 Sekunden aufweist.

Weitere Informationen zu Parametern finden Sie unter Authenticate (AuthenticatePopUpParameters) -Funktion.

Authentifizierung zu externen Browsern hinzufügen

Das folgende Bild zeigt den Ablauf zum Hinzufügen der Authentifizierung zu externen Browsern:

authenticate-OAuth

So fügen Sie die Authentifizierung zu externen Browsern hinzu

  1. Initiieren Sie den externen Authentifizierungs- und Anmeldeprozess. Die Drittanbieter-App ruft die TeamsJS-Funktion authentication.authenticate auf, die isExternal auf true festgelegt ist, um den externen Authentifizierungs-Anmeldeprozess zu initiieren.

    Das übergebene url enthält Platzhalter für {authId}, {oauthRedirectMethod}und {hostRedirectUrl}.

       authentication.authenticate({
      url: `${window.location.origin}/auth-start?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}&hostRedirectUrl={hostRedirectUrl}&googleId=${googleId}`,
      isExternal: true
    }).then((result) => {
      this.getGoogleServerSideToken(result);
    }).catch((reason) => {
      console.log("failed" + reason);
      reject(reason);
    })

  2. Die Teams-Clients öffnen die URL in einem externen Browser, nachdem die Platzhalter für oauthRedirectMethod, authIdund hostRedirectUrl automatisch durch geeignete Werte ersetzt wurden.

    Beispiel

     https://3p.app.server/auth?oauthRedirectMethod=deeplink&authId=1234567890&hostRedirectUrl=msteams://teams.microsoft.com/l/auth-callback?authId=1234567890&result={result}

  3. Der App-Server des Drittanbieters antwortet. Der Drittanbieter-App-Server empfängt und speichert mit url den folgenden drei Abfrageparametern:

    Parameter Beschreibung
    oauthRedirectMethod Gibt an, wie die Drittanbieter-App die Antwort der Authentifizierungsanforderung mit einem der beiden Werte zurück an den Client senden muss: Deep Link oder Page.
    authId Die Anforderungs-ID, die Teams für diese spezifische Authentifizierungsanforderung erstellt, die über einen Deep Link an den Client zurückgesendet werden muss.
    hostRedirectUrl Der Deep-Link enthält das URL-Schema des initiierenden Clients, der nach der Authentifizierung umgeleitet werden soll.

    Tipp

    Die App kann , oauthRedirectMethodund hostRedirectUrl im OAuth-Abfrageparameter state marshallenauthId, während die Anmelde-URL für OAuthProvider generiert wird. enthält state die übergebenen authId, oauthRedirectMethodund hostRedirectUrl, wenn OAuthProvider an den Server umleitet und die App die Werte verwendet, um die Authentifizierungsantwort zurück an den initiierenden Client zu senden, wie in Schritt 6 beschrieben.

  4. Der App-Server des Drittanbieters leitet an den angegebenen urlum. Der App-Server des Drittanbieters leitet im externen Browser zur Authentifizierungsseite des OAuth-Anbieters um. ist redirect_uri eine dedizierte Route auf dem App-Server. Sie können redirect_uri in der Entwicklungskonsole des OAuth-Anbieters als statisch registrieren, die Parameter müssen über das Zustandsobjekt gesendet werden.

    Beispiel

    https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https://3p.app.server/authredirect&state={"authId":"…","oauthRedirectMethod":"…","hostRedirectUrl":"_"}&client_id=…    &response_type=code&access_type=offline&scope= …

  5. Melden Sie sich beim externen Browser an. Die OAuth-Anbieter leiten mit dem Authentifizierungscode redirect_uri und dem Zustandsobjekt zurück an die um.

  6. Der App-Server eines Drittanbieters verarbeitet die Antwort und überprüft oauthRedirectMethod, die vom externen OAuth-Anbieter im Zustandsobjekt zurückgegeben wird, um zu bestimmen, ob die Antwort über den Deep-Link für den Authentifizierungsrückruf oder über eine Webseite zurückgegeben werden muss, die aufruft notifySuccess().

    if (state.oauthRedirectMethod === 'deeplink') {
   const clientRedirectUrl: string = state.hostRedirectUrl.replace('{result}', req.query.code)
   return res.redirect(clientRedirectUrl)
}
else {
// continue redirecting to a web-page that will call notifySuccess() – usually this method is used in Teams-Web
…

    Im mobilen Teams-Client führt die änderung hostRedirectUrl beispielsweise zu folgendem Ergebnis:

    return res.redirect(`msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&result=${req.query.code}`)

    Der bereitgestellte Wert von hostRedirectUrl hängt vom Client ab, der den externen Authentifizierungsflow initiiert.

  7. Teams ruft den Erfolgsrückruf auf und sendet das Ergebnis (Authentifizierungscode) an die Drittanbieter-App. Die App empfängt den Code im Erfolgsrückruf und verwendet den Code, um das Token und dann die Benutzerinformationen abzurufen und die Benutzeroberfläche zu aktualisieren.

    successCallback: function (result) { 
… 
}

Siehe auch