Въведение:

В днешната дигитална ера изграждането на надеждни приложения изисква комбинация от мощни бекенд технологии и елегантни предни рамки. Една популярна комбинация е използването на Node.js като backend сървър и Flutter като frontend framework. В тази публикация в блога ще проучим как да интегрираме бекенд на Node.js с фронтенд на Flutter, за да създадем страница за вход. Ще предоставим инструкции стъпка по стъпка и примери за код както за бекенда, така и за предния компонент. Така че нека се потопим и научим как да обединим тези технологии!

Предпоставки:

Преди да започнем, уверете се, че имате инсталиран следния софтуер на вашата машина:

  1. Node.js: Посетете официалния уебсайт на Node.js (https://nodejs.org) и изтеглете най-новата стабилна версия.
  2. Flutter SDK: Инсталирайте Flutter, като следвате официалната документация (https://flutter.dev/docs/get-started/install).

Настройване на бекенда:

  1. Създайте нова директория за вашия бекенд проект Node.js и навигирайте в нея.
  2. Инициализирайте нов проект Node.js, като изпълните командата npm init -y.
  3. Инсталирайте необходимите зависимости, като изпълните npm install express bcrypt jsonwebtoken.
  4. Създайте нов файл с име app.js и го отворете в предпочитания от вас редактор на кодове.
  5. Добавете следния код, за да настроите основен Express сървър:
const express = require('express');
const bcrypt = require('bcrypt');
const jwt = require('jsonwebtoken');

const app = express();
app.use(express.json());

// Mock user data (replace with your own user authentication system)
const users = [
  { id: 1, username: 'user1', password: '$2b$10$9l1rjc5xsv3lR.5ghS0XquFbmN2f/2SL4CKugkAaEQZU4azAsqtcK' }, // password: 'password1'
  { id: 2, username: 'user2', password: '$2b$10$Fmdk6XkqzWcMZTG.M5NCxeDKF5wh3IlC57seegTJKe9hBxrl2HNZ.' }, // password: 'password2'
];

app.post('/login', (req, res) => {
  const { username, password } = req.body;

  // Find user by username
  const user = users.find((user) => user.username === username);

  if (!user) {
    return res.status(404).json({ error: 'User not found' });
  }

  // Compare passwords
  bcrypt.compare(password, user.password, (err, result) => {
    if (err) {
      return res.status(500).json({ error: 'Internal server error' });
    }

    if (!result) {
      return res.status(401).json({ error: 'Invalid password' });
    }

    // Generate JWT
    const token = jwt.sign({ id: user.id, username: user.username }, 'your_secret_key');

    // Return the token to the client
    res.json({ token });
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Обяснение:

  1. Започваме с импортиране на необходимите модули: express, bcrypt и jsonwebtoken.
  2. Ние дефинираме основен Express сървър и настройваме необходимия междинен софтуер за анализиране на входящи JSON данни.
  3. Маршрутът /login обработва заявката за влизане.
  4. Ние търсим потребителя по предоставеното потребителско име във фалшивите потребителски данни (вие бихте заменили това с вашата собствена система за удостоверяване на потребителя).
  5. Ако потребителят не бъде намерен, връщаме код за състояние 404.
  6. Използваме bcrypt.compare, за да сравним предоставената парола с хешираната парола, съхранена в потребителските данни.
  7. Ако паролите не съвпадат, връщаме код за състояние 401.
  8. Ако паролите съвпадат, ние генерираме JWT с помощта на jsonwebtoken.sign и включваме идентификатора и потребителското име на потребителя.
  9. Накрая изпращаме генерирания токен обратно на клиента.

Забележка: Не забравяйте да замените 'your_secret_key' със силен таен ключ за подписване на вашите JWT.

Настройване на интерфейса:

  1. Създайте нов проект Flutter, като изпълните командата flutter create my_app във вашия терминал.
  2. Навигирайте в директорията на проекта, като използвате cd my_app.
  3. Отворете файла lib/main.dart в предпочитания от вас редактор на код.
  4. Заменете съществуващия код със следния примерен код:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Page',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(),
    );
  }
}
class LoginPage extends StatelessWidget {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  void login() async {
    final response = await http.post(
      Uri.parse('http://localhost:3000/login'),
      body: {
        'email': emailController.text,
        'password': passwordController.text,
      },
    );
    if (response.statusCode == 200) {
      // Handle successful login
    } else {
      // Handle login error
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: emailController,
              decoration: InputDecoration(
                labelText: 'Email',
              ),
            ),
            TextField(
              controller: passwordController,
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
              ),
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

Обяснение:

  1. Кодът на интерфейса създава приложение Flutter с LoginPage изпълним модул, който съдържа прост формуляр за влизане.
  2. Функцията login изпраща POST заявка до /login маршрута на бекенда с въведените имейл и парола.
  3. Можете да обработвате отговора за влизане в блока if-else в рамките на функцията login.

Заключение:

Честито! Успешно сте интегрирали Node.js бекенд с Flutter frontend, за да създадете страница за вход. Тази комбинация ви позволява да създавате мощни и отзивчиви приложения. Можете допълнително да подобрите тази страница за вход чрез внедряване на функции като обработка на грешки, валидиране на формуляр и удостоверяване, базирано на токени. Не забравяйте да проучите допълнителни ресурси на Flutter и Node.js, за да разширите знанията си и да създадете още по-сложни приложения. Приятно кодиране!