文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将gmailapi的快速入门导出到angular 5组件？

问如何将gmailapi的快速入门导出到angular 5组件？
EN

Stack Overflow用户

提问于 2018-04-28 03:02:18

回答 1查看 494关注 0票数 0

我尝试了很多东西来翻译这个好方法：

 <!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"></pre>

    <script type="text/javascript">
      // Client ID and API key from the Developer Console
      var CLIENT_ID = '<YOUR_CLIENT_ID>';

      // 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({
          discoveryDocs: DISCOVERY_DOCS,
          clientId: CLIENT_ID,
          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;
        });
      }

      /**
       *  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>

转换成一个angular 5组件，让我调用gmail api来获取信息。

每次它都失败了。

我的最后一个示例是: gmail.component.ts

import {Component, OnInit,} from '@angular/core';

declare const gapi: any;

@Component({
  selector: 'gmail-component',
  templateUrl: './gmail.template.html'
})

export class GmailComponent implements OnInit{

  clientid = "xxxxx.apps.googleusercontent.com";
  discovery = ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"];
  scope= 'https://mail.google.com/';

  authorizeButton = document.getElementById('authorize-button');
  signoutButton = document.getElementById('signout-button');

  ngOnInit() {
    this.handleClientLoad();
  }

  handleClientLoad() {
    gapi.load('client:auth2', this.initClient());
  }


  initClient() {
    gapi.client.init({
      discoveryDocs: this.discovery,
      clientId: this.clientid,
      scope: this.scope
    }).then(function () {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen();

      // Handle the initial sign-in state.
      this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      this.authorizeButton.onclick = this.handleAuthClick;
      this.signoutButton.onclick = this.handleSignoutClick;
    });
  }

  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.authorizeButton.style.display = 'none';
      this.signoutButton.style.display = 'block';
      this.listLabels();
    } else {
      this.authorizeButton.style.display = 'block';
      this.signoutButton.style.display = 'none';
    }
  }

  handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
  }

  /**
   *  Sign out the user upon button click.
   */
  handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
  }

  appendPre(message) {
    const pre = document.getElementById('content');
    const textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }

  listMessages(userId, query, callback) {
    const getPageOfMessages = function (request, result) {
      request.execute(function (resp) {
        result = result.concat(resp.messages);
        const nextPageToken = resp.nextPageToken;
        if (nextPageToken) {
          request = gapi.client.gmail.users.messages.list({
            'userId': 'me',
            'pageToken': nextPageToken,
            'q': query
          });
          getPageOfMessages(request, result);
        } else {
          callback(result);
        }
      });
    };
    const initialRequest = gapi.client.gmail.users.messages.list({
      'userId': 'me',
      'q': query
    });
    getPageOfMessages(initialRequest, []);
  }

  listLabels() {
    gapi.client.gmail.users.labels.list({
      'userId': 'me'



    }).then(function (response) {
      const labels = response.result.labels;
      this.appendPre('Labels:');

      if (labels && labels.length > 0) {
        for (let i = 0; i < labels.length; i++) {
          const label = labels[i];
          this.appendPre(label.name)
        }
      } else {
        this.appendPre('No Labels found.');
      }
    });
  }
}

和gmail.template.html：

<div id="authorize-div">
  <span>Authorize access to Gmail API</span>
  <!--Button for the user to click to initiate auth sequence -->
  <button id="authorize-button" (click)="handleAuthClick(event)">
    Authorize
  </button>
</div>
<pre id="output"></pre>

结果：

有没有人已经这么做了？或者对这里不起作用的地方有一个概念？谢谢。

angular

gmail-api

回答 1

Stack Overflow用户

发布于 2018-04-28 03:22:56

看一看ng-gapi包。他们已经完成了所有的工作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50068766

复制

相似问题

问如何将gmailapi的快速入门导出到angular 5组件？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将gmailapi的快速入门导出到angular 5组件？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将gmailapi的快速入门导出到angular 5组件？
EN