add basic auth support for map server

Signed-off-by: Benstone Zhang <[email protected]>
nextcloud · Nov 26, 2023 · e79ee72 · e79ee72
1 parent f97c91c
commit e79ee72
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 10 deletions.
diff --git a/css/adminSettings.css b/css/adminSettings.css
@@ -4,7 +4,8 @@
 #graphhopperURL,
 #graphhopperAPIKEY,
 #mapboxAPIKEY,
-#maplibreStreetStyleURL
+#maplibreStreetStyleURL,
+#maplibreStreetStyleAuth
 {
     width: 400px;
 }
diff --git a/lib/Controller/PageController.php b/lib/Controller/PageController.php
@@ -122,7 +122,8 @@ private function addCsp($response): void {
                 'osrmCarURL',
                 'osrmFootURL',
                 'graphhopperURL',
-				'maplibreStreetStyleURL'
+				'maplibreStreetStyleURL',
+				'maplibreStreetStyleAuth'
             ];
             foreach ($urlKeys as $key) {
                 $url = $this->config->getAppValue('maps', $key);

diff --git a/lib/Controller/PublicUtilsController.php b/lib/Controller/PublicUtilsController.php
@@ -210,6 +210,7 @@ public function getOptionsValues(): DataResponse {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         foreach ($settingsKeys as $k) {

diff --git a/lib/Controller/UtilsController.php b/lib/Controller/UtilsController.php
@@ -151,6 +151,7 @@ public function getOptionsValues($myMapId=null): DataResponse {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         foreach ($settingsKeys as $k) {
@@ -175,6 +176,7 @@ public function setRoutingSettings($values): DataResponse {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         foreach ($values as $k=>$v) {

diff --git a/lib/Settings/AdminSettings.php b/lib/Settings/AdminSettings.php
@@ -47,6 +47,7 @@ public function getForm() {
             'graphhopperAPIKEY',
             'mapboxAPIKEY',
 			'maplibreStreetStyleURL',
+			'maplibreStreetStyleAuth',
             'graphhopperURL'
         ];
         $parameters = [];

diff --git a/src/adminSettings.js b/src/adminSettings.js
@@ -39,10 +39,12 @@ $(document).ready(function() {
         'input#graphhopperAPIKEY, ' +
         '#osrmDEMO, ' +
         'input#mapboxAPIKEY, ' +
-        'input#maplibreStreetStyleURL', function(e) {
-        var value = $(this).val();
-        setMapsRoutingSettings($(this).attr('id'), value);
-    });
+        'input#maplibreStreetStyleURL, ' +
+		'input#maplibreStreetStyleAuth',
+		function(e) {
+	        var value = $(this).val();
+    	    setMapsRoutingSettings($(this).attr('id'), value);
+    	});
     $('body').on('change', '#osrmDEMO', function(e) {
         var value = $(this).is(':checked') ? '1' : '0';
         setMapsRoutingSettings($(this).attr('id'), value);

diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -175,6 +175,7 @@ import 'mapbox-gl/dist/mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import 'mapbox-gl-leaflet/leaflet-mapbox-gl'
 import '@maplibre/maplibre-gl-leaflet'
+import ResourceType from 'maplibre-gl'
 import {
 	baseLayersByName,
 	overlayLayersByName,
@@ -784,18 +785,37 @@ export default {
 
 			if ((gl !== null) &&
 				('maplibreStreetStyleURL' in this.optionValues && this.optionValues.maplibreStreetStyleURL !== '')) {
+				let token = null
+				if ('maplibreStreetStyleAuth' in this.optionValues && this.optionValues.maplibreStreetStyleAuth !== '') {
+					token = this.optionValues.maplibreStreetStyleAuth
+				}
+
 				// wrapper to make tile layer component correctly pass arguments
 				L.myMaplibreGL = (url, options) => {
+					if (token !== null) {
+						token = 'Basic ' + btoa(token)
+						const oldTransform = options.transformRequest
+						options.transformRequest = (url, resourceType) => {
+							const param = oldTransform?.() || {}
+							param.url = param.url || url
+							if (resourceType === ResourceType.Tile) {
+								param.type = 'arrayBuffer'
+							}
+							param.headers = param.headers || {}
+							param.headers.Authorization = token
+							return param
+						}
+					}
 					return new L.maplibreGL(options)
 				}
 
 				this.allBaseLayers = {}
 				Object.keys(baseLayersByName).forEach(id => {
 					if (id === 'Open Street Map') {
-						let layer = Object.assign({}, baseLayersByName[id]);
+						const layer = Object.assign({}, baseLayersByName[id])
 						delete layer.url
 						layer.tileLayerClass = L.myMaplibreGL
-						layer.options = Object.assign({}, layer.options);
+						layer.options = Object.assign({}, layer.options)
 						layer.options.style = this.optionValues.maplibreStreetStyleURL
 						layer.options.minZoom = 0
 						layer.options.maxZoom = 22

diff --git a/templates/adminSettings.php b/templates/adminSettings.php
@@ -48,10 +48,12 @@
     </div><br/>
 
 	<h3><a href="https://maplibre.org/" title="<?php p($l->t('MapLibre Website')) ?>" target="_blank"><?php p($l->t('MapLibre settings')); ?></a></h3>
-	<p><?php p($l->t('Set the URL of style.json for OpenStreetMap Vector Tiles with MapLibre-GL-JS')); ?></p>
+	<p><?php p($l->t('Set the URL and Basic Authorization of style.json for OpenStreetMap Vector Tiles with MapLibre-GL-JS.')); ?></p>
 	<p><?php p($l->t('Leave empty to disable.')); ?></p><br/>
 	<div id="maplibre_street">
 		<label for="maplibreStreetStyleURL"><?php p($l->t('MapLibre Street style URL')); ?></label><br/>
-		<input id="maplibreStreetStyleURL" type="text" value="<?php if (isset($_['maplibreStreetStyleURL'])) p($_['maplibreStreetStyleURL']); ?>"/>
+		<input id="maplibreStreetStyleURL" type="text" value="<?php if (isset($_['maplibreStreetStyleURL'])) p($_['maplibreStreetStyleURL']); ?>"/><br/>
+		<label for="maplibreStreetStyleAuth"><?php p($l->t('Basic Authorization if required. Format is "user:password"')); ?></label><br/>
+		<input id="maplibreStreetStyleAuth" type="text" value="<?php if (isset($_['maplibreStreetStyleAuth'])) p($_['maplibreStreetStyleAuth']); ?>"/>
 	</div><br/>
 </div>