Directrices de personalización de marca para aplicacionesBranding guidelines for applications

Cuando desarrolle aplicaciones con la plataforma de identidad de Microsoft, deberá dirigir a los clientes cuando estos quieran usar su cuenta profesional o educativa (administrada en Azure AD), o su cuenta personal, para suscribirse a la aplicación o iniciar sesión en ella.When developing applications with the Microsoft identity platform, you'll need to direct your customers when they want to use their work or school account (managed in Azure AD), or their personal account for sign-up and sign-in to your application.

En este artículo:In this article, you will:

  • Obtendrá información sobre los dos tipos de cuentas de usuario administradas por Microsoft y cómo hacer referencia a las cuentas de Azure AD en su aplicación.Learn about the two kinds of user accounts managed by Microsoft and how to refer to Azure AD accounts in your application
  • Conocerá los requisitos para usar el logotipo de Microsoft en su aplicación.Learn the requirements for using the Microsoft logo in your app
  • Descargue las imágenes de Iniciar sesión o Iniciar sesión con Microsoft oficiales para usarlas en su aplicaciónDownload the official Sign in or Sign in with Microsoft images to use in your app
  • Obtenga información sobre la personalización de marca y qué debe hacer y qué no debe hacer en la navegación.Learn about the branding and navigation do's and don'ts

Cuentas personales frente a cuentas profesionales o educativas de MicrosoftPersonal accounts vs. work or school accounts from Microsoft

Microsoft administra dos tipos de cuentas de usuario:Microsoft manages two kinds of user accounts:

  • Cuentas personales (anteriormente conocidas como Windows Live ID).Personal accounts (formerly known as Windows Live ID). Estas cuentas representan la relación entre los usuarios individuales y Microsoft. Se usan para tener acceso a servicios y dispositivos de consumidor de Microsoft.These accounts represent the relationship between individual users and Microsoft, and are used to access consumer devices and services from Microsoft. Estas cuentas están pensadas para un uso personal.These accounts are intended for personal use.
  • Cuentas profesionales o educativas.Work or school accounts. Estas cuentas las administra Microsoft en nombre de las organizaciones que usan Azure Active Directory.These accounts are managed by Microsoft on behalf of organizations that use Azure Active Directory. Estas cuentas se utilizan para iniciar sesión en Microsoft 365 y otros servicios empresariales de Microsoft.These accounts are used to sign in to Microsoft 365 and other business services from Microsoft.

Las cuentas profesionales o educativas de Microsoft normalmente se asignan las organizaciones (compañías, escuelas, administraciones públicas, etc.).a los usuarios finales (empleados, estudiantes, empleados de las administraciones, etc.).Microsoft work or school accounts are typically assigned to end users (employees, students, federal employees) by their organizations (company, school, government agency). Estas cuentas se controlan directamente en la nube (en la plataforma de Azure AD) o se sincronizan con Azure AD desde un directorio local, como Windows Server Active Directory.These accounts are mastered directly in the cloud (in the Azure AD platform) or synced to Azure AD from an on-premises directory, such as Windows Server Active Directory. Microsoft mantiene la custodia de las cuentas profesionales o educativas, pero son propiedad la organización y es esta quien las controla.Microsoft is the custodian of the work or school accounts, but the accounts are owned and controlled by the organization.

Cómo hacer referencia a las cuentas de Azure AD en la aplicaciónReferring to Azure AD accounts in your application

Microsoft no expone a los usuarios finales a los nombres de marca de Azure ni de Active Directory, y usted tampoco debería hacerlo.Microsoft doesn’t expose end users to the Azure or the Active Directory brand names, and neither should you.

  • Una vez que los usuarios han iniciado sesión, use el nombre y el logotipo de la organización tanto como sea posible.Once users are signed in, use the organization’s name and logo as much as possible. Esto es mejor que usar términos genéricos como "la organización".This is better than using generic terms like “your organization.”
  • Cuando los usuarios no han iniciado sesión, refiérase a sus cuentas como "cuentas profesionales o educativas" y use el logotipo de Microsoft para transmitir que Microsoft administra estas cuentas.When users aren't signed in, refer to their accounts as “Work or school accounts” and use the Microsoft logo to convey that Microsoft manages these accounts. No utilice términos como "cuenta de la empresa", "cuenta empresarial" ni "cuenta corporativa", ya que estos crearían confusión entre los usuarios.Don’t use terms like “enterprise account,” “business account,” or “corporate account,” which create user confusion.

Pictograma de una cuenta de usuarioUser account pictogram

