Google People API 空引用者（但引用者在控制台中设置）

Question

我正在尝试访问 Google People API 以为我的 Google App Engine 应用提供身份验证。

我收到关于空引用者的错误消息，但我在云控制台中设置了我的 HTTP 引用者

{
  "error": {
    "code": 403,
    "message": "Requests from referer \u003cempty\u003e are blocked.",
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.Help",
        "links": [
          {
            "description": "Google developer console API key",
            "url": "https://console.developers.google.com/project/824515690907/apiui/credential"
          }
        ]
      }
    ]
  }
}

这是我的gapi.js 文件：

  var apiKey = '<redacted>';
  var discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];

  var clientId = 'my-client-id.apps.googleusercontent.com';

  var scopes = 'profile';
  var authorizeButton = document.getElementById('authorize-button');
  var signoutButton = document.getElementById('signout-button');
  var mainDiv = document.getElementById('main');
  var editNav = document.getElementById('edit');
      authorizeButton.addEventListener("click", function(){ 
        handleAuthClick();
      });
      signoutButton.addEventListener("click", function(){
          handleSignoutClick();
      });
  function handleClientLoad() {
    // Load the API client and auth2 library
    gapi.load('client:auth2', initClient);
  }

function start() {

  gapi.client.init({
    'apiKey': apiKey,
    // clientId and scope are optional if auth is not required.
    'clientId': clientId,
    'scope': 'profile',
  }).then(function() {

    return gapi.client.request({
      'path': 'https://people.googleapis.com/v1/people/me?requestMask.includeField=person.names,person.emailAddresses',
      'headers': {'Content-Type': 'application/json','Referer': 'https://<my-app>.appspot.com/*'}
    })
  }).then(function(response) {
    console.log(response.result);
      updateSigninStatus(response);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
    authorizeButton.style.display = 'inline-block';
  });
};

gapi.load('client', start);
mainDiv.style.display = 'none';

/*functions*/
  function updateSigninStatus(response) {
    var name = response.result.names[0].givenName;
    var email = response.result.emailAddresses[0].value;
    authorizeButton.insertAdjacentHTML('beforebegin', '<span id="loggedinuser" rel="' + email + '">Logged in as ' + name + '</span>');
    authorizeButton.style.display = 'inline-block';
    }
}

  function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
    location.reload();
  }
  function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
    var loggedin = document.getElementById("loggedinuser");
    loggedin.parentNode.removeChild(loggedin);
    var userStatus = document.getElementById("user_status");
    userStatus.parentNode.removeChild(userStatus);
    location.reload();
  }

我阅读了另一个关于将引用者作为参数放入请求中的问题和答案，但我不知道该放在哪里。

谁能看到我的代码有什么问题？我有一个早期版本工作了一段时间，然后就出错了。

有谁知道 Google API 请求脚本的最新示例（Google 提供的 GitHub 上的那些不工作）。

更新

刚刚检查了网络标签中的标题

Request URL:https://content-people.googleapis.com/v1/people/me?requestMask.includeField=person.names,person.emailAddresses&alt=json&key=<myApiKey>
Request Method:GET
Status Code:401 
Remote Address:216.58.204.74:443
Referrer Policy:no-referrer-when-downgrade

根据this answer on superuser about referrers 和this answer on SO about a 403 error on a Google Maps API request。

Answer 1

gapi.js

  var apiKey = '<redacted>';
  var discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];

  var clientId = '<redacted>.apps.googleusercontent.com';
 var scopes = 'profile';
  var authorizeButton = document.getElementById('authorize-button');
  var signoutButton = document.getElementById('signout-button');
    var mainDiv = document.getElementById('main');
    var editNav = document.getElementById('edit');
  function handleClientLoad() {
    // Load the API client and auth2 library
    gapi.load('client:auth2', initClient);
    mainDiv.style.display = 'none';
  }
  function initClient() {
    gapi.client.init({
        apiKey: apiKey,
        discoveryDocs: discoveryDocs,
        clientId: clientId,
        scope: scopes
    }).then(function () {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }
  function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'block';
      makeApiCall();
    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
    }
  }
  function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
  }
  function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
  }
  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    gapi.client.people.people.get({
      'resourceName': 'people/me',
      'requestMask.includeField': 'person.names,person.emailAddresses'
    }).then(function(response) {
        var name = response.result.names[0].givenName;
        var email = response.result.emailAddresses[0].value;
        authorizeButton.insertAdjacentHTML('beforebegin', '<span id="loggedinuser" rel="' + email + '">Logged in as ' + name + '</span>');
        }
    });
  }

index.html

<script src="js/gapi.js"></script>
 <script async defer src="https://apis.google.com/js/api.js" 
  onload="this.onload=function(){};handleClientLoad()" 
  onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

改编自：https://github.com/google/google-api-javascript-client/blob/master/samples/authSample.html