Basic auth with OpenLayers 3

Question

I have OpenLayers embedded in a desktop application and I'm trying to request a WMS map layer from a server that requires authentication.

Because of the environment I can't have the popup that a browser would typically display to require authentication and that wouldn't be acceptable to a customer anyway.

For now I want to use the format of https://{username}:{password}@domain.com/wms?

If I pass that to OpenLayers as the url of a ol.source.TileWMS the requests have the username and password removed and I always see 401 errors returned and looking at the url the username and password has been stripped off.

can you use jquery to make the request? http://stackoverflow.com/a/5507289/2730610 — Timh, Apr 20 '16 at 16:08

score 0 · Accepted Answer · edited Oct 07 '21 at 13:35

0

You can try creating your layer with a tileUrlFunction.

var tileUrlFunction = function(tileCoord, pixelRatio, projection) {
  if (!tileCoord) { return ""; }

  var x = tileCoord[1];
  var y = tileCoord[2];
  var z = tileCoord[0];

  return 'https://{username}:{password}@localhost/map-tiles/' + z + '/' + x + '/' + y + '.png';
}

var layers = [
  new ol.layer.Tile({
    source: new ol.source.XYZ({
      tileUrlFunction: tileUrlFunction
    })
  })
];

EDIT: The use of embedded "user:password" authentication in the URL has been deprecated by RFC 3986, so this will no longer work with modern browsers.

edited Oct 07 '21 at 13:35

Community

1
1

answered Apr 23 '16 at 18:00

Jose Gómez

3,110
2
32
54

1

I found many browser will block this request owing to authentication credentials in the URL being deprecated. – Single Entity Jul 06 '17 at 18:22
1

Thanks, I was not aware of it. – Jose Gómez Jul 07 '17 at 08:54
2

You're welcome! It's a pain but make's sense. Consider using http headers instead perhaps. – Single Entity Jul 07 '17 at 09:07

Basic auth with OpenLayers 3

1 Answers1