En una versión anterior de estas directrices, se recomendaba usar un pictograma con un "distintivo azul".In an earlier version of these guidelines, we recommended using a “blue badge” pictogram. Según los comentarios de los usuarios y los desarrolladores, ahora se recomienda usar el logotipo de Microsoft en su lugar.Based on user and developer feedback, we now recommend the use of the Microsoft logo instead. El logotipo de Microsoft ayudará a los usuarios a comprender que pueden reutilizar la cuenta que usan con Microsoft 365 u otros servicios empresariales de Microsoft para iniciar sesión en la aplicación.The Microsoft logo will help users understand that they can reuse the account they use with Microsoft 365 or other Microsoft business services to sign into your app.

Inscripción e inicio de sesión con Azure ADSigning up and signing in with Azure AD

La aplicación puede presentar rutas diferentes para la suscripción y el inicio de sesión. En las secciones siguientes, se proporciona una guía visual para ambos escenarios.Your app may present separate paths for sign-up and sign-in and the following sections provide visual guidance for both scenarios.

Si la aplicación admite el registro de usuarios finales (por ejemplo, evaluación gratuita o modelo "freemium") : puede mostrar un botón de inicio de sesión que permita a los usuarios acceder a la aplicación con su cuenta profesional o educativa.If your app supports end-user sign-up (for example, free to trial or freemium model): You can show a sign-in button that allows users to access your app with their work account or their personal account. Azure AD mostrará una petición de consentimiento la primera vez que accedan a la aplicación.Azure AD will show a consent prompt the first time they access your app.

Si su aplicación requiere permisos que solo los administradores pueden otorgar o requiere licencias para organizaciones: separe la adquisición de administrador del inicio de sesión como usuario.If your app requires permissions that only admins can consent to, or if your app requires organizational licensing: Separate admin acquisition from user sign-in. El botón "obtener esta aplicación" redirigirá a los administradores al inicio de sesión. Después, se les pedirá que manifiesten su consentimiento en nombre de los usuarios de su organización, que cuenta con la ventaja añadida de suprimir las peticiones de consentimiento de usuario final en su aplicación.The “get this app” button will redirect admins to sign in then ask them to grant consent on behalf of users in their organization, which has the added benefit of suppressing end-user consent prompts to your app.

Guía visual para la adquisición de la aplicaciónVisual guidance for app acquisition

El vínculo "Obtener la aplicación" debe redirigir al usuario a la página de concesión de acceso (autorización) de Azure AD, para permitir que el administrador de una organización pueda autorizar a su aplicación para que tenga acceso a los datos de la organización que hospeda Microsoft.Your “get the app” link must redirect the user to the Azure AD grant access (authorize) page, to allow an organization’s administrator to authorize your app to have access to their organization’s data, which is hosted by Microsoft. En el artículo Integración de aplicaciones con Azure Active Directory se tratan los detalles sobre cómo solicitar acceso.Details on how to request access are discussed in the Integrating Applications with Azure Active Directory article.

