Exporter (0) Imprimer
Développer tout

Instructions pour la personnalisation des applications intégrées

Mis à jour: octobre 2014

Cette rubrique contient les instructions à suivre pour la personnalisation lorsque vous développez des applications intégrées avec Azure Active Directory. Ces instructions vous aideront à orienter les clients qui souhaitent utiliser leur compte professionnel ou scolaire, géré dans Azure AD, pour s'inscrire et se connecter à votre application.

Microsoft gère deux plateformes d'identité :

  • Les comptes Microsoft (anciennement Windows Live ID) représentent la relation entre individual users et Microsoft, et sont utilisés pour accéder aux appareils et aux services Microsoft. Ils sont destinés à un usage personnel.

  • Azure Active Directory est un service de gestion des identités (IdMaaS) dans lequel les organisations peuvent gérer les comptes d'utilisateur de leurs employés, étudiants ou des autres parties prenantes.

Les comptes Azure AD sont normalement attribués aux utilisateurs finaux (employés, étudiants, employés fédéraux) par leurs organisations (entreprise, établissement scolaire, organisme gouvernemental), mais dans certains cas, ils peuvent être créés directement par les utilisateurs. Ces comptes peuvent être créés directement dans Azure AD ou être synchronisés à partir d'un annuaire local tel que Windows Server Active Directory. Microsoft est le gardien (custodian) des comptes d'utilisateur hébergés sur Azure AD, mais les comptes sont détenus et contrôlés par l'organisation.

Les employés et les étudiants ne réalisent pas forcément que leur compte professionnel est géré sur une plateforme Microsoft. Aussi, nous n'exposons pas les utilisateurs finaux au nom de marque Active Directory et vous devez vous aussi éviter de le faire. Nous permettons en revanche que le nom de l'organisation apparaisse dans l'expérience utilisateur, par exemple, avec l'affichage d'un dossier « Contoso » dans OneDrive. Nous autorisons également les organisations à personnaliser les pages de connexion Azure AD avec le logo de leur entreprise. Nous vous encourageons à faire de même.

Dans les situations où vous ne connaissez pas encore l'organisation de l'utilisateur parce qu'il accède à un point de terminaison indépendant du locataire tel que https://www.adatum.com, par opposition à https://www.adatum.com/contoso.com, vous devez faire référence aux comptes Azure AD avec l'intitulé « comptes professionnels ou scolaires ou « comptes professionnels » si l'espace est limité.

N'utilisez pas des termes comme « compte d'entreprise » ou « compte de société », qui pourraient induire l'utilisateur en confusion.

En conclusion :

  1. Si vous ne savez rien de l'utilisateur, utilisez le terme générique « compte professionnel ou scolaire ». Par exemple, votre écran d'accueil peut contenir un bouton pour « s'inscrire avec votre compte professionnel ou scolaire ».

  2. Dès que vous savez qui est l'utilisateur, utilisez le nom de l'organisation plutôt que des termes génériques comme « votre organisation » ou « professionnel ou scolaire ».

Pictogramme de Microsoft Azure AD

Ce pictogramme représente des comptes professionnels ou scolaires pris en charge par Azure AD. Nous nous en servons beaucoup dans les applications et les sites web Microsoft tels qu'Office 365, et les utilisateurs finaux l'associent à leur compte.

Il permet de s'assurer que les utilisateurs visitant votre application comprennent qu'ils peuvent réutiliser le compte dont ils se servent pour Office 365 ou d'autres services professionnels Microsoft.

Votre application peut présenter des chemins d'accès distincts pour l'inscription et la connexion. Les sections suivantes proposent une aide visuelle pour les deux scénarios.

Les organisations ont normalement besoin de s'inscrire ou d'acquérir une licence pour votre application avant que leurs utilisateurs finaux ne puissent s'en servir. Vous pouvez tirer parti d'Azure AD pour simplifier la procédure d'inscription pour vos clients qui utilisent déjà Azure AD, ainsi que la procédure de connexion pour les utilisateurs finaux :

  • Invitez les administrateurs à s'inscrire (sign up) pour acheter votre application ou acquérir la version d'évaluation avec leur compte professionnel ou scolaire. Ils sont alors guidés à travers une procédure d'octroi d'autorisations d'accès pour permettre aux utilisateurs de leur organisation de se connecter à votre application.

  • Invitez les utilisateurs finaux à se connecter (sign-in) à votre application avec leur compte professionnel ou scolaire, une fois leur administrateur inscrit.

