Halaman ini diterjemahkan oleh Cloud Translation API.

OAuth 2.0: mengautentikasi pengguna dengan Google

OAuth2 adalah protokol standar industri untuk otorisasi. API ini menyediakan mekanisme bagi pengguna untuk memberikan akses ke informasi pribadi kepada aplikasi web dan desktop tanpa membagikan nama pengguna, sandi, dan kredensial pribadi lainnya.

Tutorial ini membuat ekstensi yang mengakses kontak Google pengguna menggunakan Google People API dan Chrome Identity API. Karena ekstensi tidak dimuat melalui HTTPS, tidak dapat melakukan pengalihan atau menetapkan cookie, ekstensi mengandalkan Chrome Identity API untuk menggunakan OAuth2.

Mulai

Mulailah dengan membuat direktori dan file awal berikut.

manifest.json

Tambahkan manifes dengan membuat file bernama manifest.json dan sertakan kode berikut.

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 3,
  "action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "service_worker": "service-worker.js"
  }
}

service-worker.js

Tambahkan pekerja layanan ekstensi dengan membuat file bernama service-worker.js dan sertakan kode berikut.

chrome.action.onClicked.addListener(function() {
  chrome.tabs.create({url: 'index.html'});
});

index.html

Tambahkan file HTML bernama index.html dan sertakan kode berikut.

<html>
  <head>
    <title>FriendBlock</title>
    <style>
      button {
        padding: 10px;
        background-color: #3C79F8;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <button>FriendBlock Contacts</button>
    <div id="friendDiv"></div>
  </body>
</html>

Mempertahankan ID ekstensi yang konsisten

Mempertahankan satu ID sangat penting selama pengembangan. Untuk mempertahankan ID yang konsisten, ikuti langkah-langkah berikut:

Mengupload ekstensi ke dasbor developer

Kemasi direktori ekstensi ke dalam file .zip dan upload ke Dasbor Developer Chrome tanpa memublikasikannya:

Di Dasbor Developer, klik Tambahkan item baru.
Klik Jelajahi file, pilih file zip ekstensi, lalu upload.
Buka tab Package, lalu klik View public key.

Saat dialog terbuka, ikuti langkah-langkah berikut:

Salin kode di antara -----BEGIN PUBLIC KEY----- dan -----END PUBLIC KEY-----.
Hapus baris baru agar menjadi satu baris teks.

Tambahkan kode ke manifest.json di bagian kolom "key". Dengan demikian, ekstensi akan menggunakan ID yang sama.

{ // manifest.json
  "manifest_version": 3,
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8GGC2u3UD9WI3MkmBgyiDPP2OreImEQhPvwpliioUMJmERZK3zPAx72z8MDvGp7Fx7ZlzuZpL4yyp4zXBI+MUhFGoqEh32oYnm4qkS4JpjWva5Ktn4YpAWxd4pSCVs8I4MZms20+yx5OlnlmWQEwQiiIwPPwG1e1jRw0Ak5duPpE3uysVGZXkGhC5FyOFM+oVXwc1kMqrrKnQiMJ3lgh59LjkX4z1cDNX3MomyUMJ+I+DaWC2VdHggB74BNANSd+zkPQeNKg3o7FetlDJya1bk8ofdNBARxHFMBtMXu/ONfCT3Q2kCY9gZDRktmNRiHG/1cXhkIcN1RWrbsCkwIDAQAB",
}

Membandingkan ID

Buka halaman Pengelolaan Ekstensi di chrome://extensions, pastikan Mode developer diaktifkan, lalu upload direktori ekstensi yang tidak dikemas. Bandingkan ID ekstensi di halaman pengelolaan ekstensi dengan ID Item di Dasbor Developer. Keduanya harus cocok.

ID kecocokan ekstensi

Buat client ID OAuth

Setiap aplikasi yang menggunakan OAuth 2.0 untuk mengakses Google API harus memiliki kredensial otorisasi yang mengidentifikasi aplikasi ke server OAuth 2.0 Google. Langkah-langkah berikut menjelaskan cara membuat kredensial untuk project Anda. Aplikasi Anda kemudian dapat menggunakan kredensial untuk mengakses API yang telah Anda aktifkan untuk project tersebut.

Mulai dengan membuka Konsol API Google untuk membuat project baru jika Anda belum memilikinya. Ikuti petunjuk ini untuk membuat Klien OAuth dan mendapatkan Client ID.

Go to the Clients page.
1. Klik Buat Klien.
2. Pilih jenis aplikasi Ekstensi Chrome.
3. Masukkan nama untuk klien OAuth. Nama ini ditampilkan di halaman Klien project Anda untuk mengidentifikasi klien.
4. Masukkan ID ekstensi di kolom ID Item.
5. Klik Buat.

Mendaftarkan OAuth dalam manifes

Sertakan kolom "oauth2" dalam manifes ekstensi. Tempatkan client ID OAuth yang dihasilkan di bagian "client_id". Untuk mendapatkan akses ke informasi akun pengguna, kami perlu meminta "scope", "https://www.googleapis.com/auth/userinfo.email" yang relevan.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":["https://www.googleapis.com/auth/userinfo.email"]
  },
  ...
}

