Google Earth Engine 客户端 Javascript API 身份验证不起作用

问题描述 投票:0回答:1

我已阅读

Google Earth Engine
客户端
Javascript API
文档。以下是开始使用 Google Earth Engine 的最少代码 Google Earth Engine 亲自尝试一下

我已使用我的 Google 帐户在此处注册了 Google Earth Engine。

我还遵循了 creating Project

Enabling Google Earth Engin API
Creating oAuth Client ID
的所有
先决条件
步骤以及设置一切。

我在这里面临的问题是代码没有按预期工作,当我进入控制台并看到网络选项卡时,我意识到有一个总是返回的 checkOrigin 请求

{
  blocked:true
  suppressed:false    
  valid:true
}

this问题相同。虽然我在为

Authorised JavaScript origins
创建
API
时在
Web Application
添加了原点。

NOTE: I am using wampserver and I have also added tested emails to the project.

这是我当前的代码:

<!DOCTYPE html>
<html>
  <head>
    <meta name="referrer" content="no-referrer-when-downgrade" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=myworkingGoolgeMapKey&callback=doNothing"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.336/earthengine-api.min.js"></script>
    <style>
      /* Set the size of the div element that contains the map. */
      #map-container {
        height: 400px;
        width: 100%;
        background-color: #eee;
      }
    </style>
  </head>
  <body>

    <!-- The "Sign in with Google" button, initially hidden. -->
    <input
      id="g-sign-in"
      type="image"
      src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
      onclick="onSignInButtonClick()"
      alt="Sign in with Google"
      hidden
    />

    <!-- Element where map will be added. -->
    <div id="map-container"></div>
    <script>
      function doNothing(){
        console.log("ok");
      }

      function errorInit(){
        console.log("initialize error");
      }

      // The OAuth Client ID from the Google Developers Console.
      const CLIENT_ID = "myclientidFromoAuth.apps.googleusercontent.com";
      
      // Initializes Maps JavaScript API and Earth Engine API, instructing the map
      // to pull tiles from Earth Engine and to overlay them on the map.
      function setUpMap() {
        // Hide the sign-in button.
        document.getElementById("g-sign-in").setAttribute("hidden", "true");
      
        // Initialize the Earth Engine API. Must be called once before using the API.
        ee.initialize();
      
        // Get a reference to the placeholder DOM element to contain the map.
        const mapContainerEl = document.getElementById("map-container");
      
        // Create an interactive map inside the placeholder DOM element.
        const embeddedMap = new google.maps.Map(mapContainerEl, {
          // Pan and zoom initial map viewport to Grand Canyon.
          center: {lng: -112.8598, lat: 36.2841},
          zoom: 9,
        });
      
        // Obtain reference to digital elevation model and apply algorithm to
        // calculate slope.
        const srtm = ee.Image("CGIAR/SRTM90_V4");
        const slope = ee.Terrain.slope(srtm);
      
        // Create a new tile source to fetch visible tiles on demand and display them
        // on the map.
        const mapId = slope.getMap({min: 0, max: 60});
        const tileSource = new ee.layers.EarthEngineTileSource(mapId);
        const overlay = new ee.layers.ImageOverlay(tileSource);
        embeddedMap.overlayMapTypes.push(overlay);
      }
      
      // Handles clicks on the sign-in button.
      function onSignInButtonClick() {
        // Display popup allowing the user to sign in with their Google account and to
        // grant appropriate permissions to the app.
        ee.data.authenticateViaPopup(setUpMap);
      }
      
      // If the user is signed in, display a popup requesting permissions needed to
     
      
      // If the user is signed in, display a popup requesting permissions needed to
      // run the app, otherwise show the sign-in button.
      $(document).ready(function(){
        ee.data.authenticateViaOauth(
          // The OAuth Client ID defined above.
          CLIENT_ID,
          // Callback invoked immediately when user is already signed in.
          setUpMap,
          // Show authentication errors in a popup.
          errorInit,
          // Request permission to only read and compute Earth Engine data on behalf of
          // user.
          /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine'],
          // Show sign-in button if reusing existing credentials fails.
          () => document.getElementById("g-sign-in").removeAttribute("hidden"),
          // Don't require ability to write and access Cloud Platform on behalf of the
          // user.
          /* opt_suppressDefaultScopes = */ true
        );
      });
      
    </script>
  </body>
</html>
javascript google-api google-oauth google-api-client google-earth-engine
1个回答
0
投票

无法发表评论,所以我将其作为答案发布。

基本上,该问题是由最近弃用 google auth 库引起的(类似问题:Google API 身份验证:阻止客户端的来源)。要解决这个问题,你可以等待lib维护者将auth库迁移到较新的库,或者自行迁移

我想你也可以向这个谷歌小组提出这个问题https://groups.google.com/g/google-earth-engine-developers,以便维护者意识到这一点

© www.soinside.com 2019 - 2024. All rights reserved.