Flutter密码强度评估插件zxcvbn的使用

Flutter密码强度评估插件zxcvbn的使用

1. 简介

zxcvbn-dart 是一个用于评估密码强度的Dart库，灵感来源于密码破解工具，由DropBox开发。这个项目是原始CoffeeScript版本的Dart移植版，适用于Flutter和其他Dart项目。

2. 使用方法

zxcvbn-dart 接受一个密码输入，并返回一个0到4的评分，表示密码的强度。评分越高，密码越强。此外，它还会提供一些关于如何改进密码的建议。

3. 完整示例Demo

以下是一个完整的Flutter示例，展示了如何使用 zxcvbn-dart 来评估密码强度，并在UI中显示结果。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Password Strength Checker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PasswordStrengthChecker(),
    );
  }
}

class PasswordStrengthChecker extends StatefulWidget {
  @override
  _PasswordStrengthCheckerState createState() => _PasswordStrengthCheckerState();
}

class _PasswordStrengthCheckerState extends State<PasswordStrengthChecker> {
  final TextEditingController _passwordController = TextEditingController();
  String _password = '';
  int _score = -1;
  String _warning = '';
  List<String> _suggestions = [];

  final Zxcvbn _zxcvbn = Zxcvbn();

  void _evaluatePassword(String password) {
    final result = _zxcvbn.evaluate(password);

    setState(() {
      _password = result.password;
      _score = result.score;
      _warning = result.feedback.warning ?? '';
      _suggestions = result.feedback.suggestions ?? [];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Password Strength Checker'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _passwordController,
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Enter your password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.check),
                  onPressed: () {
                    _evaluatePassword(_passwordController.text);
                  },
                ),
              ),
            ),
            SizedBox(height: 20),
            if (_score != -1)
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Password: $_password',
                    style: TextStyle(fontSize: 18),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'Score: $_score',
                    style: TextStyle(
                      fontSize: 18,
                      color: _getScoreColor(_score),
                    ),
                  ),
                  SizedBox(height: 10),
                  if (_warning.isNotEmpty)
                    Text(
                      'Warning: $_warning',
                      style: TextStyle(fontSize: 16, color: Colors.red),
                    ),
                  SizedBox(height: 10),
                  if (_suggestions.isNotEmpty)
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Suggestions:',
                          style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                        ),
                        ..._suggestions.map((suggestion) => Text('- $suggestion')),
                      ],
                    ),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Color _getScoreColor(int score) {
    switch (score) {
      case 0:
        return Colors.red;
      case 1:
        return Colors.orange;
      case 2:
        return Colors.yellow;
      case 3:
        return Colors.lightGreen;
      case 4:
        return Colors.green;
      default:
        return Colors.grey;
    }
  }
}

4. 代码说明

• Zxcvbn 类：这是 zxcvbn-dart 库的核心类，用于评估密码强度。
• evaluate 方法：该方法接受一个密码字符串作为输入，并返回一个 Result 对象，其中包含密码的评分、警告信息和改进建议。
• Result 对象：包含密码的评分（0-4）、警告信息和改进建议。
• UI部分：
  • 使用 TextField 来接收用户输入的密码。
  • 使用 IconButton 来触发密码评估。
  • 根据评分结果，动态更新UI，显示密码强度、警告信息和改进建议。
  • 使用 _getScoreColor 方法根据评分来设置不同的颜色，直观地反映密码的强度。

5. 依赖项

在 pubspec.yaml 文件中添加 zxcvbn 依赖：

dependencies:
  flutter:
    sdk: flutter
  zxcvbn: ^1.0.0