Lorsque vous vous adressez à des administrateurs, vous devez utiliser la dénomination « compte professionnel ou scolaire », mais il est bon également de préciser que leur organisation doit être gérée sur ou connectée à Azure AD.

Tout bouton ou lien d'inscription doit rediriger l'utilisateur vers la page des autorisations d'accès Azure AD pour permettre à l'administrateur d'une organisation d'autoriser votre application à accéder à son annuaire. La procédure à suivre pour cette demande d'accès est décrite en détail dans la rubrique Ajout, mise à jour et suppression d'une application.

Bouton seul

Si vous utilisez des boutons de connexion, nous vous recommandons d'utiliser l'un des exemples ci-dessous. Dans le cas le plus générique, votre bouton de connexion doit être intitulé « Connectez-vous avec votre compte professionnel » ou simplement « compte professionnel ». Notez que ces termes ne sont pas des noms propres et qu'ils peuvent donc être localisés.

Si vous voulez faire valoir que votre application se connectera aux ressources de l'organisation de l'utilisateur ou qu'elle sera ajoutée à un programme de lancement, vous pouvez utiliser des termes comme « Connectez-vous à votre entreprise » ou « Ajoutez-le à votre entreprise ». Les extraits de code HTML suivants doivent être utilisés pour générer des boutons basés sur la feuille de style en cascade (CSS) et les glyphes référencés qui conviennent le mieux pour votre application. Les boutons générés par ces extraits de code sont également illustrés ci-après :

<html>
<head>
   <title>Azure AD buttons</title>
   <link rel="stylesheet" href="https://bposast.vo.msecnd.net/AzureAD/glyph/index.css" />
</head>
<body>

<a class="azuread azuread-large">
   <div class="azuread-glyph"><img src="https://bposast.vo.msecnd.net/AzureAD/glyph/glyphs.png" width="58" height="110" alt="Glyphs" /></div>
   <div class="azuread-content">
      <div class="azuread-content-heading">Connect to your company
         <div>No separate login required for your users<br />Free for 30 days</div>
      </div>
   </div>
</a>

<br /><br />

<a class="azuread azuread-medium">
   <div class="azuread-glyph"><img src="https://bposast.vo.msecnd.net/AzureAD/glyph/glyphs.png" width="58" height="110" alt="Glyphs" /></div>
   <div class="azuread-content">
      <div class="azuread-content-heading">Add it for your school
         <div>No separate login required for your users</div>
      </div>
   </div>
</a>

<br /><br />

<a class="azuread azuread-small">
   <div class="azuread-glyph"><img src="https://bposast.vo.msecnd.net/AzureAD/glyph/glyphs.png" width="58" height="110" alt="Glyphs" /></div>
   <div class="azuread-content">
      <div class="azuread-content-heading">Connect to your work</div>
   </div>
</a>

</body>
</html>

Aide visuelle pour le bouton d'inscription

Bouton et texte d'aide

Si vous utilisez des boutons et un texte explicatif côte à côte, nous vous recommandons de procéder comme suit :

Bouton d'inscription à Microsoft Azure AD

Texte seul

Si vous voulez fournir une explication plus détaillée à vos clients potentiels, nous vous recommandons d'adapter le texte suivant :

If you already use Office 365, Azure, or other Microsoft service for organizations, you can simply grant <your_app_name> access to your organization’s directory. This will allow your users to access <your_app_name> with their existing user accounts.

Tout bouton de connexion doit rediriger l'utilisateur vers l'un des points de terminaison d'authentification Azure AD (pour SAML-P ou WS-Federation, selon le protocole utilisé par votre application) pour permettre aux utilisateurs d'une organisation de se connecter à votre application avec leur compte professionnel ou scolaire. Les sections suivantes fournissent des informations détaillées sur l'aspect que doit avoir ce bouton.

Pictogramme et « compte professionnel ou scolaire »

C'est l'association du pictogramme avec le logo de la marque et du langage générique « professionnel ou scolaire » qui représente de manière unique Azure AD parmi les autres fournisseurs d'identité que votre application peut prendre en charge. Si vous n'avez pas suffisamment d'espace dans votre application pour « compte professionnel ou scolaire », vous pouvez raccourcir l'intitulé en « compte professionnel ».

Voici quelques exemples de boutons de connexion. Les extraits de code HTML suivants doivent être utilisés pour générer un bouton basé sur la feuille de style en cascade (CSS) et le glyphe référencés.

<html>
<head>
       <title>Azure AD Badges</title>
       <link rel="stylesheet" href="https://bposast.vo.msecnd.net/AzureAD/glyph/index.css" />
