OAuth2: Mengautentikasi pengguna dengan Google

OAuth2 adalah protokol standar industri untuk otorisasi. Protokol ini menyediakan mekanisme bagi pengguna untuk memberi aplikasi web dan desktop akses ke informasi pribadi tanpa membagikan nama pengguna, {i>password<i} dan kredensial pribadi lainnya.

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

Mulai

Mulailah dengan membuat direktori dan file awal berikut ini.

Ekstensi lengkap yang telah selesai dapat didownload di sini.

manifest.json

Tambahkan manifes dengan membuat file bernama manifest.json dan sertakan kode berikut. Atau download file di sini.

{
  "name": "OAuth Tutorial FriendBlock",
  "version": "1.0",
  "description": "Uses OAuth to connect to Google's People API and display contacts photos.",
  "manifest_version": 2,
  "browser_action": {
    "default_title": "FriendBlock, friends face's in a block."
  },
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  }
}

background.js

Tambahkan skrip latar belakang dengan membuat file bernama background.js dan sertakan kode berikut. Atau download file di sini.

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

index.html

Tambahkan file HTML bernama index.html dan sertakan kode berikut. Atau download file di sini.

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

Mengupload ke dasbor developer

Kemas direktori ekstensi menjadi file .zip dan upload ke Chrome Developer Dasbor tanpa memublikasikannya:

  1. Di Dasbor Developer, klik Tambahkan item baru.
  2. Klik Choose file, lalu pilih direktori ekstensi .zip lalu upload.
  3. Tanpa mengisi kolom tambahan, pilih Simpan Draf dan kembali ke dasbor.

Temukan ekstensi di bagian Listingan Anda dan klik info selengkapnya. Dari jendela pop-up, salin kunci publik tertentu dan menambahkannya ke manifes di dalam direktori yang telah diekstrak di kolom "key".

{
  "name": "OAuth Tutorial FaceBlcok",
...
  "key": "ThisKeyIsGoingToBeVeryLong/go8G...AQAB"
}

Bandingkan ID

Buka halaman Pengelolaan Ekstensi di chrome://extensions, pastikan mode developer diaktifkan dan mengupload direktori ekstensi yang tidak dipaketkan. Membandingkan ID ekstensi di pengelolaan ekstensi ke ID Item di Dasbor Developer. Keduanya harus cocok.

ID ekstensi cocok di semua tempat

Ekstensi akan mempertahankan ID yang sama dengan menyertakan kolom "key" dalam manifes. Mempertahankan ID tunggal sangat penting untuk pendaftaran API.

Membuat client ID OAuth

Buka konsol Google API dan buat project baru. Setelah siap, pilih Kredensial di sidebar, klik Create credentials, lalu pilih OAuth client ID.

Buat kredensial untuk ekstensi

Di halaman Create client ID, pilih Chrome App. Isi nama ekstensi dan tempatnya ID ekstensi di akhir URL pada kolom Application ID.

Lengkapi informasi ekstensi

Selesaikan dengan mengklik buat. Konsol akan memberikan client ID OAuth.

Mendaftarkan OAuth dalam manifes

Sertakan kolom "oauth2" dalam manifes ekstensi. Tempatkan client ID OAuth yang dibuat di bagian "client_id". Sertakan string kosong dalam "scopes" untuk saat ini.

{
  "name": "OAuth Tutorial FriendBlock",
  ...
  "oauth2": {
    "client_id": "yourExtensionOAuthClientIDWillGoHere.apps.googleusercontent.com",
    "scopes":[""]
  },
  ...
}

Memulai alur OAuth pertama

Daftarkan izin identity di manifes.

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

Buat file untuk mengelola alur OAuth bernama oauth.js dan sertakan kode berikut. Atau download di sini.

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 dan klik di "FriendBlock Contacts" tombol. Token OAuth akan muncul di konsol.

Melihat token di konsol

Mengaktifkan Google People API

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

Mengaktifkan People API

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

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

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

Membuat kredensial People API

Simpan kunci API yang dihasilkan untuk digunakan nanti.

Membuat permintaan API pertama

Setelah ekstensi memiliki izin dan kredensial yang tepat, dan dapat memberi otorisasi kepada pengguna Google, meminta data melalui People API. Perbarui kode di oauth.js agar cocok 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 dibuat dari konsol API Google. Ekstensi harus mencatat log objek JSON yang menyertakan array people/account_id di bagian 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 dari kontak pengguna. Update oauth.js ke sertakan 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 ta-da! Nikmati wajah kontak di blok.

Kontak wajah dalam blok