Επικύρωση email στο Flutter

Πριν από την αποστολή των στοιχείων του χρήστη στον διακομιστή, η επικύρωση email είναι η καλύτερη πρακτική. Θα πρέπει να ελέγξουμε τη διεύθυνση email για να δούμε αν είναι έγκυρη ή όχι και να την εμφανίσουμε στον χρήστη. Για την επαλήθευση της διεύθυνσης email, μπορούμε να χρησιμοποιήσουμε ένα μοτίβο regEx, το οποίο είναι λίγο πιο περίπλοκο στην κατασκευή.

Αντί να χρησιμοποιήσουμε το μοτίβο regEx, μπορούμε να χρησιμοποιήσουμε το πιο cool πακέτο pub.dev που ονομάζεται email_validator για να επιτευχθεί το ίδιο αποτέλεσμα. Σε αυτό το άρθρο, θα εξετάσουμε το email_validator πακέτο.

Σχετικά με το email_validator:

Όπως αναφέρθηκε προηγουμένως, αυτή είναι μια απλή κλάση Dart για επικύρωση διευθύνσεων email χωρίς τη χρήση RegEx.

Προσθήκη εξάρτησης:

Για να χρησιμοποιήσουμε αυτό το πακέτο, θα πρέπει πρώτα να το προσθέσουμε στο αρχείο pubspec.yaml και μετά να εκτελέσουμε το pug get.

dependencies:
  flutter:
    sdk: flutter
  email_validator: ^2.0.1

Πακέτο εισαγωγής:

Μπορούμε να το χρησιμοποιήσουμε στον κώδικα Dart μετά την εγκατάσταση του πακέτου.

import 'package:email_validator/email_validator.dart';

Επικύρωση της διεύθυνσης email με email_validator :

Η στατική μέθοδος επικυρώνω() στο EmailValidator η τάξη θα χρησιμοποιηθεί για την επικύρωση της διεύθυνσης email. Επιστρέφει μια τιμή bool. Εάν η διεύθυνση email είναι έγκυρη, η τιμή που επιστράφηκε είναι αληθής. Διαφορετικά, η επιστρεφόμενη τιμή είναι ψευδής.

  static bool validate(String email,
      [bool allowTopLevelDomains = false, bool allowInternational = true])

Αν κοιτάξουμε τον παραπάνω κώδικα, μπορούμε να δούμε ότι το επικυρώνω(…) Η μέθοδος έχει τρεις παραμέτρους. Από τα τρία, θα πρέπει να περάσουμε τη διεύθυνση email ως τσίμπημα και τα άλλα δύο είναι προαιρετικά.

allowTopLevelDomains: Αν [allowTopLevelDomains] έχει οριστεί σε „true“, το εργαλείο επικύρωσης θα δέχεται διευθύνσεις με τομείς ανώτατου επιπέδου όπως „emai[email protected]“. Η προεπιλεγμένη τιμή είναι ψευδής‘.

επιτρέπει Διεθνές: Αν [allowInternational] έχει οριστεί σε „true“, το εργαλείο επικύρωσης θα επικυρώσει τη διεύθυνση email χρησιμοποιώντας τα νεότερα διεθνή πρότυπα ηλεκτρονικού ταχυδρομείου. Η προεπιλεγμένη τιμή είναι „true“.

const String email = '[email protected]';
    final bool isValid = EmailValidator.validate(email);
    print('Email is valid? ' + (isValid ? 'yes' : 'no'));

Απλώς περάστε τη διεύθυνση email ως συμβολοσειρά επικυρώνω(..), το οποίο επιστρέφει μια Boolean τιμή. Μπορούμε να ενημερώσουμε τη διεπαφή χρήστη με βάση αυτήν την τιμή. Ο παραπάνω κώδικας δείχνει ένα απλό παράδειγμα του τρόπου χρήσης του επικυρώνω(..) μέθοδος.

Εφαρμογή επικύρωσης email στη σελίδα σύνδεσης

Στη σελίδα σύνδεσης, υπάρχουν δύο πεδία κειμένου: ένα για τη διεύθυνση email και ένα για τον κωδικό πρόσβασης. Χρησιμοποιώντας το EmailValidator, προσθέσαμε επαλήθευση email στο πεδίο email.
Δημιουργήστε ένα νέο έργο Flutter, αντικαταστήστε τον παρακάτω κώδικα και εκτελέστε την εφαρμογή. Θα μάθουμε περισσότερα για την ιδέα.

import 'package:flutter/material.dart';
import 'package:email_validator/email_validator.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  LogInPage(),
    );
  }
}
class LogInPage extends StatefulWidget {
  @override
  _LogInPageState createState() => _LogInPageState();
}

class _LogInPageState extends State<LogInPage> {
   String _errorMessage = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Email validation'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(labelText: 'Email'),
              onChanged: (val){
                validateEmail(val);
              },
            ),
            TextFormField(
              keyboardType: TextInputType.visiblePassword,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                  print("Sing in Clicked");
                },
                child: Text('Sign in'),
              ),
            ),

            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(_errorMessage, style: TextStyle(color: Colors.red),),
            ),
          ],
        ),
      ),
    );
  }

  void validateEmail(String val) {
    if(val.isEmpty){
  setState(() {
    _errorMessage = "Email can not be empty";
  });
    }else if(!EmailValidator.validate(val, true)){
      setState(() {
        _errorMessage = "Invalid Email Address";
      });
    }else{
      setState(() {

        _errorMessage = "";
      });
    }
  }
}