Gmail API with React

134

13 июня 2019, 07:30

Пытаюсь построить приложение используя gmail api на react. Для авторизации использую библиотеку "react-google-login",

 export default class App extends Component {
  service = new Service();
  render() {
    const responseGoogle = (response) => {
      this.service.getMessagesList();
    }
    return (
      <div>
          <GoogleLogin
    clientId="YOUR_ID.apps.googleusercontent.com"
    buttonText="Login"
    onSuccess={responseGoogle}
  />

после авторизации пытаюсь через fetch получить список своих email используя google api https://developers.google.com/gmail/api/v1/reference/users/messages/list Но сервер возвращает мне 401 ошибку.

код моего фетч запроса

 export default class Service {
    _apiBase = "https://www.googleapis.com/gmail/v1/users/me";
    async getResource(url) {
      const res = await fetch(`${this._apiBase}${url}`);
      if (!res.ok) {
        throw new Error(`Could not fetch ${url}, received ${res.status}`);
      }
      const body = await res.json();
      return body;
    }
    getMessagesList = async () => {
      const list = await this.getResource(`/messages`);
      return list;
    };

Ошибка:

Answer 1

Специальное значение me может использоваться для указания аутентифицированного пользователя. Однако код ответа на статус ошибки 401 - указывает, что запрос не был применен, поскольку ему не хватает действительных учетных данных для целевого ресурса, попробуйте передать туда userId вместо указания me и посмотрите, что придет в ответ.

Если Вы авторизовались - это конечно же хорошо, но чтобы полноценно пользоваться Google API - необходимо на основании полученных авторизационных данных сконфигурировать API, чтобы можно было выполнять команды. Вот тут есть пример: Browser Quickstart. Код из примера:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Gmail API Quickstart</title> 
    <meta charset="utf-8" /> 
  </head> 
  <body> 
    <p>Gmail API Quickstart</p> 
 
    <!--Add buttons to initiate auth sequence and sign out--> 
    <button id="authorize_button" style="display: none;">Authorize</button> 
    <button id="signout_button" style="display: none;">Sign Out</button> 
 
    <pre id="content" style="white-space: pre-wrap;"></pre> 
 
    <script type="text/javascript"> 
      // Client ID and API key from the Developer Console 
      var CLIENT_ID = '<YOUR_CLIENT_ID>'; 
      var API_KEY = '<YOUR_API_KEY>'; 
 
      // Array of API discovery doc URLs for APIs used by the quickstart 
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"]; 
 
      // Authorization scopes required by the API; multiple scopes can be 
      // included, separated by spaces. 
      var SCOPES = 'https://www.googleapis.com/auth/gmail.readonly'; 
 
      var authorizeButton = document.getElementById('authorize_button'); 
      var signoutButton = document.getElementById('signout_button'); 
 
      /** 
       *  On load, called to load the auth2 library and API client library. 
       */ 
      function handleClientLoad() { 
        gapi.load('client:auth2', initClient); 
      } 
 
      /** 
       *  Initializes the API client library and sets up sign-in state 
       *  listeners. 
       */ 
      function initClient() { 
        gapi.client.init({ 
          apiKey: API_KEY, 
          clientId: CLIENT_ID, 
          discoveryDocs: DISCOVERY_DOCS, 
          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(error) { 
          appendPre(JSON.stringify(error, null, 2)); 
        }); 
      } 
 
      /** 
       *  Called when the signed in status changes, to update the UI 
       *  appropriately. After a sign-in, the API is called. 
       */ 
      function updateSigninStatus(isSignedIn) { 
        if (isSignedIn) { 
          authorizeButton.style.display = 'none'; 
          signoutButton.style.display = 'block'; 
          listLabels(); 
        } else { 
          authorizeButton.style.display = 'block'; 
          signoutButton.style.display = 'none'; 
        } 
      } 
 
      /** 
       *  Sign in the user upon button click. 
       */ 
      function handleAuthClick(event) { 
        gapi.auth2.getAuthInstance().signIn(); 
      } 
 
      /** 
       *  Sign out the user upon button click. 
       */ 
      function handleSignoutClick(event) { 
        gapi.auth2.getAuthInstance().signOut(); 
      } 
 
      /** 
       * Append a pre element to the body containing the given message 
       * as its text node. Used to display the results of the API call. 
       * 
       * @param {string} message Text to be placed in pre element. 
       */ 
      function appendPre(message) { 
        var pre = document.getElementById('content'); 
        var textContent = document.createTextNode(message + '\n'); 
        pre.appendChild(textContent); 
      } 
 
      /** 
       * Print all Labels in the authorized user's inbox. If no labels 
       * are found an appropriate message is printed. 
       */ 
      function listLabels() { 
        gapi.client.gmail.users.labels.list({ 
          'userId': 'me' 
        }).then(function(response) { 
          var labels = response.result.labels; 
          appendPre('Labels:'); 
 
          if (labels && labels.length > 0) { 
            for (i = 0; i < labels.length; i++) { 
              var label = labels[i]; 
              appendPre(label.name) 
            } 
          } else { 
            appendPre('No Labels found.'); 
          } 
        }); 
      } 
 
    </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> 
  </body> 
</html>

Нельзя просто так взять и отправить запрос через fetch и думать, что все будет работать. Необходимо сконфигурировать Google API со своими Client ID и API key, взятыми из консоли разработчика гугл.

Дополню еще одной ссылкой: Google API Client Libraries (JavaScript) - Getting Started. Собственно, я про это уже говорил, что для начала в Google API Console создаем себе API key посредством которого будем использовать API (нужно будет зарегистрировать свое приложение и в настройках получить по окончании ключ). Если вы не сконфигурировали API, то работать он не будет. Нужно сконфигурировать API, а потом после авторизации из полученных данных доставать userId и передавать в запросах.