Flux d’authentification Microsoft teams pour les ongletsMicrosoft Teams authentication flow for tabs

Notes

Pour que l’authentification fonctionne pour votre onglet sur les clients mobiles, vous devez vous assurer que vous utilisez au moins la version 1.4.1 du kit de développement logiciel (SDK) JavaScript Teams.For authentication to work for your tab on mobile clients, you need to ensure you're using at least the 1.4.1 version of the Teams JavaScript SDK.

OAuth 2,0 est une norme ouverte pour l’authentification et l’autorisation utilisées par Azure AD et de nombreux autres fournisseurs d’identité.OAuth 2.0 is an open standard for authentication and authorization used by Azure AD and many other identity providers. Une compréhension de base de OAuth 2,0 est une condition préalable à l’utilisation de l’authentification dans teams ; Voici une bonne présentation qui est plus facile à suivre que les spécifications formelles.A basic understanding of OAuth 2.0 is a prerequisite for working with authentication in Teams; here's a good overview that's easier to follow than the formal specification. Le flux d’authentification pour les onglets et les robots est un peu différent, car les onglets sont très similaires aux sites Web afin qu’ils puissent utiliser OAuth 2,0 directement ; les robots ne sont pas et doivent effectuer quelques opérations différemment, mais les concepts de base sont identiques.Authentication flow for tabs and bots are a little different because tabs are very similar to websites so they can use OAuth 2.0 directly; bots are not and must do a few things differently, but the core concepts are identical.

pour obtenir un exemple illustrant le flux d’authentification des onglets et des bots à l’aide du nœud utilisant le type d’autorisation implicite OAuth 2,0.for an example that demonstrates authentication flow for tabs and bots using Node using the OAuth 2.0 implicit grant type.

Diagramme de séquence d’authentification d’onglet

  1. L’utilisateur interagit avec le contenu de la page de configuration ou de contenu de l’onglet, généralement un bouton intitulé « se connecter » ou « se connecter ».The user interacts with the content on the tab configuration or content page, commonly a button labeled "Sign in" or "Log in".
  2. L’onglet construit l’URL pour sa page de démarrage d’authentification, en utilisant éventuellement les informations des espaces réservés d’URL microsoftTeams.getContext() ou en appelant teams Client SDK Method afin de rationaliser l’expérience d’authentification pour l’utilisateur.The tab constructs the URL for its auth start page, optionally using information from URL placeholders or by calling microsoftTeams.getContext() Teams client SDK method to streamline the authentication experience for the user. Par exemple, lors de l’authentification auprès d’Azure AD login_hint , si le paramètre est défini sur l’adresse e-mail de l’utilisateur, il est possible que l’utilisateur ne doive pas se connecter si cela a été fait récemment, car Azure ad utilise les informations d’identification mises en cache de l’utilisateur si cela est possible : le menu contextuel clignote brièvement, puis disparaît.For example, when authenticating with Azure AD, if the login_hint parameter is set to the user's email address, the user may not even have to sign in if they have done so recently, because Azure AD will use the user's cached credentials if possible: the popup will flash briefly and then disappear.
  3. L’onglet appelle ensuite la microsoftTeams.authentication.authenticate() méthode et enregistre les successCallback fonctions et failureCallback .The tab then calls the microsoftTeams.authentication.authenticate() method and registers the successCallback and failureCallback functions.
  4. Teams ouvre la page de démarrage dans un IFRAME dans une fenêtre contextuelle.Teams opens the start page in an iframe in a pop-up window. La page de démarrage génère state des données aléatoires, les enregistre pour une validation ultérieure et les redirige vers le /authorize point de terminaison https://login.microsoftonline.com/<tenant ID>/oauth2/authorize du fournisseur d’identité, par exemple pour Azure ad.The start page generates random state data, saves it for future validation, and redirects to the identity provider's /authorize endpoint such as https://login.microsoftonline.com/<tenant ID>/oauth2/authorize for Azure AD. Remplacez <tenant id> par votre propre ID de client (Context. TID).Replace <tenant id> with your own tenant id (context.tid).
    • Comme les autres flux d’authentification d’application dans Teams, la page de démarrage doit se trouver sur validDomains un domaine de sa liste et sur le même domaine que la page de redirection post-connexion.Like other application auth flows in Teams, the start page must be on a domain that's in its validDomains list, and on the same domain as the post-login redirect page.
    • Important: les appels de flux d’octroi implicite OAuth state 2,0 pour un paramètre dans la demande d’authentification qui contient des données de session uniques pour empêcher une attaque de contrefaçon de demande intersite.IMPORTANT: The OAuth 2.0 implicit grant flow calls for a state parameter in the authentication request which contains unique session data to prevent a cross-site request forgery attack. Les exemples ci-dessous utilisent un GUID généré de manière aléatoire state pour les données.The examples below use a randomly-generated GUID for the state data.
  5. Sur le site du fournisseur, l’utilisateur se connecte et autorise l’accès à l’onglet.On the provider's site, the user signs in and grants access to the tab.
  6. Le fournisseur dirige l’utilisateur vers la page de redirection OAuth 2,0 de l’onglet avec un jeton d’accès.The provider takes the user to the tab's OAuth 2.0 redirect page with an access token.
  7. L’onglet vérifie que la valeur state renvoyée correspond à ce qui a été enregistré microsoftTeams.authentication.notifySuccess()précédemment, et appelle, qui successCallback appelle à son tour la fonction inscrite à l’étape 3.The tab checks that the returned state value matches what was saved earlier, and calls microsoftTeams.authentication.notifySuccess(), which in turn calls the successCallback function registered in step 3.
  8. Teams ferme la fenêtre contextuelle.Teams closes the pop-up window.
  9. L’onglet affiche l’interface utilisateur de configuration ou actualise ou recharge le contenu des onglets, selon l’emplacement à partir duquel l’utilisateur a démarré.The tab either displays configuration UI or refreshes or reloads the tabs content, depending on where the user started from.

Considérer le contexte de l’onglet comme des conseilsTreat tab context as hints

Bien que le contexte d’onglet fournit des informations utiles sur l’utilisateur, n’utilisez pas ces informations pour authentifier l’utilisateur, que vous l’obteniez comme paramètres d’URL de microsoftTeams.getContext() votre URL de contenu de tabulation ou en appelant la fonction dans le kit de développement logiciel (SDK) du client Microsoft Teams.Although the tab context provides useful information regarding the user, don't use this information to authenticate the user whether you get it as URL parameters to your tab content URL or by calling the microsoftTeams.getContext() function in the Microsoft Teams client SDK. Un acteur malveillant peut appeler votre URL de contenu de tabulation avec ses propres paramètres, et une page Web qui emprunte l’identité de Microsoft teams pourrait charger votre URL de contenu d’onglet dans getContext() un IFRAME et renvoyer ses propres données à la fonction.A malicious actor could invoke your tab content URL with its own parameters, and a web page impersonating Microsoft Teams could load your tab content URL in an iframe and return its own data to the getContext() function. Vous devez traiter les informations relatives à l’identité dans le contexte de l’onglet simplement comme des conseils et les valider avant de les utiliser.You should treat the identity-related information in the tab context simply as hints and validate them before use.

ExemplesSamples

Pour obtenir un exemple de code illustrant le processus d’authentification par onglet, voir :For sample code showing the tab authentication process see:

Plus de détailsMore details

Pour obtenir une description détaillée de l’implémentation de l’authentification d’onglet pour Azure Active Directory, voir :For a detailed implementation walkthrough for tab authentication targeting Azure Active Directory see: