Cómo: Utilizar las características avanzadas del control Login de ASP.NET

Actualización: noviembre 2007

El control Login es un control compuesto que proporciona todos los elementos de interfaz de usuario comunes de un formulario de inicio de sesión. El control está dividido en partes y cada una de ellas se puede personalizar por separado. Estas partes incluyen los cuadros de texto Nombre de usuario y Contraseña, el botón Enviar, el botón para crear un nuevo usuario, la casilla Recordármelo e información de ayuda para el usuario. Puede definir su propia interfaz de usuario para el control de inicio de sesión definiendo nuevos elementos y reutilizando componentes predeterminados. También puede personalizar el texto de la interfaz de usuario y el aspecto (fuentes y colores) del control Login. Como alternativa, puede cambiar el aspecto general del control Login aplicando un tema o máscara de ASP.NET.

Además, puede utilizar funciones más avanzadas del control Login, como por ejemplo, si la información de inicio de sesión se almacena en una cookie persistente en el explorador o si el control de inicio de sesión está visible (en otras páginas diferentes de la predeterminada de inicio de sesión) cuando un usuario inicia sesión. Por último, puede convertir el control de inicio de sesión en una plantilla para poder controlar totalmente el aspecto del control.

Para controlar si un control de inicio de sesión es visible cuando un usuario ha iniciado una sesión

Sitúe un control Login en una página.

Nota:
De forma predeterminada, el control está configurado para funcionar con una página de inicio de sesión llamada Login.aspx. El nombre de la página de inicio de sesión se puede cambiar en el archivo Web.config estableciendo la propiedad LoginUrl de la clase FormsAuthentication.

Si desea que el control Login solo aparezca cuando un usuario no ha iniciado una sesión (el control siempre se mostrará en la página de inicio de sesión identificado por la propiedad LoginUrl), establezca la propiedad VisibleWhenLoggedIn como false.

Si desea que el control muestre una casilla Recordármelo la próxima vez, establezca la propiedad DisplayRememberMe como true. Si un usuario activa la casilla Recordármelo la próxima vez cuando inicia una sesión, el símbolo de autenticación se almacena en una cookie persistente en el explorador.
Si desea que la casilla Recordármelo la próxima vez esté seleccionada de forma predeterminada, establezca la propiedad RememberMeSet como true.
Si desea que el símbolo de autenticación se almacene en una cookie persistente sin dar al usuario la opción de desactivar la casilla Recordármelo la próxima vez, establezca la propiedad RememberMeSet como true y la propiedad DisplayRememberMe como false. Esto no es recomendable para sitios a los que se puede tener acceso desde equipos públicos que utilizan diferentes usuarios ya que un usuario no deseado podría utilizar un símbolo de autenticación persistente.

Para agregar vínculos de ayuda al control de inicio de sesión

Para agregar un vínculo al control Login que lleva al usuario a una dirección URL en la que puede crear una nueva cuenta de usuario, establezca la propiedad CreateUserText en texto como por ejemplo Haga clic aquí para registrar ahora y la propiedad CreateUserUrl en la dirección URL de la página de ayuda, como por ejemplo ~/register.aspx.

Nota:

Este paso y el siguiente requieren que las direcciones URL de destino estén en una ubicación que no necesite autenticación.
Para agregar un vínculo al control Login que lleva a una dirección URL en la que los usuarios pueden recuperar sus contraseñas, establezca la propiedad PasswordRecoveryText en texto como por ejemplo ¿Olvidó la contraseña? y la propiedad PasswordRecoveryUrl en la dirección URL de la página de ayuda, como por ejemplo ~/recoverpassword.aspx.
Para agregar un vínculo al control Login que lleva a una dirección URL de ayuda, establezca la propiedad HelpPageText en texto como por ejemplo ¿Necesita ayuda? y la propiedad HelpPageUrl en la dirección URL de la página de ayuda, como por ejemplo ~/userhelp.aspx.

Nota:
Este paso y el siguiente requieren que las direcciones URL de destino estén en una ubicación que no necesite autenticación.

Para agregar imágenes al control de inicio de sesión

Para utilizar una imagen en lugar de un botón Iniciar sesión, establezca la propiedad LoginButtonImageUrl en la dirección URL del archivo de imagen de inicio de sesión, como por ejemplo ~/images/login.gif.

Asimismo puede incluir imágenes con los vínculos de las direcciones URL para crear usuarios, recuperar contraseñas y obtener páginas de ayuda mediante las propiedades PasswordRecoveryIconUrl, CreateUserIconUrl y HelpPageIconUrl, respectivamente.

Convertir el control de inicio de sesión en una plantilla

Puede convertir el control Login en una plantilla que se defina en el marcado como una tabla que contenga controles ASP.NET como Label y TextBox. A continuación, puede utilizar estos elementos o agregar los suyos propios para crear una plantilla personalizada para el control Login. Tenga en cuenta que, para los controles que componen la plantilla de inicio de sesión, se utilizan los mismos Id. de control que los de la plantilla predeterminada.

Para utilizar una plantilla con el control de inicio de sesión

Coloque un control Login en una página en la vista Diseño.
Haga clic con el botón secundario del mouse en el control y seleccione Convertir en plantilla en el menú de acceso directo.

El modo en que se realiza la conversión del control Login depende de la declaración DOCTYPE. Si la declaración DOCTYPE se establece en XHTML 1.0 Transitional (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">), los estilos se aplican a la tabla que se crea cuando el control Login se convierte en una plantilla. Si la declaración del DOCTYPE no se establece en XHTML 1.0 Transitional o no existe, no se conserva información sobre el estilo en la tabla externa que se genera.

Por ejemplo, si establece el tamaño de fuente relativo en el control Login, y, a continuación, convierte el control en una plantilla, el tamaño de fuente relativo no se conserva en la tabla. En el ejemplo siguiente se muestra un control Login con un tamaño de fuente establecido en Más grande.

<asp:login id="Login2"  font-size="X-Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
   <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
</asp:login>

Cuando el control Login del código anterior se convierte en una plantilla, la tabla creada no tiene ninguno de los estilos aplicado. El ejemplo siguiente es un fragmento del código generado a partir del control anterior cuando se convierte en una plantilla.

<asp:login id="Login2"  font-size="X-Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
    <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
    <LayoutTemplate>
    <table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse">
...

Si desea que los atributos de estilo se apliquen también a la tabla creada cuando el control Login se convierte en una plantilla, asegúrese de que el DOCTYPE de la página está establecido en XHTML 1.0 Transitional antes de seleccionar Convertir en plantilla en el menú de control de la vista Diseño.

Vea también

Conceptos

Personalizar la apariencia de los controles ASP.NET de inicio de sesión

Información general sobre temas y máscaras de ASP.NET

Otros recursos

Controles de inicio de sesión del Cuadro de herramientas

Last updated on 2014-10-22