No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
11 Hrs
59 Min
12 Seg

Reto 3: login de usuarios

16/17
Recursos

Crearemos el diagrama de flujo de un login de usuario. En este ejemplo se armará una secuencia lógica que tendrán que suceder para que el acceso a una cuenta de usuario sea correcto.

Nuestro diagrama de flujo va a estar compuesto por un elemento de inicio, un elemento de fin, dos elementos de toma de decisión y 3 elementos de representación de proceso. A continuación, se mostrarán los pasos para construir nuestro diagrama de flujo.

Elemento de inicio

Este elemento es transcendental en nuestro diagrama debido a que marca en que parte comienza el proceso.

Ingresar usuario

El primer elemento representa un proceso, en este se recibe el usuario que quiere acceder al sitio.

Ingresar contraseña

En este elemento de proceso se recibe la contraseña correspondiente al usuario ingresado en el primer proceso.

¿Ingreso los datos?

Este elemento, es el primero de toma de decisión, aquí se busca validar que el usuario haya proporcionado los datos. Si la respuesta es negativa se devolverá al usuario al inicio del flujo, pero si la respuesta es positiva se procederá a validar la información.

Validación de usuario

En este elemento de toma de decisión, se validan los datos que el usuario ingreso, si los datos coincide con la información existente, recibirá acceso a la plataforma, pero si los datos no son conocidos se devolverá al inicio del flujo.

Dar acceso

El penúltimo elemento es un elemento de proceso, en este, sele da acceso al usuario a la plataforma, sitio o información que está buscando. A este punto solo se llega, después de haber validado, toda la información.

Fin

Al igual que indicar el inicio, indicar el final, también es trascendental dentro de los diagramas de flujo, debido a que de esta manera los usuarios de nuestro diagrama de flujo, pueden saber, donde termina todo el proceso.

Hemos construido un diagrama de flujo que representa el proceso de login de usuario. En este ejemplo, tuvimos que tomar muchas decisiones que no estaban determinadas por la naturaleza del ejercicio, sino que nos tocó elegir que pasaría a nosotros.

¡Te reto a que crees un diagrama un poco más detallado que éste para validar el login de un usuario, una vez lo hagas, compártenos en la sesión de comentario tu resultado.!

Contribución del curso creada por: Silfredo Ibarra.

Aportes 336

Preguntas 7

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Vengo a recomendarles PSeint
ahí pueden hacer el algoritmo primero y luego visualizar el diagrama de flujo, a la vez que prueban lo que están haciendo, es muy útil para aprender y ver si la lógica que estamos implementando resultaría.

🤔Creo que me falta detallarlo más ¿Qué opinan?

👀 Así me quedó

Ejercicio optimizado (según mi juicio):

Comparto mi ejercicio: …¿qué opinan?

En realidad no es posible validar primero la contraseña antes del usuario, ya que no tendríamos en donde comparar la misma.
Primero se valida que el usuario sea correcto, o sea exista, y en base a eso se compara la clave ingresada.

Aquí mi Diagrama 😃 (Quiero Feedback)

Jajaja dejo mi ejercicio muchachos, ¿Que opinan? senti como se me calentaba el cerebro por intentar hacerlo xD

Se podría hacer así que lo busque en la base de datos y si no lo encuentra que le cree un usuario.

Mi modificación incluye una conexión a una base de datos 😄 (No se si es la forma correcta de incluirla en un diagrama).

Veo que varias personas están validando el usuario y la contraseña por separado, es mejor validar si el usuario y la contraseña son correctas al mismo tiempo o en procesos continuos ya que la base de datos no va a confirmar estos sin antes el frontend hacer la petición, es decir, usted como persona escribe el usuario y la contraseña y le da acceder, ahí se verifica si alguno de los dos datos está mal. ¿O usted escribe el usuario, le da acceder y si está bien hay si escribe la contraseña? No verdad‽

Hola compañeros de estudio, soy nuevo en platzi y esto de la programación es nuevo para mi, arregle el diagrama, pero lo único que hice es agregar cosas para especificar unos procesos, quiero su opinión

