Rumah >hujung hadapan web >tutorial js >Menguasai peti masuk anda dengan API JavaScript Gmail

Menguasai peti masuk anda dengan API JavaScript Gmail

Joseph Gordon-Levittasal: 2025-02-19 10:49:10332semak imbas

Artikel ini menunjukkan membina penonton peti masuk Gmail asas menggunakan API Gmail REST dan JavaScript. Kami akan memanfaatkan jQuery dan bootstrap untuk kecekapan. Kod Lengkap boleh didapati di repositori GitHub kami.

Mastering Your Inbox with the Gmail JavaScript API

Ciri -ciri Utama:

Membolehkan API Gmail:

). URI redirect tidak diperlukan.

http://localhost

Mastering Your Inbox with the Gmail JavaScript API Menyambung ke API Gmail:

Kami akan menggunakan perpustakaan klien JavaScript Google untuk interaksi yang diperkemas. Fail HTML kami termasuk jQuery, bootstrap, dan perpustakaan klien Google:

ingat untuk menggantikan

dan

dengan kelayakan sebenar anda.

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

YOUR_CLIENT_ID Pengesahan Pengguna: YOUR_API_KEY

, ,

, dan handleClientLoad() fungsi mengendalikan pengesahan pengguna menggunakan OAuth 2.0. (Kod untuk fungsi ini ditinggalkan di sini untuk keringkasan tetapi boleh didapati di repo github). checkAuth() handleAuthClick() handleAuthResult() mengambil dan memaparkan mesej peti masuk: loadGmailApi()

Fungsi mengambil sepuluh mesej terakhir menggunakan API Gmail dan panggilan untuk menambahnya ke meja.

juga menambah pautan modal untuk melihat kandungan e -mel penuh. (Kod untuk fungsi ini ditinggalkan di sini untuk keringkasan tetapi boleh didapati di repo github).

displayInbox() appendMessageRow() Memaparkan kandungan e -mel: appendMessageRow()

Tetingkap Modal menggunakan iframe untuk memaparkan kandungan e -mel dengan selamat, menghalang konflik yang berpotensi dengan gaya aplikasinya. (Kod untuk fungsi ini ditinggalkan di sini untuk keringkasan tetapi boleh didapati di repo github).

Styling:

gaya CSS yang disediakan iframe dalam modal. (Kod untuk ini ditinggalkan di sini untuk keringkasan tetapi boleh didapati di repo github).

Penambahbaikan lebih lanjut:

Pemformatan tarikh yang lebih baik

enjin templat (misai atau hendal)

Pesanan tarikh yang betul

penomboran untuk lebih daripada 10 mesej

auto-updating dengan pemberitahuan

Kod sumber penuh, termasuk fungsi utiliti dan fungsi pengendalian/pengendalian mesej, boleh didapati di repo GitHub kami. Seksyen Soalan Lazim telah ditinggalkan kerana ia berulang -ulang berulang -ulang dari maklumat yang telah disediakan.

Atas ialah kandungan terperinci Menguasai peti masuk anda dengan API JavaScript Gmail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Membina VR di Web Hari IniArtikel seterusnya：Cara Membina VR di Web Hari Ini

Artikel berkaitan

Lihat lagi