Login y Registro en Xcode con SwiftUI para IOS (IPHONE)

- Si es de tu interés este artículo, apoyanos compartiendo en tus redes sociales favoritas y de esa manera también incentivando a tus amigos que crees les pueda interesar a que nos lean.


Login y Registro en Xcode con SwiftUI para IOS (IPHONE)




En este proyecto, desarrollamos una aplicación en Xcode que permite a los usuarios registrarse e iniciar sesión utilizando credenciales almacenadas en un archivo TXT. Este sistema es ideal para aplicaciones simples que no requieren una base de datos externa, pero aún necesitan un control de acceso básico.


🛠 Tecnologías Utilizadas

Para la creación de este proyecto usamos las siguientes tecnologías:


Xcode – Entorno de desarrollo para aplicaciones iOS.

Swift 5 – Lenguaje de programación utilizado.

SwiftUI – Framework para la interfaz de usuario.

File Handling en Swift – Para la lectura y escritura de archivos locales.


🏗 Estructura del Proyecto

El proyecto consta de cuatro archivos principales:


1. usuarios.txt – Contiene los nombres de usuario y contraseñas.

2. LoginViewModel.swift – Lógica para la autenticación y registro de usuarios.

3. ContentView.swift – Pantalla de inicio de sesión.

4. RegisterView.swift – Pantalla de registro de nuevos usuarios.

📂 Archivo de Usuarios (usuarios.txt)


Este archivo almacena las credenciales en formato “usuario,contraseña”:

valencia,contrasena123
usuario2,password456
admin,adminpass


📌 Ubicación: Se guarda en el directorio de documentos de la aplicación.

⚙ Implementación del Login y Registro en SwiftUI


📌 1. LoginViewModel.swift (Lógica del Login y Registro)


Este archivo gestiona la autenticación y escritura de nuevas credenciales en el archivo TXT.

import Foundation

class LoginViewModel: ObservableObject {
    @Published var username: String = ""
    @Published var password: String = ""
    @Published var isAuthenticated: Bool = false
    @Published var errorMessage: String?
    @Published var isRegistered: Bool = false

    // 📌 Función para iniciar sesión
    func login() {
        guard let credentials = readCredentials() else {
            errorMessage = "Error al leer el archivo."
            return
        }

        if credentials.contains("\(username),\(password)") {
            isAuthenticated = true
            errorMessage = nil
        } else {
            errorMessage = "Usuario o contraseña incorrectos."
        }
    }

    // 📌 Función para registrar usuario
    func register() {
        guard !username.isEmpty, !password.isEmpty else {
            errorMessage = "Usuario y contraseña no pueden estar vacíos."
            return
        }

        guard let credentials = readCredentials() else {
            errorMessage = "Error al acceder al archivo."
            return
        }

        if credentials.contains("\(username),") {
            errorMessage = "El usuario ya existe."
            return
        }

        if saveCredentials(username: username, password: password) {
            isRegistered = true
            errorMessage = nil
        } else {
            errorMessage = "Error al registrar usuario."
        }
    }

    // 📌 Leer credenciales del archivo `usuarios.txt`
    private func readCredentials() -> String? {
        guard let path = getFilePath() else { return nil }
        return try? String(contentsOfFile: path, encoding: .utf8)
    }

    // 📌 Guardar nueva credencial en el archivo `usuarios.txt`
    private func saveCredentials(username: String, password: String) -> Bool {
        guard let path = getFilePath() else { return false }

        let newCredential = "\(username),\(password)\n"
        if let fileHandle = FileHandle(forWritingAtPath: path) {
            fileHandle.seekToEndOfFile()
            if let data = newCredential.data(using: .utf8) {
                fileHandle.write(data)
                fileHandle.closeFile()
                return true
            }
        } else {
            do {
                try newCredential.write(toFile: path, atomically: true, encoding: .utf8)
                return true
            } catch {
                return false
            }
        }
        return false
    }

    // 📌 Obtener la ruta del archivo `usuarios.txt`
    private func getFilePath() -> String? {
        let fileManager = FileManager.default
        let documentsDirectory = fileManager.urls(for: .documentDirectory, in: .userDomainMask).first!
        let filePath = documentsDirectory.appendingPathComponent("usuarios.txt")

        if !fileManager.fileExists(atPath: filePath.path) {
            try? "".write(to: filePath, atomically: true, encoding: .utf8)
        }

        return filePath.path
    }
}


🔹 ¿Qué hace este código?


Lee y guarda credenciales en usuarios.txt.

Verifica si el usuario ya existe antes de registrarlo.

Muestra mensajes de error si los datos son inválidos.


📌 2. RegisterView.swift (Pantalla de Registro)


Este archivo contiene la interfaz para que los usuarios puedan registrarse.


import SwiftUI

struct RegisterView: View {
    @Environment(\.presentationMode) var presentationMode
    @StateObject private var viewModel = LoginViewModel()

    var body: some View {
        VStack {
            Text("Registro")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 20)

            TextField("Usuario", text: $viewModel.username)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            SecureField("Contraseña", text: $viewModel.password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            if let errorMessage = viewModel.errorMessage {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .padding()
            }

            Button(action: {
                viewModel.register()
            }) {
                Text("Registrarse")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            .padding()

            if viewModel.isRegistered {
                Text("✅ Usuario registrado con éxito")
                    .foregroundColor(.green)
                    .padding()
                Button("Volver al Login") {
                    presentationMode.wrappedValue.dismiss()
                }
                .foregroundColor(.blue)
            }
        }
        .padding()
    }
}


📌 3. ContentView.swift (Pantalla de Login)


Este archivo gestiona el login y la navegación al registro.

import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = LoginViewModel()
    @State private var showRegisterView = false

    var body: some View {
        VStack {
            Text("Login")
                .font(.largeTitle)
                .bold()
                .padding(.bottom, 20)

            TextField("Usuario", text: $viewModel.username)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            SecureField("Contraseña", text: $viewModel.password)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            if let errorMessage = viewModel.errorMessage {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .padding()
            }

            Button(action: {
                viewModel.login()
            }) {
                Text("Iniciar sesión")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            .padding()

            if viewModel.isAuthenticated {
                Text("✅ Acceso permitido")
                    .foregroundColor(.green)
                    .padding()
            }

            Button("Registrarse") {
                showRegisterView = true
            }
            .foregroundColor(.blue)
            .padding()
        }
        .padding()
        .sheet(isPresented: $showRegisterView) {
            RegisterView()
        }
    }
}


🎯 Funcionamiento del Proyecto


📌 1. El usuario puede iniciar sesión con credenciales existentes.

📌 2. Si no tiene una cuenta, puede hacer clic en “Registrarse”.

📌 3. La pantalla de registro le permite ingresar un nuevo usuario y contraseña.

📌 4. Si el usuario ya existe, mostrará un error.

📌 5. Si el registro es exitoso, el usuario podrá iniciar sesión inmediatamente.


No hay comentarios