Feedback 👇


Use PSeInt gracias a la recomendación de una “compañera” para hacer este diagrama, acepto feedback.

💫 Reto 3:

ingrese usuario

el usuario esta en el back end?
si:
“dame contraseña”

no:
“dame contraseña”

la contra es correcta?
si:
checar con usuario y si es correcto:
"pasa"
no es correcto:
“verifica tu usuario y contraseña”

esto es porque nosotres lxs hackers checamos si existe o no en la DB el user…jamas le des a conocer al cliente si esta o no esta registrado un USER en tu DB.

LE ESTAS DANDO FERIA DE MAS…LE ESTAS ENTREGANDO INFO GRATIS. ES UNA BRECHA DE SEGURIDAD.

de nada.

Reto 3 solucion:

Comparto mi algoritmo para login de usuarios

Agradeceria Feedback

🍃 En mis años de tener infinidad de cuentas, terminé haciendo el proceso más común que me encuentro.![](https://static.platzi.com/media/user_upload/Inicio%20de%20sesi%C3%B3n-7d5fac88-a713-44cb-8614-ce9863ef5f6d.jpg)
Hola a todos compañeros, les comparto mi diagrama de flujo para el problema del login. ![](https://static.platzi.com/media/user_upload/Algoritmo-login-43857727-d2d2-4f30-b442-226e74bc2f40.jpg)
👉 Realice mi diagrama de está forma en FigJam: ![](https://static.platzi.com/media/user_upload/image-16a412eb-df59-406a-abe0-800739e452e5.jpg)
![](https://static.platzi.com/media/user_upload/image-21d48fd2-b238-4702-b0d8-5e913216222b.jpg)
![](https://static.platzi.com/media/user_upload/Independencia%20lineal%20de%20vectores-29684393-78d7-4981-b774-633b12f514c1.jpg)
Mi propuesta 1. Inicio Comienza el proceso 1. Ingresar usuario Se inicia un proceso donde se ingresa el nombre de usuario 1. Validar información Se crea una decisión en donde: * Si es correcta la información se continúa con el flujo * Si no es correcta la información se imprime en pantalla un mensaje de usuario no válido y se devuelve al paso 2 para que ingrese un nombre de usuario correcto 1. Ingresar contraseña Se inicia un proceso donde se ingresa la contraseña del usuario 1. Validar información Se crea una decisión en donde: * Si es correcta la información se continúa con el flujo * Si no es correcta la información se imprime en pantalla un mensaje de contraseña no válida y se devuelve al paso 4 para que reintente la contraseña   1. Dar acceso Se da acceso a la plataforma 1. Fin Termina el proceso  ![](file:///C:/Users/gossb/Downloads/Diagrama%20loggin.png)![](https://static.platzi.com/media/user_upload/Diagrama%20loggin-83dea29a-d438-41cd-b5d3-837fbf8c5ad6.jpg)

Diagrama de flujo con two factor authentication

![](https://static.platzi.com/media/user_upload/image-d635fe57-fd82-4da5-a6d7-be1827882baa.jpg)
En caso de que los datos no sean correctos, le daría la opción de recuperar usuario y contraseña.

Hola compañeros, comparto mi ejercicio

Antes de poner “ingresar usuario” yo pondría una decisión que dijera “¿está registrado en la página?” si, sí está registrado empiezo el proceso de ingresar usuario y demás, si no lo está pongo un rectángulo que diga “por favor realice su registro”.

Así lo resolví

Perdón si la letra no se entiende mucho jajaja este es mi intento
IMG_7D7DEDEC3B92-1.jpg

Buenas noches, saludos!

Al diagrama le añadiría primero validar si es correcto o no el usuario, y si no es correcto, que se cree otro proceso de búsqueda de usuario. Una vez confirmado definitivamente el usuario, validar si está correcta la contraseña, y si sí, dar ingreso.

👀

Ejercicio hecho… ¿qué opinan Platzinautas?
PD: estos ejercicios que nos fue planteando la profesora Martinez los realicé desde la página Lucidchart, el cual es un software para realizar diagramas desde la web, y gratis! https://www.lucidchart.com/pages/es

Mi Diagrama mejorado, acepto feedback!

La estética no es mi fuerte, y menos con tan poco espacio jajaja

Acá mi aporte:

Algoritmo Login
	Escribir "Ingresar Usuario"
	Leer usuario
	Escribir "Ingresar Contraseña"
	Leer pass
	
	
	Si usuario = "Admin" y pass = "123" Entonces
		Escribir "Bienvenido"
		
	SiNo
		si usuario <> "Admin" y pass <> "123" Entonces
			Escribir "Credenciales Incorrectas"
		SiNo 
			si usuario <> "Admin" Entonces
				Escribir "Usuario Incorrecto"
			SiNo 
				Si pass <> "123" Entonces
					Escribir "Contraseña Incorrecta" 
				FinSi
			FinSi
		FinSi
	FinSi
	
FinAlgoritmo

Solo se considera el caso de dar acceso cuando ambos Login y Usuario son correctos.

El diagrama de flujo más complejo que he hecho en este curso y hasta ahora en mi vida. Por favor revísenlo, espero su feedback. ^_^ Además, si desean realizar zoom denle “Abrir imagen en otra pestaña”.

Saludos, harían falta más detalles en el reintento, pero creo que es solo un esbozo… Me refiero, hacer un contador y evaluarlo con una desición si ya se pasó el número de intentos máximo (3 p. e.)

Diagrama de flujo del login de un usuario

Agregue una nueva condicion que permite verificar si la contraseña coinciden con la del usuario y de esta manera si no es correcto que vuelva a empezar pero desde la contraseña

Reto 3: login de usuario

Creo que seria una verificación de roles y saber que accesos darle al usuario.

Mi aporte: ![](https://static.platzi.com/media/user_upload/image-5382fe97-eb5b-4629-9475-2d2c234ddea1.jpg)
![](https://static.platzi.com/media/user_upload/image-900e334b-b7d5-433c-9db3-cc0840047377.jpg)
Esta es mi propuesta de solución: ![](https://static.platzi.com/media/user_upload/image-48750a76-2716-4884-9631-fdc7d51361b0.jpg)
Hola aqui les paso dejando como seria en el programa PSeint es un buen programa para iniciar en algoritmos y en programacion ![](https://static.platzi.com/media/user_upload/image-b894f311-6959-41dc-8c29-37cca1288b57.jpg)
En este caso de algoritmo se puede hablar de CONJUNCION para la verificacion de Usuario Y Contraseña.
![]()Esta es la mia ![](https://static.platzi.com/media/user_upload/Diagrama%20en%20blanco-511f5b56-5671-4102-8f55-dc5791802c35.jpg)
![](https://static.platzi.com/media/user_upload/null%20%282%29-09902fb0-3fed-4182-86e7-d5b2426c3940.jpg)
![](https://static.platzi.com/media/user_upload/Diagrama%20de%20flujo%20LOGIN%20DE%20ACCESO-91070cf3-d1ce-4991-a792-d23b3d4a5427.jpg)
![](https://static.platzi.com/media/user_upload/image-888342da-a9e9-43a3-8b97-cdacf9e27d82.jpg)![](blob:https://web.whatsapp.com/bf86e43d-efb3-4a3d-bc00-a253db79cae6)
```js ```
![](https://static.platzi.com/media/user_upload/image-bdaed701-e657-431f-beba-53a8afd192e6.jpg)![](https://static.platzi.com/media/user_upload/image-537928d0-b676-4743-9f95-8ce8139a842d.jpg)
Así me quedó, agradezco si me dan feedback al respecto! Saludos a todos! ![](https://static.platzi.com/media/user_upload/image-90fa9d5e-32e7-41da-aeb8-293434f98adf.jpg)
![](https://static.platzi.com/media/user_upload/image-66e80206-7bd0-4680-9ddb-0a44ba574be6.jpg)Así me quedó, agradezco si me dan feedback al respecto Saludos a todos!
![](https://static.platzi.com/media/user_upload/image-1c908d79-c2d7-4b92-a45d-38a4af2dc67f.jpg)![](https://static.platzi.com/media/user_upload/image-22844162-7a9b-422f-817f-39ded7ce828c.jpg)
HOLII ![](https://static.platzi.com/media/user_upload/image-6c1ab8c8-c7e7-4b62-8c0c-fa883c509c42.jpg)
Así quedó ![](https://static.platzi.com/media/user_upload/image-15364651-f206-45fc-81a1-c01e33740ddd.jpg)
Acá esta mi propuesta😉 ![](https://static.platzi.com/media/user_upload/image-7a46a8d9-90b6-4e2b-b0a4-fdfc6ce32732.jpg)

me dan feedback plz.

Creo que me quedo bien ;3 ![](https://static.platzi.com/media/user_upload/image-e2e48a47-1e1c-44a8-80ec-19de540419ed.jpg)
![](https://static.platzi.com/media/user_upload/Acceso%20con%20contrase%C3%B1a-64726172-5f96-452f-b221-053c76579dcd.jpg)
Si bien me parece importante validar ambos (user y password), creería yo que por motivos de seguridad, no podemos indicarle el dato incorrecto al user, osea si se equivocó especificamente en alguno de los datos. Excelente clase
![](<"C:\Users\migue\OneDrive\Documents\programacion\Diagrama sin título.drawio.png">)Aqui dejo mi ejercicio. acepto feedback !
![](https://file.notion.so/f/f/ebaf1aab-8490-41d2-abde-eef8239d9804/9bb6c410-7986-4516-948c-db63691f4602/Diagrama_de_Login.png?id=af611d7f-57f0-4d13-a396-74a72f9269c0\&table=block\&spaceId=ebaf1aab-8490-41d2-abde-eef8239d9804\&expirationTimestamp=1712102400000\&signature=9ukWvacJdAgEq4BcrFj0y6lr4w1Xs_br0h9Vo9-zYTg\&downloadName=Diagrama+de+Login.png) Hice este con la solicitud de usuario primero y luego la contraseña
Cordial saludo les comparto mi diagrama se reciben feedbacks :D <https://www.canva.com/design/DAGARDccuwM/cMwuWxkdiwX_E7SOevHbhQ/edit?utm_content=DAGARDccuwM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton> Nunca paren de aprender, Dios los bendiga
![](https://static.platzi.com/media/user_upload/Login.drawio-b83fc8dd-6602-46db-91f0-adc8229f31cc.jpg)
Mi Ejemplo De Login De Usuario, Hecho De Forma Digital.👇✅ ![](https://static.platzi.com/media/user_upload/login-575d8b6a-a402-459c-b3ce-1f8e12710deb.jpg) INSISTO, necesito que me digan que hay que corregir, de lo contrario, no se que tal mal estoy ni que debo mejorar. ¡PLEASE!😒
![](https://static.platzi.com/media/user_upload/image-374c1695-e275-4b37-bb53-948108c7922c.jpg)
![](https://static.platzi.com/media/user_upload/DIAGRAMA%20INGRESO-f1495868-a699-4a83-a690-4af171377c29.jpg)
<https://lucid.app/lucidchart/58184af5-9d89-4834-b84b-34f10fd900f1/edit?viewport_loc=-626%2C318%2C2693%2C1201%2C0_0&invitationId=inv_7eba4ed1-9bfe-4cf1-b1f1-bb42a62eae6a>
![](https://static.platzi.com/media/user_upload/image-8d95b894-5cc4-4b16-a786-3897f362008a.jpg)![](https://app.diagrams.net/?src=about#G1trpqPS021o1fybZ25DHEUEhoBpmpYyBN#%7B%22pageId%22%3A%222-z0L-tJDhuNfTnJ95Mg%22%7D)![](https://app.diagrams.net/?src=about#G1trpqPS021o1fybZ25DHEUEhoBpmpYyBN#%7B%22pageId%22%3A%222-z0L-tJDhuNfTnJ95Mg%22%7D)
![](https://static.platzi.com/media/user_upload/Untitled%20diagram-2024-02-27-042439-6008646d-de04-4d3a-b0c9-c6dbb8eee125.jpg)
yo nada mas pondria un como tipo candado de verificacion por si el usuario coloco mal su contraseña, normalmente como usuario nos olvidamos de la contraseña y en X plataforma nos pide que si podremos verificar nuestro usuario mediante correo o numero telefonico, para esta ocasion y no hacer mas largo el algoritmo solo pedi validar mediante correo, queria añadir un contador porque normalmente las platafomras te dejan ahcer 3 intentos como maximo pero otra vez para no hacer mas largo el Diagrama de Flujo solo lo hice asi para simplificar la idea. ![](https://static.platzi.com/media/user_upload/image-ddfe7a5c-d2e5-457a-8c70-7a92790ea368.jpg)
![](https://static.platzi.com/media/user_upload/Login%20de%20Usuarios-f5a91488-1575-41fd-af6a-d9953425b663.jpg) Lo hice en draw.io e ingresé una nueva funcionalidad de que si se equivoca tres veces darle un timeout
![](https://static.platzi.com/media/user_upload/image-18dd51e1-d568-46fb-add2-145994f0e4eb.jpg)
PSeInt es un entorno de desarrollo y aprendizaje de programación que se utiliza principalmente en la enseñanza de algoritmos y programación en instituciones educativas. Su nombre completo es "Pseudo Código Interpreter" (Intérprete de Pseudo Código), y está diseñado para facilitar el aprendizaje de la lógica de programación y la construcción de algoritmos sin necesidad de dominar un lenguaje de programación específico. Es ampliamente utilizado al inicio de la programación por varias razones: 1. **Sintaxis simplificada**: PSeInt utiliza una sintaxis simple y fácil de entender, lo que permite a los principiantes concentrarse en los conceptos fundamentales de la programación sin tener que preocuparse por la complejidad de un lenguaje de programación real. 2. **Enfoque en la lógica**: Al trabajar con pseudocódigo en PSeInt, los estudiantes pueden centrarse en el diseño lógico de los algoritmos, comprendiendo los conceptos de secuencia, selección y repetición, que son fundamentales en la programación. 3. **Abstracción de detalles técnicos**: PSeInt oculta los detalles técnicos y la complejidad de la programación real, permitiendo a los estudiantes concentrarse en la resolución de problemas y la construcción de algoritmos sin preocuparse por la sintaxis o la semántica de un lenguaje de programación específico. 4. **Facilidad de aprendizaje**: Al utilizar un entorno visual y amigable, PSeInt facilita el aprendizaje de los conceptos básicos de programación, lo que ayuda a los estudiantes a adquirir confianza y habilidades que luego pueden aplicar al aprender lenguajes de programación más avanzados.
![](https://static.platzi.com/media/user_upload/image-39d01fd1-e1f0-413c-9f09-9350689717b6.jpg)
![](https://static.platzi.com/media/user_upload/image-c7c9da48-04fe-486e-98a9-bf104669fd0d.jpg)

Yo creo que esta seria una forma de como se debería llevar el login de un sistema, no pongo el tema de verificar si el usuario o la contraseña están correctos si no los asumo que no coinciden entre los dos de esta forma creo que puedo tener credenciales un poco mas seguras

Solución al reto ![](https://static.platzi.com/media/user_upload/RETO%202-9a134a18-23bd-4693-8ba7-ffbc06835736.jpg)

Diagrama de Flujo creado con Mermaid 🧜🏽‍♂️🧜🏽‍♀️

Código

graph TD
A((Inicio))
B[/Ingresar nombre de \n usuario y contraseña/]
C{Credenciales \n válidas?}
D{Usuario \n bloqueado?}
E[Mensaje: Acceso \n concedido]
F[Mensaje: Credenciales \n inválidas]
G[Mensaje: Usuario \n bloqueado]
H{¿Desea \n crear una cuenta?}
I[/Registrar correo \n y contraseña/]
J((Fin))

A --> B
B --> C
C --  --> D
D --  --> G
D -- No --> E
G --> J
E --> J
C -- No --> F
F --> H
H --  --> I
H -- No --> J
I --> B