ربط واتساب OTP مع Flutter — إرسال كود التحقق لتطبيقات الموبايل

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  uuid: ^4.3.3

// lib/services/whatsapp_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:uuid/uuid.dart';

class WhatsAppOtpService {
  static const String _baseUrl = 'https://connect-dashboard.ezycode.dev/connect/v1';
  final String apiKey;

  WhatsAppOtpService({required this.apiKey});

  /// Dispatch OTP via WhatsApp
  Future<Map<String, dynamic>> sendOtp({
    required String phoneNumber,
    required String code,
  }) async {
    final url = Uri.parse('$_baseUrl/messages');
    final idempotencyKey = 'flutter_${const Uuid().v4()}';

    final response = await http.post(
      url,
      headers: {
        'Authorization': 'Bearer $apiKey',
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Idempotency-Key': idempotencyKey,
      },
      body: jsonEncode({
        'to': phoneNumber,
        'type': 'text',
        'text': 'رمز التحقق لتطبيقك هو: $code. لا تشاركه مع أي شخص.',
      }),
    );

    final data = jsonDecode(response.body);

    if (response.statusCode >= 200 && response.statusCode < 300) {
      return {
        'success': true,
        'messageId': data['data']['id'],
        'status': data['data']['status'],
      };
    } else {
      return {
        'success': false,
        'statusCode': response.statusCode,
        'error': data['message'] ?? 'Failed to dispatch OTP',
      };
    }
  }
}

// lib/screens/otp_verification_screen.dart
import 'package:flutter/material.dart';
import '../services/whatsapp_service.dart';

class OtpVerificationScreen extends StatefulWidget {
  final String phoneNumber;
  const OtpVerificationScreen({Key? key, required this.phoneNumber}) : super(key: key);

  @override
  State<OtpVerificationScreen> createState() => _OtpVerificationScreenState();
}

class _OtpVerificationScreenState extends State<OtpVerificationScreen> {
  final TextEditingController _otpController = TextEditingController();
  bool _isLoading = false;

  void _verifyOtp() {
    // Validate OTP against your authentication backend
    final code = _otpController.text.trim();
    if (code.length == 6) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('تم التحقق بنجاح!')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('التحقق عبر واتساب')),
      body: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'أدخل رمز التحقق المرسل إلى: ${widget.phoneNumber}',
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const SizedBox(height: 20),
            TextField(
              controller: _otpController,
              keyboardType: TextInputType.number,
              maxLength: 6,
              textAlign: TextAlign.center,
              style: const TextStyle(fontSize: 24, letterSpacing: 8, fontWeight: FontWeight.bold),
              decoration: const InputDecoration(
                hintText: '------',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _isLoading ? null : _verifyOtp,
              child: const Text('تأكيد الرمز'),
            ),
          ],
        ),
      ),
    );
  }
}