No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

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 320

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: 鈥β縬u茅 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.

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

Aqu铆 mi Diagrama 馃槂 (Quiero Feedback)

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 鈥渃ompa帽era鈥 para hacer este diagrama, acepto feedback.

馃挮 Reto 3:

ingrese usuario

el usuario esta en el back end?
si:
鈥渄ame contrase帽a鈥

no:
鈥渄ame contrase帽a鈥

la contra es correcta?
si:
checar con usuario y si es correcto:
"pasa"
no es correcto:
鈥渧erifica tu usuario y contrase帽a鈥

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

LE ESTAS DANDO FERIA DE MAS鈥E ESTAS ENTREGANDO INFO GRATIS. ES UNA BRECHA DE SEGURIDAD.

de nada.

Reto 3 solucion:

Comparto mi algoritmo para login de usuarios

Agradeceria Feedback

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 鈥渋ngresar usuario鈥 yo pondr铆a una decisi贸n que dijera 鈥溌縠st谩 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 鈥減or 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 鈥淎brir 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.

馃憠 Realice mi diagrama de est谩 forma en FigJam: ![](https://static.platzi.com/media/user_upload/image-16a412eb-df59-406a-abe0-800739e452e5.jpg)
HOLII ![](https://static.platzi.com/media/user_upload/image-6c1ab8c8-c7e7-4b62-8c0c-fa883c509c42.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)
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)
![](https://static.platzi.com/media/user_upload/INICIO%20DE%20SESION.drawio-b61ad11c-f1b4-48ad-a620-6ca795fecc53.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 -- S铆 --> D
D -- S铆 --> G
D -- No --> E
G --> J
E --> J
C -- No --> F
F --> H
H -- S铆 --> I
H -- No --> J
I --> B
a![](https://static.platzi.com/media/user_upload/IMG_0008-aef85cb0-99cf-4dac-bc93-0df103cdbdff.jpg)qui dejo mi pr谩ctica
![](https://static.platzi.com/media/user_upload/image-4bc0f4d9-8096-4ea4-a405-23dc123c6c08.jpg)
![](https://static.platzi.com/media/user_upload/image-c2def02c-87b1-445a-b844-d75cc92e7353.jpg)
Hola, comparto mi diagrama. Espero me puedan dar retroalimentaci贸n. Saludos! ![](https://static.platzi.com/media/user_upload/image-66ec4612-8e2d-4339-a4ba-b9cdab71ae08.jpg)
![](https://static.platzi.com/media/user_upload/image-32b8ac76-453c-48c8-a6e3-080ef54a6419.jpg)
![](https://static.platzi.com/media/user_upload/image-3b8263cf-a61a-45e9-a873-dac465fbbadf.jpg)
Para inicio de sesi贸n con tel茅fono o usuario (username o email)![](https://static.platzi.com/media/user_upload/image-0b6ca367-cf34-4aea-9fe1-d77064917442.jpg)

Aqui el algoritmo:

Algoritmo Clase16_LoginUsuario
	
	Escribir "Ingrese su username"
	leer username
	Escribir "Ingrese su password"
	leer password
	default ="default"
	pass = "pass"
	Mientras username<>default O password<>pass
			Si username <> default
				Escribir "Lo lamentamos, su username no existe en nuestra plataforma"
				
			SiNo Si password <> pass
					Escribir "Lo lamentamos, su contrase帽a no existe en nuestra plataforma"
					FinSi
				FinSi
					
				Escribir "Ingrese su username"
				leer username
				Escribir "Ingrese su password"
				leer password
		FinMientras
		Escribir "Bienvenido, queridisimo ",username, " , esto no es un acoso :I"
FinAlgoritmo

Y el flujograma:

![](https://static.platzi.com/media/user_upload/image-1f728eca-b3f9-4ec1-a576-c801cf63927f.jpg)
Opt茅 por crear un proceso donde se permite ingresar el usuario y la contrase帽a al mismo tiempo. Tambi茅n implement茅 la validaci贸n del captcha para agregar un toque de seguridad. Me gustar铆a saber si todo esto qued贸 bien implementado dentro del siguiente flujo de trabajo: ![](https://static.platzi.com/media/user_upload/image-ec515b03-9922-4a86-a13e-bd0a45b3bd17.jpg)
Envio mi aporte, atento a sus observaciones, gracias. ![](https://static.platzi.com/media/user_upload/image-398fc084-4cd7-4561-935f-9768777f243a.jpg)

Para no pedirle los datos nuevamente entoces lo sacaria borrari ala informacion de los imputs para que vuelv aa iniciar todo de nuevo

Adjunto el modelo ![](https://static.platzi.com/media/user_upload/modelado%20validar%20usuario-e141dbc5-f8e0-493d-8dbd-98337b5565e6.jpg)

Hola, agradezco el Feedback 馃槃

Inicio
|
V
Ingresar nombre de usuario y contrase帽a
|
V
驴Las credenciales son v谩lidas?
|
|-- S铆 --> Iniciar sesi贸n y mostrar mensaje de bienvenida
|
|-- No --> Mostrar mensaje de error: 鈥淐redenciales incorrectas鈥
|
V
Fin