OWC-109 add credential support in request uri

Author: merelacato

build/blocks/owc-openkaarten/streetmap/client.js

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '238d3706dda66628db65');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'b07efb091b84c9d85a0d');

build/blocks/owc-openkaarten/streetmap/client.js.map

@@ -1,5 +1,5 @@
 {
-    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=e786a6b8c0f53136dc9e14b1a90ef6f6",
+    "/blocks/owc-openkaarten/streetmap/client.js": "/blocks/owc-openkaarten/streetmap/client.js?id=d71a5f1e0878dc31192e22e93b9b40f1",
     "/blocks/owc-openkaarten/streetmap/style.css": "/blocks/owc-openkaarten/streetmap/style.css?id=031a35b0877942f8d8adeaff25000917",
     "/blocks/owc-openkaarten/streetmap/editor.css": "/blocks/owc-openkaarten/streetmap/editor.css?id=f4316f0723fb86e3b028a9b448b1f3ae"
 }

build/index.asset.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Defines helper functions to strip user credentials from the given url.
+ *
+ * @package    Openkaarten_Frontend_Plugin
+ * @subpackage Openkaarten_Frontend_Plugin/Helpers
+ * @since      0.1.0
+ */
+
+if ( ! function_exists( 'openkaarten_frontend_plugin_strip_user_credentials' ) ) {
+	/**
+	 * Implements openkaarten_frontend_plugin_strip_user_credentials($url).
+	 *
+	 * @param string $url An url with credentials.
+	 *
+	 * @return string A stripped url without credentails
+	 */
+	function openkaarten_frontend_plugin_strip_user_credentials( $url ) {
+		// Parse the URL.
+		$parsed_url = parse_url( $url );
+
+		// Check if the URL contains a username and password.
+		if ( isset( $parsed_url['user'] ) && isset( $parsed_url['pass'] ) ) {
+			// Rebuild the URL without user and pass.
+			$stripped_url = ( isset( $parsed_url['scheme'] ) ? $parsed_url['scheme'] . '://' : '' ) .
+				( isset( $parsed_url['host'] ) ? $parsed_url['host'] : '' ) .
+				( isset( $parsed_url['path'] ) ? $parsed_url['path'] : '' ) .
+				( isset( $parsed_url['query'] ) ? '?' . $parsed_url['query'] : '' ) .
+				( isset( $parsed_url['fragment'] ) ? '#' . $parsed_url['fragment'] : '' );
+
+			return $stripped_url;
+		}
+
+		// If no username/password, return original URL.
+		return $url;
+	}
+}

build/index.js

@@ -49,7 +49,10 @@ public function __construct() {
 		 * Register all the hooks related to the admin area functionality of the plugin.
 		 */
 		new Admin();
-
+		/**
+		 * Register a REST API endpoint that enables authenticated dataset retrieval for frontend and backend use.
+		 */
+		new Proxy_Datasets_Endpoint();
 		/**
 		 * Register all hooks related to the public-facing functionality of the plugin.
 		 */

build/mix-manifest.json

@@ -0,0 +1,95 @@
+<?php
+/**
+ * Proxy API Endpoint Class
+ *
+ * Handles the REST API endpoint to proxy dataset requests.
+ *
+ * @since      0.1.0
+ *
+ * @package    Openkaarten_Frontend_Plugin
+ * @subpackage Openkaarten_Frontend_Plugin/Includes
+ */
+
+namespace Openkaarten_Frontend_Plugin\Includes;
+
+use WP_Error;
+use WP_REST_Request;
+use WP_REST_Response;
+
+/**
+ * Proxy API Endpoint Class.
+ *
+ * Registers a REST API endpoint to fetch datasets with basic authentication.
+ *
+ * @since      0.1.0
+ * @package    Openkaarten_Frontend_Plugin
+ * @subpackage Openkaarten_Frontend_Plugin/Includes
+ */
+class Proxy_Datasets_Endpoint {
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		add_action( 'rest_api_init', [ $this, 'register_routes' ] );
+	}
+
+	/**
+	 * Register REST API route for proxying dataset requests.
+	 */
+	public function register_routes() {
+		register_rest_route(
+			'openkaarten-frontend-plugin/v1',
+			'/proxy-datasets',
+			[
+				'methods'             => 'POST',
+				'callback'            => [ $this, 'fetch_dynamic_datasets' ],
+				'permission_callback' => '__return_true',
+			]
+		);
+	}
+
+	/**
+	 * Fetch dynamic datasets from a specified endpoint.
+	 *
+	 * @param WP_REST_Request $request The REST API request.
+	 * @return WP_Error|WP_REST_Response The response or WP_Error on failure.
+	 */
+	public function fetch_dynamic_datasets( WP_REST_Request $request ) {
+		$url      = esc_url_raw( $request->get_param( 'url' ) );
+		$username = sanitize_text_field( $request->get_param( 'username' ) );
+		$password = sanitize_text_field( $request->get_param( 'password' ) );
+
+		// Validate URL parameter.
+		if ( ! $url ) {
+			return new WP_Error( 'missing_params', 'URL is missing or invalid', [ 'status' => 400 ] );
+		}
+
+		// Set up the request with Basic Authentication headers.
+		$response = wp_remote_get(
+			$url,
+			[
+				'headers' => [
+					'Authorization' => 'Basic ' . base64_encode( "$username:$password" ),
+					'Content-Type'  => 'application/json',
+				],
+			]
+		);
+
+		// Handle errors in the response.
+		if ( is_wp_error( $response ) ) {
+			error_log( 'Fetch error: ' . $response->get_error_message() );
+			return new WP_Error( 'fetch_error', 'Failed to fetch data', [ 'status' => 500 ] );
+		}
+
+		$status_code = wp_remote_retrieve_response_code( $response );
+		if ( 200 !== $status_code ) {
+			error_log( 'Unexpected HTTP status code: ' . $status_code );
+			return new WP_Error( 'http_error', "HTTP request failed with status $status_code", [ 'status' => $status_code ] );
+		}
+
+		$body = wp_remote_retrieve_body( $response );
+
+		return rest_ensure_response( json_decode( $body ) );
+	}
+}

