2016-07-24 1 views
0

ArcGIS Online에서 일부 데이터에 액세스하려면 토큰이 필요한 HTML 파일이 있습니다. 별도의 JavaScript 파일이 서비스를 호출하고 토큰을 가져와야합니다. 그런 다음 토큰은 어떻게 든 HTML 파일로 전달해야합니다. 그 부분은 확실하지 않습니다. 어떤 경우 JavaScript 응답을 HTML로 가져 오는 방법

코드 :

자바 스크립트 파일 (GetAToken.js)

var request = require('request'); // npm install request 

// generate a token with your client id and client secret 
function getToken(callback) 
{ 
    request.post(
    { 
     url: 'https://www.arcgis.com/sharing/rest/oauth2/token/', 
     json: true, 
     form: 
     { 
      'f': 'json', 
      'client_id': '<<MY CLIENT_ID>>', 
      'client_secret': '<<MY CLIENT_SECRET>>', 
      'grant_type': 'client_credentials', 
      'expiration': '1440' 
     } 
    }, function (error, response, body) 
    { 
     console.log(body.access_token); 
     callback(body.access_token); 
    }); 
} 

그리고 HTML에서 관련 비트

<script src="GetAToken.js"></script> 
</head> 
<body onload="getToken()"> 
<div class="embed-container"> 
    <iframe width="500" 
      height="400" 
      frameborder="0" 
      scrolling="no" 
      marginheight="0" 
      marginwidth="0" 
      title="Test Map" src="//MyMap.maps.arcgis.com/apps/webappviewer/index.html?id=LongMapID?token=I_Need_My_Token_Here&amp;extent=1,-1,1,-1&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=true&amp;legend=true&amp;basemap_gallery=true&amp;disable_scroll=true&amp;theme=light"> 
    </iframe> 
</div> 

</body> 
</html> 

당신이 내 보면 HTML에서 div를 사용하면 토큰이 필요합니다. 자바 스크립트는 분명히 access_token라는 값을 반환하고, 사용 Node.js를

편집

새로운 GetAToken.js

const request = require('request'); // npm install request 
const express = require('express'); 
const app = express(); 

// generate a token with your client id and client secret 
//function getToken(callback) 
app.get('/GetAToken', (req, res) => { 
    request.post(
    { 
     url: 'https://www.arcgis.com/sharing/rest/oauth2/token/', 
     json: true, 
     form: 
     { 
      'f': 'json', 
      'client_id': '<<MY_CLIENT_ID>>', 
      'client_secret': '<<MY_CLIENT_SECRET>>', 
      'grant_type': 'client_credentials', 
      'expiration': '1440' 
     } 
    }, function (error, response, body) { 
     console.log(body.access_token); 
     callback(body.access_token); 
    }); 
}); 
app.listen(80); 

당신이있어

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Title</title> 
    <link href="https://esri.github.io/calcite-bootstrap/assets/css/calcite-bootstrap-open.min.css" rel="stylesheet"> 
    <style> 
     .footer 
     { 
      height: 6.25rem; 
     } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="https://esri.github.io/calcite-bootstrap/assets/js/bootstrap.min.js"></script> 
    <script src="https://js.arcgis.com/3.17/"></script> 
    <script src="GetAToken.js"></script> 
    <script type="text/javascript"> 

     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() 
     { 
      if(xhttp.readyState === 4 && xhttp.status === 200) 
      { 
       var responseJSON = JSON.parse(xhttp.responseText); 
       var token = responseJSON.token; 
       alert(token); 
      } 
     } 
     xhttp.open("GET", "GetAToken", true); 
     xhttp.send();  

    </script> 