Después de que los administradores den su consentimiento a la aplicación, pueden optar por agregarla a la experiencia del iniciador de aplicaciones de Microsoft 365 de los usuarios (accesible desde el botón tipo "gofre" y desde https://portal.office.com/myapps).After admins consent to your app, they can choose to add it to their users’ Microsoft 365 app launcher experience (accessible from the waffle and from https://portal.office.com/myapps). Si quiere anunciar esta capacidad, puede usar términos como "Agregue esta aplicación a su organización" y mostrar un botón como el del ejemplo siguiente:If you want to advertise this capability, you can use terms like “Add this app to your organization” and show a button like the following example:

Botón que muestra el logotipo de Microsoft y el texto "Agregar a mi organización"

Sin embargo, se recomienda que escriba un texto explicativo en lugar de confiar en los botones.However, we recommend that you write explanatory text instead of relying on buttons. Por ejemplo:For example:

Si ya usa Microsoft 365 u otro servicio de negocio de Microsoft, puede conceder acceso a <nombre_su_aplicación> para acceder a los datos de su organización. De esta forma, los usuarios podrán acceder a <nombre_su_aplicación> con sus cuentas profesionales.If you already use Microsoft 365 or other business service from Microsoft, you can grant <your_app_name> access to your organization’s data. This will allow your users to access <your_app_name> with their existing work accounts.

Para descargar el logotipo oficial de Microsoft para su uso en la aplicación, haga clic con el botón derecho en el que quiera usar y guárdelo en su equipo.To download the official Microsoft logo for use in your app, right-click the one you want to use and then save it to your computer.

RecursoAsset Formato PNGPNG format Formato SVGSVG format
Logotipo de MicrosoftMicrosoft logo Logotipo de Microsoft que se puede descargar en formato PNG Logotipo de Microsoft que se puede descargar en formato SVG

Guía visual para el inicio de sesiónVisual guidance for sign-in

La aplicación debe mostrar un botón de inicio de sesión que redirige a los usuarios al punto de conexión de inicio de sesión que corresponda al protocolo que se utiliza para la integración con Azure AD.Your app should display a sign-in button that redirects users to the sign-in endpoint that corresponds to the protocol you use to integrate with Azure AD. La siguiente sección proporciona detalles sobre el aspecto que debería tener ese botón.The following section provides details on what that button should look like.

Pictograma e Iniciar sesión en MicrosoftPictogram and “Sign in with Microsoft”

Se trata de la asociación del logotipo de Microsoft y el término "Iniciar sesión en Microsoft" que distingue exclusivamente a Azure AD de otros proveedores de identidades que pueden ser compatibles con su aplicación.It’s the association of the Microsoft logo and the “Sign in with Microsoft” terms that uniquely represent Azure AD amongst other identity providers your app may support. Si no tiene suficiente espacio para Iniciar sesión en Microsoft, puede acortarlo a "Iniciar sesión".If you don’t have enough space for “Sign in with Microsoft,” it’s ok to shorten it to “Sign in.” Puede usar una combinación de colores claros u oscuros para los botones.You can use a light or dark color scheme for the buttons.

En el diagrama siguiente se muestran las líneas rojas recomendadas por Microsoft al usar los recursos con la aplicación.The following diagram shows the Microsoft-recommended redlines when using the assets with your app. Las líneas rojas se aplican a "Inicio de sesión en Microsoft" o a la versión más corta "Inicio de sesión".The redlines apply to "Sign in with Microsoft" or the shorter "Sign in" version.

Muestra los comentarios de "Iniciar sesión con Microsoft".

Para descargar las imágenes oficiales para su uso en la aplicación, haga clic con el botón derecho en la que quiera usar y guárdela en su equipo.To download the official images for use in your app, right-click the one you want to use and then save it to your computer.

RecursoAsset Formato PNGPNG format Formato SVGSVG format
Inicio de sesión en Microsoft (tema oscuro)Sign in with Microsoft (dark theme) PNG del tema oscuro del botón "Iniciar sesión con Microsoft" que se puede descargar SVG del tema oscuro del botón "Iniciar sesión con Microsoft" que se puede descargar
Inicio de sesión en Microsoft (tema claro)Sign in with Microsoft (light theme) PNG del tema claro del botón "Iniciar sesión con Microsoft" que se puede descargar SVG del tema claro del botón "Iniciar sesión con Microsoft" que se puede descargar
Inicio de sesión (tema oscuro)Sign in (dark theme) PNG del tema oscuro del botón corto "Iniciar sesión" que se puede descargar SVG del tema oscuro del botón corto "Iniciar sesión" que se puede descargar
Inicio de sesión (tema claro)Sign in (light theme) PNG del tema claro del botón corto "Iniciar sesión" que se puede descargar SVG del tema claro del botón corto "Iniciar sesión" que se puede descargar

Personalización de marca: qué se debe hacer y qué noBranding Do’s and Don’ts

USE la cuenta profesional o educativa en combinación con el botón Iniciar sesión en Microsoft para proporcionar una explicación adicional que ayude a los usuarios finales a saber si pueden utilizarla.DO use “work or school account” in combination with the "Sign in with Microsoft" button to provide additional explanation to help end users recognize whether they can use it. NO USE otros términos como "cuenta empresarial", "cuenta de negocio" o "cuenta corporativa".DON’T use other terms such as “enterprise account”, “business account” or “corporate account.”

NO use el identificador de Microsoft 365 o de Azure.DON’T use “Microsoft 365 ID” or “Azure ID.” Microsoft 365 es también el nombre de un producto para consumidores de Microsoft que no usa Azure AD para la autenticación.Microsoft 365 is also the name of a consumer offering from Microsoft, which doesn’t use Azure AD for authentication.

No: no modifique el logotipo de Microsoft.DON’T alter the Microsoft logo.

NO EXPONGA a los usuarios finales a las marcas Azure o Active Directory.DON’T expose end users to the Azure or Active Directory brands. Sin embargo, es correcto usar estos términos con los desarrolladores, profesionales de TI y administradores.It’s ok however to use these terms with developers, IT pros, and admins.

Sí: proporcione a los usuarios una manera de cerrar la sesión y cambiar a otra cuenta de usuario.DO provide a way for users to sign out and switch to another user account. La mayoría de los usuarios tiene una sola cuenta personal de Microsoft, Facebook, Google o Twitter, pero pueden estar asociados con varias organizaciones.While most people have a single personal account from Microsoft/Facebook/Google/Twitter, people are often associated with more than one organization. Próximamente se admitirá el inicio de sesión simultáneo para varios usuarios.Support for multiple signed-in users is coming soon.