Memulai alur OAuth pertama

Daftarkan izin identity dalam manifes.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "permissions": [
    "identity"
  ],
  ...
}

Buat file untuk mengelola alur OAuth bernama oauth.js dan sertakan kode berikut.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      console.log(token);
    });
  });
};

Tempatkan tag skrip untuk oauth.js di bagian head index.html.

...
  <head>
    <title>FriendBlock</title>
    ...
    <script type="text/javascript" src="oauth.js"></script>
  </head>
...

Muat ulang ekstensi dan klik ikon browser untuk membuka index.html. Buka konsol, lalu klik tombol "FriendBlock Contacts". Token OAuth akan muncul di konsol.

Melihat token di konsol

Mengaktifkan Google People API

Kembali ke konsol Google API, lalu pilih Library dari sidebar. Telusuri "Google People API", klik hasil yang benar, lalu aktifkan.

Mengaktifkan People API

Tambahkan library klien Google People API ke "scopes" dalam manifes ekstensi.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes": [
      "https://www.googleapis.com/auth/contacts.readonly"
    ]
  },
  ...
}

Kembali ke konsol Google API dan kembali ke kredensial. Klik "Buat kredensial" dan pilih "Kunci API" dari dropdown.

Membuat kredensial People API

Simpan kunci API yang dibuat untuk digunakan nanti.

Membuat permintaan API pertama

Sekarang, setelah memiliki izin dan kredensial yang tepat serta dapat memberikan otorisasi kepada pengguna Google, ekstensi dapat meminta data melalui People API. Perbarui kode di oauth.js agar cocok dengan kode di bawah.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=API_KEY',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data)
          });
    });
  });
};

Ganti API_KEY dengan kunci API yang dihasilkan dari konsol Google API. Ekstensi harus mencatat objek JSON yang menyertakan array people/account_id di bawah kolom memberResourceNames.

Blokir wajah

Setelah ekstensi menampilkan daftar kontak pengguna, ekstensi dapat membuat permintaan tambahan untuk mengambil profil dan informasi kontak tersebut . Ekstensi akan menggunakan memberResourceNames untuk mengambil informasi foto kontak pengguna. Perbarui oauth.js untuk menyertakan kode berikut.

window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://people.googleapis.com/v1/contactGroups/all?maxMembers=20&key=<API_Key_Here>',
          init)
          .then((response) => response.json())
          .then(function(data) {
            let photoDiv = document.querySelector('#friendDiv');
            let returnedContacts = data.memberResourceNames;
            for (let i = 0; i < returnedContacts.length; i++) {
              fetch(
                  'https://people.googleapis.com/v1/' + returnedContacts[i] +
                      '?personFields=photos&key=API_KEY',
                  init)
                  .then((response) => response.json())
                  .then(function(data) {
                    let profileImg = document.createElement('img');
                    profileImg.src = data.photos[0].url;
                    photoDiv.appendChild(profileImg);
                  });
            };
          });
    });
  });
};

Muat ulang dan kembali ke ekstensi. Klik tombol FriendBlock dan selesai. Nikmati wajah kontak dalam blok.

Menyentuh wajah dalam blok

OAuth 2.0: mengautentikasi pengguna dengan Google Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.