</head> 
<body> 

    <style> 
     .embed-container 
     { 
      position: relative; 
      padding-bottom: 50%; 
      height: 0; 
      max-width: 100%; 
     } 
     .embed-container iframe, .embed-container object, .embed-container iframe 
     { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
     } 
     small 
     { 
      position: absolute; 
      z-index: 40; 
      bottom: 0; 
      margin-bottom: -15px; 
     } 
    </style> 
    <div class="embed-container"> 
     <iframe width="500" 
       height="400" 
       frameborder="0" 
       scrolling="no" 
       marginheight="0" 
       marginwidth="0" 
       title="Test Map" src="//MyMap.maps.arcgis.com/apps/webappviewer/index.html?id=MyLongID&amp;extent=1,-1,1,-1&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=true&amp;legend=true&amp;basemap_gallery=true&amp;disable_scroll=true&amp;theme=light"> 
     </iframe> 
    </div> 

</body> 
</html> 
+0

는'GetAToken' 서버 또는 클라이언트에서 실행되는 클라이언트에 서비스를 제공하기 전에 HTML에 토큰을 삽입하여이 문제를 해결할 수도 다음 명시? –

+0

확실하지 않습니다. 나는 JavaScript가 처음이다. 그것은 현재 내 HTML과 같은 폴더에 있으며, 결국 인터넷에서 실행되기를 원할 것입니다. – user25730

+0

비밀 키가 있으므로 서버에서 실행해야합니다. – alexi2

답변

1

업데이트 HTML을 작성 그 요청에 대한 응답을 arcgis에 클라이언트가 어떻게 든 사용할 수있게하려고합니다.

<script type="text/javascript"> 
    // You may want to move this to another file.. 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState === 4 && xhttp.status === 200) { 
      var responseJSON = JSON.parse(xhttp.responseText); 
      var token = responseJSON.token; 

      var iframe = document.querySelectorAll('iframe')[0] 
      iframe.src = "//MyMap.maps.arcgix.com/apps/webappviewer/index.html?id=LongMapID?token=" + token + "&amp;extent=1,-1,1,-1&amp;zoom=true&amp;scale=true&amp;search=true&amp;searchextent=true&amp;legend=true&amp;basemap_gallery=true&amp;disable_scroll=true&amp;theme=light" 
     } 
    } 
    xhttp.open("GET", "http://yournodeserver.com/get-a-token", true); 
    xhttp.send(); 
</script> 

당신은 /get-a-token 경로를 보호하기 위해 어떤 작업을 수행 할 수 있습니다 : 서버에서 값을 얻기 위해 이런 일을 할 수있는 클라이언트에서 다음

const request = require('request'); // npm install request 
const express = require('express'); // npm install express 
const app = express(); 

app.get('/get-a-token', (req, res) => 
{ 
     request.post(
     { 
       url: 'https://www.arcgis.com/sharing/rest/oauth2/token/', 
       json: true, 
       form: 
       { 
         'f': 'json', 
         'client_id': '<<MY CLIENT_ID>>', 
         'client_secret': '<<MY CLIENT_SECRET>>', 
         'grant_type': 'client_credentials', 
         'expiration': '1440' 
       } 
     }, function (error, response, body) 
     { 
       console.log(body.access_token); 
       res.json({token: body.access_token}); 
     }); 
}); 

app.listen(80); 

예를 들면 : 사용하는 표현입니다 귀하의 사이트가 아닌 다른 사이트에서 액세스하는 것.

는 노드와 HTML 파일을 제공하는 경우/대신

+0

유감스럽게도 console.log는 init.js : 19에서'Uncaught Error : undefinedModule'로 돌아오고 HTML에서도'Uncaught ReferenceError : send가 정의되지 않았습니다'로 돌아옵니다. – user25730

+1

사용중인 코드를 게시 할 수 있습니까? console.log는 오류를 기록하지 않고 access_token의 값만 기록하지만 다른 오류가 발생할 수 있습니다. – carlevans719

+0

기본적으로 위의 코드를 사용하고 있습니다. 그러나 node.js를 올바르게 설치했는지 여부는 확실하지 않습니다. – user25730

관련 문제