Authorization Header

[jesolis1]

Hello friends, I am currently working on a project with GeoMoose. I am trying to modify the request that GeoMoose sends to MapServer in such a way that it adds an additional layer between both servers. My additional layer involves the use of JWT, so I need to include the "authorization" header with the value Bearer + token in the request generated by GeoMoose. Where is this adjustment? how do you do it?

[theduckylittle]

Hi! Welcome to the GeoMoose community!

I'm taking a look at what we might be able to do in order to support that workflow. We rely heavily on OpenLayers' sources and layers to handle the loading of layers. Which map-source types are you using for your site?

One of the issues with header-based authentication and Images is that the Image/<img/> elements do not really support setting headers.

I got into this a little bit and likely went a little too far for a quicky-fun experiement. Here's what I did...

1. Updated index.html to include the openlayer's CDN version. This was necessary as we don't export OpenLayers' individual modules:

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript" src="../geomoose/dist/geomoose.min.js"></script>
    <script type="text/javascript" src="./custom-wms.js"></script>
    <script type="text/javascript" src="../geomoose/dist/services/identify.js"></script>
    <script type="text/javascript" src="../geomoose/dist/services/search.js"></script>
    <script type="text/javascript" src="../geomoose/dist/services/select.js"></script>
    <script type="text/javascript" src="../geomoose/dist/services/geocode-osm.js"></script>
    <script type="text/javascript" src="../geomoose/dist/services/findme.js"></script>
    <script type="text/javascript" src="../geomoose/dist/services/zoomto.js"></script>
    <script type="text/javascript" src="tabs.js"></script>
    <script type="text/javascript" src="app.js"></script>

2. Create a custom-wms.js type loader. (See Attached with .txt appended to satisfy the uploader)
   custom-wms.js.txt

3. Did a shim in app.js to use my new loader with the map:

    const MyMap = gm3.components.Map;
    MyMap.WrappedComponent.prototype._createLayer = MyMap.WrappedComponent.prototype.createLayer;
    MyMap.WrappedComponent.prototype.createLayer = function(mapSource) {
      if (mapSource.type === 'wms') {
        console.log("Create layer", mapSource);
        return createLayerCustomWMS(mapSource);
      }
      return this._createLayer(mapSource);
    };

    //app.add(gm3.components.Map, 'map', {});
    app.add(MyMap, 'map', {});

[theduckylittle]

This is a bit off the beaten path but 🤞 it's enough to help move forward.