How to read WordPress Users and show Them with Flutter Web

The Content Management Platform – WordPress – also has User System inside. User Centered are almost all the Applications around the Internet. WordPress offers Administrative Visual Interface, Roles Editing and many more things integrated or offered as a plugin.  In this article I’m gonna explain how to read WordPress Users from the WP JSON Rest API and show Them with Flutter Web.

Security Considerations

In many systems – it is generally a bad practice and idea to expose data or information about the users. As one third of the Internet is powered By WordPress, the developers that support and improve the core cannot brake the compatibility and introduce big braking changes. It will be a fatal outcry. So the security is handled by several best practices, plugins or admin settings.

• IP Restriction, HTTP Authentication of the wp-login folder
• Brute Force Prevention
• User name and Email filters and services

The platform is Open Source and whenever an issue is found – it is fixed and published relatively fast. There are multiple delivery systems offered by clouds and hosting providers that bring new versions to installations all around the world automatically. I’ll probably explain more on User Management Topic and the subject of User Authentication and User Authorization in WordPress in another article.

Restrict Administrator Visibility

In this article I’m gonna point out only the need to hide the Administrators with the help of the following suggestions:
https://rudrastyh.com/wordpress/pre_user_query.html
https://wordpress.stackexchange.com/questions/252328/wordpress-4-7-1-rest-api-still-exposing-users

So, the JSON Rest – User Endpoint is http://<wp>/wp-json/wp/v2/users/[optional an id of a user]. You could hide this endpoint by the following snippet in the functions.php file present in the WordPress installation:

add_filter( 'rest_endpoints', function( $endpoints ){
    if ( isset( $endpoints['/wp/v2/users'] ) ) {
        unset( $endpoints['/wp/v2/users'] );
    }
    if ( isset( $endpoints['/wp/v2/users/(?P[\d]+)'] ) ) {
        unset( $endpoints['/wp/v2/users/(?P[\d]+)'] );
    }
    return $endpoints;
});

If loading of individual users should be allowed – the first part could be removed/commented. But, This will open the possibility to load also administrator accounts via hand coding URLs. To fix that additional code could restrict loading admins:

add_action('pre_user_query','rudr_completely_hide_user');
function rudr_completely_hide_user( $u_query ) { 
	// let's allow the hidden user to see himself
	$current_user = wp_get_current_user();
	if ($current_user->ID != 1) { // the user with ID = 1 for example
		global $wpdb;
		// just str_replace() the SQL query 
		$u_query->query_where = str_replace('WHERE 1=1', "WHERE 1=1 AND {$wpdb->users}.ID<>1", $u_query->query_where); // do not forget to change user ID here as well
	}
 
}

This is an option if the administrator is only one. For the case of multiple admins:

add_action('pre_user_query','rudr_hide_all_administrators');
function rudr_hide_all_administrators( $u_query ) { 
	// let's do the trick only for non-administrators
	$current_user = wp_get_current_user();
	if ( $current_user->roles[0] != 'administrator' ) { 
		global $wpdb;
		$u_query->query_where = str_replace(
			'WHERE 1=1', 
			"WHERE 1=1 AND {$wpdb->users}.ID IN (
				SELECT {$wpdb->usermeta}.user_id FROM $wpdb->usermeta 
					WHERE {$wpdb->usermeta}.meta_key = '{$wpdb->prefix}capabilities'
					AND {$wpdb->usermeta}.meta_value NOT LIKE '%administrator%')", 
			$u_query->query_where
		);
	}
}

The above code could probably be installed via plugins, but, as a tech-user, I have used this direct injection of functionality.

Loading WordPress User JSON

Loading the list of users may be practical, when they have accepted that their profile will be visible. This is applicable for the use cases of blogging, custom management system, social media or even e-commerce. The user’s list is located at the address https://<wp>/wp-json/wp/v2/users/. It has the following Data Model:

• id: Integer – the User Identifier
• name: String – self-explanatory
• description – the summary about the user entered in the User Profile page available after login (or entered by the administrator)
• url – user defined URL entered in the User Profile Visual Interface.
• link – the URL to the user profile within the WordPress Web Site
• avatar_urls – a Key-Value Object with key – the size (width=height) of the avatar and as value – the URL to the icon.

There are several other fields, but these are the most important. Here you have – a Flutter Web Demonstration of loading the users of a WordPress Site: https://programtom.com/dev_examples/wp_users/