Flutter WordPress 应用的 JWT 认证
这个 Flutter 应用程序旨在通过 Tmeister/wp-api-jwt-auth 存储库获取的 JWT 身份验证 API 促进登录 WordPress 站点。该应用程序允许用户注册、登录和访问特定页面。它通过实施基于 JWT 令牌的身份验证，提供了安全且可扩展的架构。
特点
- 带 Flutter 的 JWT 身份验证应用
- 使用 WordPress API 服务登录 WordPress
- 已认证用户的令牌生成和验证
- 基于令牌的身份验证以访问受保护页面
- 与 WordPress API 集成以进行用户注册和登录
- 使用
shared_preferences进行数据存储 - 使用
secure_storage安全存储令牌
截图
注册屏幕
主屏幕
个人资料屏
图书页面
入门
请按照以下步骤在您的本地环境中运行该项目。
要求
- Flutter SDK
- 依赖项
安装
-
克隆项目
git clone https://github.com/nurullahturkoglu/flutter-jwt-auth-for-wordpress.git
-
安装必需的依赖项
flutter pub get
-
运行应用程序
flutter run
用法
下面，您将找到有关项目中文件用途的重要文件和详细信息。
身份验证中间件
auth_middleware.dart 文件用于启用页面的令牌验证。如果用户没有令牌、令牌已过期或提供了无效令牌，他们将被自动重定向到登录页面。
Future<void> validateToken() async {
bool isValid = await WordPressAuthMethods().validateUserToken();
if (!isValid) {
navigateToLoginPage();
return;
}
setState(() {
isAuthenticated = isValid;
});
}
WordPress 身份验证方法
wordpress_auth_methods.dart 文件处理 WordPress 登录、注册和验证过程。用户信息使用 shared_preferences 存储，而令牌使用 secure_storage 安全存储。如果令牌不可用或已过期，用户将被自动重定向到登录页面。
WordPress 登录函数
注意： ⚠️ 我对 Tmeister/wp-api-jwt-auth 存储库中的 jwt-authentication-for-wp-rest-api/public/class-jwt-auth-public.php 文件进行了一些修改。下面，您将找到添加到 generate_token 部分的代码片段
'user_id' => $user->data->ID,
'user_role' => $user->roles[0],
通过这样做，您可以像这样获得登录成功的响应
{
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.***",
"user_id": "13",
"user_email": "[email protected]",
"user_nicename": "Nurullah Turkoglu",
"user_display_name": "turkoglu1",
"user_role": "subscriber"
}
在
validate_token函数中，我添加了以下代码以更有效地检索用户 ID
'data' => [
'status' => 200,
'user_id' => $token->data->user->id,
],
如果令牌有效，您可以获得如下响应
{
"code": "jwt_auth_valid_token",
"data": {
"status": 200,
"user_id": "13"
}
}
WordPress 注册函数
我添加了一个作为 API 的注册函数，独立于 Tmeister/wp-api-jwt-auth 存储库。此注册函数允许您在 WordPress 中执行用户注册。如果您想激活注册过程，应将以下代码添加到插件的 api/public/class-jwt-auth-public.php 文件中的 add_api_routes() 函数
register_rest_route($this->namespace, '/register', array(
'methods' => 'POST',
'callback' => array($this, 'create_user'),
'permission_callback' => '__return_true',
));
此外，您需要创建 phpcreate_user() 函数
function create_user($request) {
$params = $request->get_params();
// Get the username and password
$username = sanitize_text_field($params['username']);
$password = sanitize_text_field($params['password']);
// Check if a user with the same username already exists
$existing_user = get_user_by('login', $username);
if ($existing_user) {
// A user with the same username already exists
$response = array(
'status' => 'error',
'message' => 'The username is already taken.',
);
} else {
// Create a new user
$user_id = wp_create_user($username, $password);
if (!is_wp_error($user_id)) {
// Successful registration
$response = array(
'status' => 'success',
'message' => 'User created successfully.',
'user_id' => $user_id,
);
} else {
// Error occurred
$error = $user_id->get_error_message();
$response = array(
'status' => 'error',
'message' => "Failed to create user. $error",
);
}
}
// Return the response
return $response;
}
通过这样做，您可以通过向地址 https://yourdomain.com/wp-json/jwt-auth/v1/register 发送 POST 请求以及以下 JSON 负载来创建新的成员资格
{
"username": "test123",
"password": "123"
}
主代码
项目的主文件包含以下代码
return MaterialApp(
title: 'JWT Auth Tutorial',
routes: {
'/login': (context) => const LoginPage(),
'/register': (context) => const RegisterPage(),
'/home': (context) => const AuthMiddleware(child: HomePage()),
'/book': (context) => const AuthMiddleware(child: BookPage()),
'/profile': (context) => const AuthMiddleware(child: ProfilePage()),
},
home: const LoginPage(),
);
上面的代码使用 AuthMiddleware 小部件将令牌验证添加到不同的页面。这确保了在访问某些页面之前会执行令牌验证。
鸣谢
使用 TMeister JWT Auth 在 WordPress 中生成令牌和验证令牌。
贡献
我们欢迎为本项目做出贡献！如果您想做出贡献，请遵循以下步骤
- Fork该存储库。
- 为您的功能或 bug 修复创建新分支。
- 进行更改并提交。
- 将您的更改推送到您的分叉存储库。
- 提交一个描述您的更改的拉取请求。
请确保您的贡献符合本项目的编码约定和指南。
许可证
本项目根据 MIT 许可证授权。有关详细信息，请参阅 LICENSE 文件。
