# Patrones - Acceso por MFE. DESY. Sistema de diseño del Gobierno de Aragón.

## Patrones Índice de páginas

Patrones

# Acceso por MFE

Páginas y flujos

Los pasos que debe seguir la persona usuaria para identificarse.

## Índice de apartados de esta página

### Paso 1: Elegir el método de identificaciónClave o certificado, solo clave, clave y registro. (Estado: pasado) Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

-   [Clave o certificado](patrones-pagina-acceso.html#clave-o-certificado)
-   [Sólo Cl@ve](patrones-pagina-acceso.html#slo-clave)
-   [Clave o contraseña](patrones-pagina-acceso.html#clave-o-contrasea)

### Paso 2: EsperarEsperar hasta que la aplicación acceda al perfil. (Estado: pasado) Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

-   [Spinner de carga](patrones-pagina-acceso.html#spinner-de-carga)

### Paso 3: Seleccionar organismoEn caso de tener varios disponibles (Estado: pasado) Mostrar Ocultar

Haz click en el botón anterior para mostrar u ocultar

-   [Selección de organismo](patrones-pagina-acceso.html#spinner-de-carga)

## Paso 1: Elegir el método de identificación [#](#paso-1-elegir-el-mtodo-de-identificacin)

### Clave o certificado [#](#clave-o-certificado)

![Vista previa de escritorio y móvil de la página de Clave o certificado](images/pp-mfe-1-1.svg)

-   [Ver código HTML](patron-pagina-acceso-como-mfe.html "Se abre en ventana nueva")
-   [Ver Figma](https://www.figma.com/proto/VYfrETnupxCFCPAknaRViW/DESY%3A-El-Sistema-de-Dise%C3%B1o-del-Gobierno-de-Arag%C3%B3n?page-id=1886%3A2513&type=design&node-id=1886-3786&viewport=2241%2C-204%2C0.52&t=iVu5udkiBRt4zqqm-1&scaling=scale-down-width&starting-point-node-id=1886%3A3786&mode=design "Se abre en ventana nueva")

### Sólo Clave [#](#slo-clave)

![Vista previa de escritorio y móvil de la página de sólo Clave](images/pp-mfe-1-2.svg)

-   [Ver código HTML](patron-pagina-acceso-como-mfe-solo-clave.html "Se abre en ventana nueva")
-   [Ver Figma](https://www.figma.com/proto/VYfrETnupxCFCPAknaRViW/DESY%3A-El-Sistema-de-Dise%C3%B1o-del-Gobierno-de-Arag%C3%B3n?page-id=1886%3A2513&type=design&node-id=1916-9266&viewport=1063%2C-37%2C0.28&t=kKjnlA9oiR5JkjmE-1&scaling=scale-down-width&starting-point-node-id=1916%3A9266&mode=design "Se abre en ventana nueva")

### Clave o contraseña [#](#clave-o-contrasea)

![Vista previa de escritorio y móvil de la página Con Clave o contraseña](images/pp-mfe-1-3.svg)

-   [Ver código HTML](patron-pagina-acceso-como-mfe-con-mas-opciones-y-registro.html "Se abre en ventana nueva")
-   [Ver Figma](https://www.figma.com/proto/VYfrETnupxCFCPAknaRViW/DESY%3A-El-Sistema-de-Dise%C3%B1o-del-Gobierno-de-Arag%C3%B3n?page-id=1886%3A2513&type=design&node-id=1916-9667&viewport=1063%2C-37%2C0.28&t=CmXZJR7HbY3JGxyY-1&scaling=scale-down-width&starting-point-node-id=1916%3A9667&mode=design "Se abre en ventana nueva")

## Paso 2: Esperar [#](#paso-2-esperar)

### Spinner de carga [#](#spinner-de-carga)

![Vista previa de escritorio y móvil de la página Spinner de carga](images/pp-mfe-2.svg)

-   [Ver código HTML](patron-pagina-acceso-cargando.html "Se abre en ventana nueva")
-   [Ver Figma](https://www.figma.com/proto/VYfrETnupxCFCPAknaRViW/DESY%3A-El-Sistema-de-Dise%C3%B1o-del-Gobierno-de-Arag%C3%B3n?page-id=1886%3A2513&type=design&node-id=1886-3814&viewport=1063%2C-37%2C0.28&t=CmXZJR7HbY3JGxyY-1&scaling=scale-down-width&starting-point-node-id=1886%3A3814&mode=design "Se abre en ventana nueva")

## Paso 3: Seleccionar organismo [#](#paso-3-seleccionar-organismo)

### Selector de organismo [#](#selector-de-organismo)

![Vista previa de escritorio y móvil de la página Selección de organismo](images/pp-mfe-3.svg)

-   [Ver código HTML](patron-pagina-acceso-seleccion-de-organismo.html "Se abre en ventana nueva")
-   [Ver Figma](https://www.figma.com/proto/VYfrETnupxCFCPAknaRViW/DESY%3A-El-Sistema-de-Dise%C3%B1o-del-Gobierno-de-Arag%C3%B3n?page-id=1886%3A2513&type=design&node-id=1916-10344&viewport=1063%2C-37%2C0.28&t=CmXZJR7HbY3JGxyY-1&scaling=scale-down-width&starting-point-node-id=1916%3A10344&mode=design "Se abre en ventana nueva")