Access private map in website without login using OAUTH2.0token

[rsharma]

Hi, i have created various maps and feature layers in arcgis online account all maps are public and i am accessing them...

But now as my website is live, for security reasons, i want to make those layers and map private to my website only but it should not display login window username and pwd for my website, instead i want to pass oauth 2.0 token and  then access my private maps.. 

Thanks in advance..

For example i just use the below map id which is public, but if i want to make it private then how to use it in my website using token generated by oauth  from my arcgis app so that it will not ask user name or password for each website user for map page everytime.

Currently i have generated toekns successfully from my arcgis online account.

var webmap = new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: "<?=$map_data_by_country['listing_map_id']?>"
}
});

Query: how to pass these tokens to access private maps without providing login credentials.. 

[rsharma]

Hi,

I had followed this example, JS Bin - Collaborative JavaScript Debugging  and it did worked, but it is hardcoded. 

i tried it in my app through this hardcoded it works . But when i tried this property of webmap using my app token and made my webapp private. this link return the below and when i tried to use in webmap it gives the error:

return JSON:

{"operationalLayers":[],"baseMap":{"baseMapLayers":[{"id":"World_Imagery_2017","layerType":"ArcGISTiledMapServiceLayer","url":"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer","visibility":true,"opacity":1,"title":"World Imagery"},{"id":"VectorTile_7259","type":"VectorTileLayer","layerType":"VectorTileLayer","title":"Hybrid Reference Layer","styleUrl":"https://cdn.arcgis.com/sharing/rest/content/items/30d6b8271e1849cd9c3042060001f425/resources/styles/root.json","isReference":true,"visibility":true,"opacity":1}],"title":"Imagery Hybrid"},"spatialReference":{"wkid":102100,"latestWkid":3857},"authoringApp":"WebMapViewer","authoringAppVersion":"8.1","version":"2.16"}

CODE::

esriRequest("https://www.arcgis.com/sharing/rest/content/items/mywebmapid/data?f=json&token=mytokengenerated").then(function(json) {
console.log(json);
const webmap = WebMap.fromJSON(json);

const view = new MapView({
map: webmap,
container: "viewDiv"
});

Error:

dojo.js:253 [esri.WebMap] #load() Failed to load web map d {name: "webmap:invalid-version", message: "Expected major version to be a number, but got ''", details: {…}}

I also tried it through other getJSON method and ajax method, it return the same error.

But when i tried to use hardcode return JSON directly to access my webmap, it works.. like below code

var webmapJSON={"operationalLayers":[],"baseMap":{"baseMapLayers":[{"id":"World_Hillshade_895","layerType":"ArcGISTiledMapServiceLayer","url":"https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer","visibility":true,"opacity":1,"title":"World Hillshade"},{"id":"VectorTile_6451","type":"VectorTileLayer","layerType":"VectorTileLayer","title":"World Topographic Map","styleUrl":"https://cdn.arcgis.com/sharing/rest/content/items/7dc6cea0b1764a1f9af2e679f642f0f5/resources/styles/root.json","visibility":true,"opacity":1},{"id":"geotiffs_6320","layerType":"ArcGISMapServiceLayer","url":"https://services.arcgisonline.co.nz/arcgis/rest/services/LINZ/geotiffs/MapServer","visibility":true,"opacity":1,"title":"NZ - LINZ Topographic","itemId":"126df938335049028779fbab6d298daf","showLegend":true}],"title":"Topographic"},"spatialReference":{"wkid":102100,"latestWkid":3857},"authoringApp":"WebMapViewer","authoringAppVersion":"8.1","version":"2.16"};
var webmap = WebMap.fromJSON(webmapJSON);

I don't understand where is the problem, i think they are not accessing my webmap but when i used this return hardcode, my app access these globallly used maps..??

also tried through this code..returns same error.

jQuery.ajax({
type : "GET",
async: false,
url : "https://www.arcgis.com/sharing/content/items/mywebmapid/data?f=json&token=mytokengenerated",
success: function(webmapJSON) {

webmap = WebMap.fromJSON(webmapJSON);
console.log(webmap);
//webJson=response;
}//End Success
});//End Ajax

Any help will be appreciable..

Thanks in advance...

[rsharma · Accepted solution]

HI

the above code is correct just need to parse json string.

jQuery.ajax({
type : "GET",
async: false,
url : "https://www.arcgis.com/sharing/content/items/mywebmapid/data?f=json&token=mytokengenerated",
success: function(webmapJSON) {

//parse json string here

webmap = WebMap.fromJSON(webmapJSON);

//webJson=response;
}//End Success
});//End Ajax

[rsharma]

But i need to find out how to toggle basmap through this method, till now i was using ids, now i am directly using json through restapi to create webmap. Earlier i was toggling like this, any function would be helpful.

let LINZ_Topographic_Eagle_NZ = new Basemap({portalItem: {id: "<?=$esri_map_id_nz_topo?>"}}); //NZ - LINZ Topographic

function setbasemap(basemap){

webmap.basemap = basemap;
}

// Click event on Topo Button
topoBtn.addEventListener('click', function(){

setbasemap(LINZ_Topographic_Eagle_NZ);
}
});

//Click event on Satellite button
satelliteBtn.addEventListener('click', function(){
setbasemap('satellite');
});

[JoshFields]

Hi,

I followed your example, but my webmap still prompts to login.

I receive the JSON properly, with the generated token, but then it pops up and asks me to login.

How are you doing the authentication?

I think that the generated token is only allowing the JSON to be received, it is not also allowing the map to be viewed with that received JSON.

How do you send the authentication to the webmap?

[rsharma]

yes it may happen sometime you can use through identity manager

token = {
'server': settings.countryLayerUrl,
'token': settings.gettoken,// put your token here
};
IdentityManager.registerToken(token);