使用WordPress凭据登录Flutter

Question

我是一个Dart和WordPress的初学者，我希望能得到一些关于如何实现下列想法的思路或者知道这个想法是否可行：

我有一个WordPress页面，并已经设置了用户区域，我开发了一个Flutter应用程序，只希望我的WordPress页面的某些类型的用户才能访问。因此，我考虑在我的应用程序中实现一个登录页面，并使用WordPress进行身份验证，这种方法可行吗？是否有任何代码片段或页面可以帮助我实现？

谢谢

- victorpbr

---

您需要在WordPress中启用Web服务，请阅读此文章以开始 https://developer.wordpress.org/rest-api/using-the-rest-api/authentication/#authentication-plugins - EdHuamani

Answer 1

将以下代码添加到您的WordPress中（可以通过（子）主题的functions.php或创建并启用自己的插件来实现）：

add_action('rest_api_init', 'remoteLogin');

public static function remoteLogin($request = [])
{
    register_rest_route('remote-login', 'login', array(
        'methods' => 'POST',
        'callback' => 'restUserLogin',
    ));
}

function restUserLogin($request = [])
{
    $response = [
        'success' => false,
        'message' => 'Login failed'
    ];
    $status_code = 403;
    $parameters = $request->get_json_params();
    $username = sanitize_text_field($parameters['username']);
    $password = sanitize_text_field($parameters['password']);

    $user = null;
    if (!empty($username) && !empty($password)) {
        $user = wp_authenticate($username, $password);
    }

    if ($user instanceof WP_User) {
        $response['success'] = true;
        $response['message'] = 'Login successful';
        $status_code = 200;
    }

    return new WP_REST_Response($response, $status_code);
}

创建了一个名为/remote-login/login的新REST路由（您可以在register_rest_route调用中将其更改为任何您喜欢的内容）。新创建的REST路由也将列在https://YOUR_DOMAIN_HERE/wp-json/上。

接下来，您可以从Flutter应用程序内部POST用户名和密码，例如：

  var url = 'https://YOUR_DOMAIN_HERE/wp-json/remote-login/login';
  var body = jsonEncode({ 'username': 'USERNAME', 'password': 'SECRET' });
  http.post(url,
      headers: {"Content-Type": "application/json"},
      body: body
  ).then((http.Response response) {
      final int statusCode = response.statusCode;
      if (statusCode == 200) {
         // login successful...

在这个例子中，状态码可以是200或403。如果是200，则表示登录成功，因此无需查看响应JSON的成功部分。

- Damocles

---

运行得非常好。唯一的编辑是删除了public static，因为它会导致错误，显然只有在定义类时才使用。谢谢。 - victorpbr

如果我想进一步从WordPress中检索“用户”角色的参数，我该如何做？ - victorpbr

如果Flutter代码能更清晰一些，那就会帮助我很多，但我只想将Flutter代码转换为函数，但由于API调用，我对函数的返回类型有点困惑。 - Mycodingproject

Answer 2

使用WordPress作为Flutter应用程序身份验证的OAuth服务器

我建议使用一个将你的WordPress网站转换为OAuth服务器的WordPress插件。然后，你的Flutter应用程序可以使用其中许多OAuth软件包之一来验证用户。

WordPress OAuth服务器插件

尝试在Google上搜索“WordPress OAuth服务器插件”。与所有WordPress事物一样，有些选项是免费的，有些是付费的。

• https://wordpress.org/plugins/oauth2-provider/
• https://wordpress.org/plugins/miniorange-oauth-20-server/

Flutter OAuth软件包

• https://pub.dev/packages/flutter_appauth（我推荐这个）
• https://pub.dev/packages/oauth2（基本选择）

- Matthew Rideout

Answer 3

仅补充一下Damocles的答案，我需要做类似的事情来启动进程。

    var url = 'https://YOUR_DOMAIN_HERE/wp-json/remote-login/login';
    var authorization = 'Basic ' + base64Encode(utf8.encode('$username:$password'));
    var body = jsonEncode({'username': username, 'password': password});

    http.post(url,
            headers: {
              "Content-Type": "application/json",
              'Authorization': authorization
            },
            body: body)
        .then((http.Response response) {
      final int statusCode = response.statusCode;
      if (statusCode == 200) { 
      // things worked out! 

- Jonas Smith