functions/openkaarten-frontend-plugin-strip-credentials.php

@@ -6,7 +6,7 @@ import { __ } from "@wordpress/i18n";
 export default function Edit({ attributes, setAttributes }) {
     const [isTypingUrl, setIsTypingUrl] = useState(false);
     const [datasets, setDatasets] = useState(null);
-    const [selectedDatasets, setSelectedDatasets] = useState( attributes.selected_datasets );
+    const [selectedDatasets, setSelectedDatasets] = useState(attributes.selected_datasets);
     const isValidURL = useMemo(() => {
         try {
             new URL(attributes.rest_uri);
@@ -18,18 +18,49 @@ export default function Edit({ attributes, setAttributes }) {
 
     useEffect(() => {
         if (isValidURL) {
-            fetch(`${attributes.rest_uri}/wp-json/owc/openkaarten/v1/datasets?_locale=default`, {
-                method: 'GET',
-                // credentials: 'omit'  // Explicitly omit credentials (no cookies)
+            const { username, password, url } = stripCredentialsFromUrl(attributes.rest_uri);
+
+            fetch('/wp-json/openkaarten-frontend-plugin/v1/proxy-datasets', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    url: `${url}wp-json/owc/openkaarten/v1/datasets?_locale=default`,
+                    username,
+                    password,
+                }),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Error status: ${response.status}`);
+                }
+                return response.json();  // Initial parsing attempt.
             })
-                .then(response => response.json())
-                .then(data => {
+            .then(data => {
+
+                // Check if data is a string and might need additional parsing.
+                if (typeof data === "string") {
+                    try {
+                        data = JSON.parse(data);  // Parse again if it's a JSON string.
+                    } catch (error) {
+                        console.error('Error parsing nested JSON:', error);
+                        setDatasets([]);
+                        return;
+                    }
+                }
+
+                if (data && data.type === "DatasetCollection" && Array.isArray(data.datasets)) {
                     setDatasets(data.datasets);
-                })
-                .catch(error => {
-                    console.error('Fetching datasets failed', error);
-                    setDatasets([]);
-                });
+                } else {
+                    console.error("Unexpected response format or 'datasets' is not an array.");
+                    setDatasets([]);  // Fallback to empty array if structure is unexpected.
+                }
+            })
+            .catch(error => {
+                console.error('Fetching datasets failed:', error.message);
+                setDatasets([]);
+            });
         }
     }, [attributes.rest_uri, isValidURL]);
 
@@ -126,3 +157,26 @@ export default function Edit({ attributes, setAttributes }) {
         </>
     );
 }
+
+/**
+ * Strip username and password from the given URL and return sanitized URL.
+ *
+ * @param {string} url - The original URL with credentials.
+ * @returns {{ username: string, password: string, url: string }} - Returns username, password, and sanitized URL.
+ */
+function stripCredentialsFromUrl(url) {
+    try {
+        const parsedUrl = new URL(url);
+        const username = parsedUrl.username || '';
+        const password = parsedUrl.password || '';
+
+        // Strip username and password
+        parsedUrl.username = '';
+        parsedUrl.password = '';
+
+        return { username, password, url: parsedUrl.toString() };
+    } catch (error) {
+        console.error("Invalid URL provided:", error);
+        return { username: '', password: '', url }; // Return empty credentials if the URL is invalid
+    }
+}