</head>
<body>

<a class="azuread azuread-small">
       <div class="azuread-glyph"><img src="https://bposast.vo.msecnd.net/AzureAD/glyph/glyphs.png" width="58" height="110" alt="Glyphs" /></div>
       <div class="azuread-content">
              <div class="azuread-content-heading">Work or school account</div>
       </div>
</a>

<br /><br />
<a class="azuread azuread-small">
       <div class="azuread-glyph"><img src="https://bposast.vo.msecnd.net/AzureAD/glyph/glyphs.png" width="58" height="110" alt="Glyphs" /></div>
       <div class="azuread-content">
              <div class="azuread-content-heading">Work account</div>
       </div>
</a>

</body>
</html>

Aide du bouton de connexion à Microsoft Azure AD

Vous pouvez même fournir une explication supplémentaire aux utilisateurs finaux pour les aider à déterminer s'ils peuvent utiliser ce bouton :

Aide du bouton de connexion à Microsoft Azure AD

Vous pouvez également utiliser le HTML pour effectuer le rendu d'un bouton sans texte (c'est-à-dire un simple pictogramme) :

<html>
<head>
   <title>Azure AD Badges</title>
   <link rel="stylesheet" href="https://bposast.vo.msecnd.net/AzureAD/glyph/index.css" />
</head>
<body>

<a class="azuread azuread-small">
   <div class="azuread-glyph"><img src="https://bposast.vo.msecnd.net/AzureAD/glyph/glyphs.png" width="58" height="110" alt="Sign in with your work or school account" /></div>
</a>

</body>
</html>

Options de connexion

Si votre application utilise des URL propres à un locataire (par exemple, https://www.adatum.com/contoso.com ou https://contoso.adatum.com), elle peut sans difficulté les mapper à l'URL de connexion Azure AD propre à un locataire dont vous devez vous servir pour connecter les utilisateurs à partir de ce locataire. Vous pouvez voir le format des URL de connexion propres à un locataire dans le portail de gestion Azure en cliquant sur Afficher les points de terminaison dans la barre de commandes.

Si votre application n'utilise pas d'URL propres à un locataire (par exemple, https://www.adatum.com), Azure AD fournit un ensemble de points de terminaison indépendants du locataire vers lequel le bouton de connexion de l'application peut rediriger l'utilisateur sans avoir à effectuer une découverte de domaine (en demandant à l'utilisateur des informations supplémentaires qui vous permettraient de vérifier le locataire de l'utilisateur).

 

SAML-P

https://login.windows.net/common/saml2

WS-Federation

https://login.windows.net/common/wsfed

Métadonnées de la fédération

https://login.windows.net/common/FederationMetadata/2007-06/FederationMetadata.xml

UTILISEZ « compte professionnel ou scolaire » en combinaison avec le pictogramme utilisateur Active Directory pour représenter les connexions avec Azure AD. Si l'espace est limité, le terme « compte professionnel » convient, mais N'UTILISEZ PAS d'autres termes tels que « compte d'entreprise » ou « compte de société ».

NE MODIFIEZ PAS le pictogramme utilisateur Active Directory. L'utilisation d'un pictogramme de la même forme et de la même couleur facilitera son identification par les utilisateurs parmi toutes les applications dans le cloud qui prennent en charge des comptes Azure AD.

N'EXPOSEZ PAS les utilisateurs finaux à la marque Active Directory. Ce terme peut être employé avec les développeurs, les professionnels de l'informatique et les administrateurs.

N'UTILISEZ PAS les termes « comptes Office 365 », « comptes Azure », « comptes Microsoft pour l'entreprise » ou des variantes similaires. Ces noms n'existent pas et ils seraient une source de confusion pour vos utilisateurs… qui ne réalisent peut-être même pas que leur organisation utilise la plateforme d'identités cloud de Microsoft.

OFFREZ aux utilisateurs un moyen de se déconnecter et de basculer vers un autre compte d'utilisateur. Bien que la plupart des personnes aient un seul compte personnel chez Microsoft/Facebook/Google/Twitter, les utilisateurs sont souvent associés à plusieurs organisations. La connexion simultanée de plusieurs utilisateurs sera prochainement prise en charge.

Si votre application prend en charge à la fois des comptes Azure AD et Microsoft, vous devez inclure deux boutons de connexion distincts dans votre application. Vous ne DEVEZ PAS afficher un seul bouton de connexion pour « Microsoft ».

Afficher:
© 2015 Microsoft