Heim >Web-Frontend >js-Tutorial >Beherrschen Sie Ihren Posteingang mit der Google Mail JavaScript -API

Beherrschen Sie Ihren Posteingang mit der Google Mail JavaScript -API

Joseph Gordon-LevittOriginal: 2025-02-19 10:49:10333Durchsuche

Dieser Artikel zeigt, dass ein grundlegender Google Mail -Posteingang zu erstellen, indem die Google Mail -REST -API und JavaScript verwendet wird. Wir nutzen JQuery und Bootstrap für Effizienz. Der komplette Code ist in unserem Github -Repository verfügbar.

Mastering Your Inbox with the Gmail JavaScript API

Schlüsselmerkmale:

Gmail -API -Integration über die Entwicklerkonsole von Google.
Die JavaScript -Client -Bibliothek von Google für vereinfachte Authentifizierung und API -Aufrufe.
sichere OAuth 2.0 -Authentifizierung.
Abrufen und Anzeigen der letzten zehn Posteingangsnachrichten des Benutzers.
Modal -Fenster zum Anzeigen des vollständigen E -Mail -Inhalts (mit iFrames für Sicherheit).

Aktivieren Sie die Google Mail -API:

Zugriff auf die Entwicklerkonsole von Google.
Erstellen oder wählen Sie ein Projekt aus.
Navigieren Sie zum APIs -Abschnitt und aktivieren Sie die "Google Mail -API".
Erstellen Sie OAuth 2.0 Client -ID -Anmeldeinformationen für eine Webanwendung und einen Browser -API -Schlüssel (für die Produktion fügen Sie HTTP -Referrer -Beschränkungen hinzu). Geben Sie mindestens einen autorisierten JavaScript -Ursprung an (z. B. http://localhost). Ein Umleitungs -URI ist nicht benötigt.

Mastering Your Inbox with the Gmail JavaScript API

Verbindung mit der Google Mail -API:

herstellen

Wir werden die JavaScript -Client -Bibliothek von Google für eine optimierte Interaktion verwenden. Unsere HTML -Datei enthält JQuery, Bootstrap und die Google Client Library:

<code class="language-html"><!DOCTYPE html>


  <title>Gmail API demo</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <style>
    .hidden { display: none; }
  </style>


  <div class="container">
    <h1>Gmail API demo</h1>
    <button id="authorize-button" class="btn btn-primary hidden">Authorize</button>
    <table class="table table-striped table-inbox hidden">
      <thead>
        <tr>
          <th>From</th>
          <th>Subject</th>
          <th>Date/Time</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>

  
  

  

  

</code>

Denken Sie daran, YOUR_CLIENT_ID und YOUR_API_KEY durch Ihre tatsächlichen Anmeldeinformationen zu ersetzen.

Benutzerauthentifizierung:

Die Funktionen handleClientLoad(), checkAuth(), handleAuthClick(), handleAuthResult() und loadGmailApi() können die Benutzerauthentifizierung mit OAuth 2.0 behandeln. (Der Code für diese Funktionen ist hier für die Kürze weggelassen, ist jedoch im Github -Repo verfügbar.)

Abrufen und Anzeigen von Posteingangsnachrichten:

Die Funktion displayInbox() holt die letzten zehn Nachrichten mit der Google Mail -API ab und ruft appendMessageRow() auf, um sie zur Tabelle hinzuzufügen. appendMessageRow() fügt außerdem einen modalen Link hinzu, um den vollständigen E -Mail -Inhalt anzuzeigen. (Der Code für diese Funktionen ist hier für die Kürze weggelassen, ist jedoch im Github -Repo verfügbar.)

E -Mail -Inhalt anzeigen:

Das Modal -Fenster verwendet ein Iframe, um den E -Mail -Inhalt sicher anzuzeigen und potenzielle Konflikte mit dem Styling der App zu verhindern. (Der Code für diese Funktionalität wird hier für die Kürze weggelassen, ist jedoch im GitHub -Repo verfügbar.)

Styling:

Das bereitgestellte CSS stilft den Iframe innerhalb des Modals. (Der Code dafür wird hier für die Kürze weggelassen, ist jedoch im Github -Repo verfügbar.)

Mastering Your Inbox with the Gmail JavaScript API

Weitere Verbesserungen:

Verbesserte Datumsformatierung
Templating Engine (Schnurrbart oder Lenker)
ordnungsgemäße Datumsbestellung
Pagination für mehr als 10 Nachrichten
automatisch mit Benachrichtigungen

Der vollständige Quellcode, einschließlich der Versorgungsfunktionen und der Authentifizierungs-/Nachrichtenhandhabungsfunktionen, ist in unserem Github -Repo verfügbar. Der FAQS -Abschnitt wurde weggelassen, da er sich weitgehend von den bereits bereitgestellten Informationen wiederholt.

Das obige ist der detaillierte Inhalt vonBeherrschen Sie Ihren Posteingang mit der Google Mail JavaScript -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css bootstrap html for select date auto using console function this display table github http Access iframe

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie heute VR im WebNächster Artikel：So erstellen Sie heute VR im Web

In Verbindung stehende Artikel

Mehr sehen