[GIS] Basic Authentication in Leaflet

authenticationleaflettiles

I'm using Leaflet to display map tiles. The map tiles are loaded from a different site using basic authentication.
So the url template looks like this: L.tileLayer('https://username:password@example.com/tiles/{z}/{x}/{y}.png')

Unfortunately this results in map tiles not loading, since e.g. Internet Explorer just ignores the username and password in web site adresses.

Is there a way to succesfully authenticate the Leaflet map tile requests without using a proxy but still using basic authentication?

Best Answer

Without knowing the tile provider, hard to tell how to best to structure the URL call. A workaround could simply be to use a similar tile service... here's a bunch that show both preview and the L.tileLayer configurations:

https://leaflet-extras.github.io/leaflet-providers/preview/

Related Solutions

OpenLayers Authentication – Using HTTP Basic Authentication with OpenLayers

The solution we ended up with was to add an authenticating proxy server between the OpenLayers client and the backend WMS service. So instead of connecting directly to the WMS service the OpenLayers client connects to a proxy server which adds the required authentication headers to the requests.

Example code for creating the layers:

var layer = new OpenLayers.Layer.WMS( "background", "http://myproxyaddress.com/23ergwe435dw3463", {layers: 'basic'} );

Example Apache proxy configuration:

ProxyRequests     Off
ProxyPreserveHost On
SSLProxyEngine On
<Proxy *>
    Order deny,allow
    Allow from all
</Proxy>
SetEnvIf Request_URI "23ergwe435dw3463" wms_provider_name
RequestHeader set Authorization: "Basic Xk12BLdVNzUo5UGl0po5Y" env=wms_provider_name
ProxyPass         /23ergwe435dw3463  https://wmsprovideraddress.com
ProxyPassReverse  /23ergwe435dw3463  https://wmsprovideraddress.com

You can have multiple proxy configurations using this style.

What you should put inside the Authorization quotes is just the base-64 encoding of the string "username:password" (without the quotes). For more information see this link: https://stackoverflow.com/questions/567814/apache2-reverse-proxy-to-an-end-point-that-requires-basicauth-but-want-to-hide-t

[GIS] an appropriate tileLayer source for tiles served on an apache localhost through leaflet

Your problem is that you referenced {s} in your code but you dont have subdomains installed. The official OSM has 3 different subdomains for that: http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png where {s} = a,b and c. So you should create at least one subdomain (set a DNS server and configure apache2 properly). But you can use it without subdomains. They use it because of heavy loads. When a.tile.openstreetmap.org is offline the second 'b' is still active because it exists on a different server and wont cause any problem in service.

PS: Don't forget to activate mod_rewrite in apache2 configuration too.

Best Answer

Related Solutions

OpenLayers Authentication – Using HTTP Basic Authentication with OpenLayers

[GIS] an appropriate tileLayer source for tiles served on an apache localhost through leaflet

Related Question