Как правильно управлять контактами, используя Контакты API на нашем сайте? - PullRequest
Новая
       24

Как правильно управлять контактами, используя Контакты API на нашем сайте?

0 голосов
/ 06 марта 2020

Я пытался интегрировать API контактов Google для управления контактами на моем веб-сайте.

Я сделал следующее:

  1. Я создал приложение в Google консоль разработчика и добавили http://localhost:4200 в качестве URI и авторизованных URI перенаправления.
  2. Включен «API контактов».
  3. Я добавил следующее в свой index.html (заменил {clientID} с моим оригинальным идентификатором клиента (конечно): 
  <script>
    function loadAuthClient() {
      gapi.load('auth2', function() {
        gapi.auth2.init({
          client_id: '{clientID}'
        }).then(() => {
          console.log("success");
        }).catch(err => {
          console.log(err);
        });
      });
    }
  </script>
  <script src="https://apis.google.com/js/platform.js?onload=loadAuthClient" async defer></script>
  <meta name="google-signin-client_id" content="{clientID}">
Вы успешно вошли в систему: 
    gapi.auth2.getAuthInstance().signIn().then(() => {
      console.log("Logged in")
    }).catch(err => {
      console.log(err);
    });
Попытка извлечения контактов с помощью следующего: 
    var user = gapi.auth2.getAuthInstance().currentUser.get();
    var idToken = user.getAuthResponse().id_token;
    var endpoint = `https://www.google.com/m8/feeds/contacts/`;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken));
    xhr.setRequestHeader("Gdata-Version", "3.0");
    xhr.onreadystatechange = function () {
      if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
        window.alert(xhr.responseText);
      }
    };
    xhr.send();

Но я получаю сообщение об ошибке:

Доступ к XMLHttpRequest в 'https://www.google.com/m8/feeds/contacts/?access_token= {Я удалил токен доступа} 'из источника' http://localhost: 4200 'был заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: Нет' Access-Control-Allow Заголовок -Origin 'присутствует на запрашиваемом ресурсе.

Может кто-нибудь подсказать мне, где я ошибаюсь?

1 Ответ

0 голосов
/ 07 марта 2020

Мой первоначальный ответ был неверным. Фактический ответ намного проще.

На шаге 4 попробуйте изменить конечную точку: 

var endpoint = `https://www.google.com/m8/feeds/contacts/default/full`;

В моих локальных тестах это привело к ожидаемому ответу.

Другое предложение заключается в добавлении alt=json на ваш запрос, так что вы можете легко проанализировать JSON полезной нагрузки. В противном случае вы получите неприятную XML полезную нагрузку в ответе.

Вот обновленный шаг 4 с этими изменениями: 

var endpoint = `https://www.google.com/m8/feeds/contacts/default/full`;
var xhr = new XMLHttpRequest();
xhr.open('GET', endpoint + '?access_token=' + encodeURIComponent(idToken) + '&alt=json');
xhr.setRequestHeader("Gdata-Version", "3.0");
xhr.onreadystatechange = function () {
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    window.alert(xhr.responseText);
  }
};
xhr.send();

Вот мой первоначальный ответ, на всякий случай это помогает кому-то еще.

Я подозреваю, что вам нужно будет добавить http://localhost:4200 в ваш список "Авторизованных JavaScript происхождений" для OAuth-клиента, который вы используете.

Измените свой идентификатор клиента OAuth 2.0 и добавьте URI к Javascript источникам, как показано ниже: OAuth client with a Javascript origin

Другой раздел на эта страница, URI авторизованного перенаправления, разрешает перенаправлять поток OAuth только обратно в ваше веб-приложение. Часто ваш сервер веб-приложений фактически использует API-интерфейсы, поэтому Google автоматически не разрешает CORS-доступ к этим API-интерфейсам для обеспечения безопасности.

...