Menggunakan OAuth 2.0 untuk Aplikasi Web JavaScript

Dokumen ini menjelaskan cara menerapkan otorisasi OAuth 2.0 untuk mengakses YouTube Data API dari aplikasi web JavaScript. OAuth 2.0 memungkinkan pengguna untuk berbagi data tertentu dengan aplikasi sekaligus menjaga kerahasiaan nama pengguna, sandi, dan informasi mereka lainnya. Misalnya, aplikasi dapat menggunakan OAuth 2.0 untuk mendapatkan izin mengupload video ke channel YouTube pengguna.

Alur OAuth 2.0 ini disebut alur pemberian implisit. Class ini didesain untuk aplikasi yang mengakses API hanya saat pengguna sedang berada di aplikasi. Aplikasi ini tidak dapat menyimpan informasi rahasia.

Dalam alur ini, aplikasi Anda akan membuka URL Google yang menggunakan parameter kueri untuk mengidentifikasi aplikasi Anda dan jenis akses API yang diperlukan aplikasi. Anda dapat membuka URL di jendela browser saat ini atau di pop-up. Pengguna dapat melakukan autentikasi dengan Google dan memberikan izin yang diminta. Google kemudian mengalihkan pengguna kembali ke aplikasi Anda. Pengalihan ini menyertakan token akses, yang diverifikasi oleh aplikasi Anda dan digunakan untuk membuat permintaan API.

Library Klien Google API dan Layanan Identitas Google

Jika Anda menggunakan library klien Google API untuk JavaScript untuk melakukan panggilan yang diotorisasi ke Google, Anda harus menggunakan library JavaScript Layanan Identitas Google untuk menangani alur OAuth 2.0. Lihat model token Layanan identitas Google, yang didasarkan pada alur pemberian implisit OAuth 2.0.

Prasyarat

Mengaktifkan API untuk project Anda

Aplikasi apa pun yang memanggil Google API harus mengaktifkan API tersebut di API Console.

Untuk mengaktifkan API bagi project Anda:

  1. Open the API Library di Google API Console.
  2. If prompted, select a project, or create a new one.
  3. Gunakan halaman Koleksi untuk menemukan dan mengaktifkan YouTube Data API. Temukan API lain yang akan digunakan aplikasi Anda serta aktifkan juga API tersebut.

Buat kredensial otorisasi

Aplikasi apa pun 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. Selanjutnya, aplikasi Anda dapat menggunakan kredensial tersebut untuk mengakses API yang telah Anda aktifkan untuk project tersebut.

  1. Go to the Credentials page.
  2. Klik Create credentials > OAuth client ID.
  3. Pilih jenis aplikasi Web application.
  4. Isi formulir. Aplikasi yang menggunakan JavaScript untuk membuat permintaan Google API yang diotorisasi harus menentukan asal JavaScript yang diotorisasi. Origin mengidentifikasi domain tempat aplikasi Anda dapat mengirim permintaan ke server OAuth 2.0. Asal ini harus mematuhi aturan validasi Google.

Mengidentifikasi cakupan akses

Dengan cakupan, aplikasi Anda hanya dapat meminta akses ke resource yang diperlukan sekaligus memungkinkan pengguna mengontrol jumlah akses yang mereka berikan ke aplikasi Anda. Dengan demikian, mungkin ada hubungan terbalik antara jumlah cakupan yang diminta dan kemungkinan untuk mendapatkan izin pengguna.

Sebelum mulai menerapkan otorisasi OAuth 2.0, sebaiknya identifikasi cakupan yang memerlukan izin untuk diakses oleh aplikasi Anda.

YouTube Data API v3 menggunakan cakupan berikut:

Teropong senjata api
https://www.googleapis.com/auth/youtubeMengelola akun YouTube Anda
https://www.googleapis.com/auth/youtube.channel-memberships.creatorMelihat daftar pelanggan yang saat ini aktif di channel Anda, level mereka saat ini, dan kapan mereka menjadi pelanggan
https://www.googleapis.com/auth/youtube.force-sslMelihat, mengedit, dan secara permanen menghapus video, rating, komentar, dan teks YouTube
https://www.googleapis.com/auth/youtube.readonlyMelihat akun YouTube Anda
https://www.googleapis.com/auth/youtube.uploadMengelola video YouTube Anda
https://www.googleapis.com/auth/youtubepartnerMelihat dan mengelola aset Anda dan konten terkait di YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditMelihat informasi pribadi channel YouTube Anda yang relevan selama proses audit bersama partner YouTube

Dokumen Cakupan OAuth 2.0 API berisi daftar lengkap cakupan yang mungkin Anda gunakan untuk mengakses Google API.

Memperoleh token akses OAuth 2.0

Langkah berikut menunjukkan cara aplikasi Anda berinteraksi dengan server OAuth 2.0 Google untuk mendapatkan izin pengguna guna menjalankan permintaan API atas nama pengguna. Aplikasi Anda harus memiliki izin tersebut sebelum dapat mengeksekusi permintaan Google API yang memerlukan otorisasi pengguna.

Langkah 1: Alihkan ke server OAuth 2.0 Google

Untuk meminta izin mengakses data pengguna, alihkan pengguna ke server OAuth 2.0 Google.

Endpoint OAuth 2.0

Buat URL untuk meminta akses dari endpoint OAuth 2.0 Google di https://accounts.google.com/o/oauth2/v2/auth. Endpoint ini dapat diakses melalui HTTPS; koneksi HTTP biasa ditolak.

Server otorisasi Google mendukung parameter string kueri berikut untuk aplikasi server web:

Parameter
client_id Wajib

Client ID untuk aplikasi Anda. Anda dapat menemukan nilai ini di API Console Credentials page.

redirect_uri Wajib

Menentukan di mana server API mengalihkan pengguna setelah pengguna menyelesaikan alur otorisasi. Nilai harus sama persis dengan salah satu URI pengalihan yang diberi otorisasi untuk klien OAuth 2.0, yang Anda konfigurasikan di API Console Credentials pageklien Anda. Jika nilai ini tidak cocok dengan URI pengalihan resmi untuk client_id yang diberikan, Anda akan mendapatkan error redirect_uri_mismatch.

Perhatikan bahwa skema, huruf besar/kecil, dan garis miring di akhir ('/') http atau https harus semuanya cocok.

response_type Wajib

Aplikasi JavaScript perlu menetapkan nilai parameter ke token. Nilai ini menginstruksikan Server Otorisasi Google untuk menampilkan token akses sebagai pasangan name=value dalam ID fragmen URI (#) tempat pengguna dialihkan setelah menyelesaikan proses otorisasi.

scope Wajib

Daftar cakupan yang dipisahkan spasi yang mengidentifikasi resource yang dapat diakses aplikasi Anda atas nama pengguna. Nilai ini menginformasikan layar izin yang ditampilkan Google kepada pengguna.

Dengan cakupan, aplikasi Anda dapat hanya meminta akses ke resource yang diperlukan sekaligus memungkinkan pengguna mengontrol jumlah akses yang mereka berikan ke aplikasi Anda. Dengan demikian, ada hubungan terbalik antara jumlah cakupan yang diminta dan kemungkinan untuk mendapatkan izin pengguna.

YouTube Data API v3 menggunakan cakupan berikut:

Teropong senjata api
https://www.googleapis.com/auth/youtubeMengelola akun YouTube Anda
https://www.googleapis.com/auth/youtube.channel-memberships.creatorMelihat daftar pelanggan yang saat ini aktif di channel Anda, level mereka saat ini, dan kapan mereka menjadi pelanggan
https://www.googleapis.com/auth/youtube.force-sslMelihat, mengedit, dan secara permanen menghapus video, rating, komentar, dan teks YouTube
https://www.googleapis.com/auth/youtube.readonlyMelihat akun YouTube Anda
https://www.googleapis.com/auth/youtube.uploadMengelola video YouTube Anda
https://www.googleapis.com/auth/youtubepartnerMelihat dan mengelola aset Anda dan konten terkait di YouTube
https://www.googleapis.com/auth/youtubepartner-channel-auditMelihat informasi pribadi channel YouTube Anda yang relevan selama proses audit bersama partner YouTube

Dokumen Cakupan OAuth 2.0 API menyediakan daftar lengkap cakupan yang dapat Anda gunakan untuk mengakses Google API.

Sebaiknya aplikasi Anda meminta akses ke cakupan otorisasi dalam konteks jika memungkinkan. Dengan meminta akses ke data pengguna sesuai konteks, melalui otorisasi inkremental, Anda membantu pengguna untuk lebih mudah memahami alasan aplikasi Anda memerlukan akses yang dimintanya.

state Direkomendasikan

Menentukan nilai string yang digunakan aplikasi untuk mempertahankan status antara permintaan otorisasi dan respons server otorisasi. Server menampilkan nilai persis yang Anda kirim sebagai pasangan name=value dalam ID fragmen URL (#) dari redirect_uri setelah pengguna menyetujui atau menolak permintaan akses aplikasi Anda.

Anda dapat menggunakan parameter ini untuk beberapa tujuan, seperti mengarahkan pengguna ke resource yang benar di aplikasi, mengirim nonce, dan mengurangi pemalsuan permintaan lintas situs. Karena redirect_uri dapat ditebak, penggunaan nilai state dapat meningkatkan keyakinan Anda bahwa koneksi masuk merupakan hasil dari permintaan autentikasi. Jika Anda membuat string acak atau mengenkode hash cookie atau nilai lain yang menangkap status klien, Anda juga dapat memvalidasi respons untuk memastikan juga bahwa permintaan dan respons berasal dari browser yang sama, sehingga memberikan perlindungan terhadap serangan seperti pemalsuan permintaan lintas situs. Lihat dokumentasi OpenID Connect untuk contoh cara membuat dan mengonfirmasi token state.

include_granted_scopes Opsional

Memungkinkan aplikasi menggunakan otorisasi inkremental untuk meminta akses ke cakupan tambahan sesuai konteks. Jika Anda menetapkan nilai parameter ini ke true dan permintaan otorisasi disetujui, token akses baru juga akan mencakup semua cakupan yang sebelumnya diberikan akses aplikasi oleh pengguna. Lihat bagian otorisasi inkremental untuk mengetahui contohnya.

login_hint Opsional

Jika aplikasi Anda mengetahui pengguna mana yang mencoba mengautentikasi, aplikasi tersebut dapat menggunakan parameter ini untuk memberikan petunjuk ke Server Autentikasi Google. Server menggunakan petunjuk untuk menyederhanakan alur login, baik dengan mengisi kolom email secara otomatis di formulir login maupun dengan memilih sesi multi-login yang sesuai.

Tetapkan parameter value ke alamat email atau ID sub, yang setara dengan ID Google pengguna.

prompt Opsional

Daftar perintah yang dipisahkan spasi dan peka huruf besar/kecil untuk ditampilkan kepada pengguna. Jika Anda tidak menetapkan parameter ini, pengguna hanya akan diminta saat project Anda pertama kali meminta akses. Lihat Meminta izin kembali untuk mengetahui informasi selengkapnya.

Nilai yang dimungkinkan adalah:

none Jangan tampilkan layar autentikasi atau izin apa pun. Tidak boleh ditentukan dengan nilai lain.
consent Minta izin pengguna.
select_account Minta pengguna memilih akun.

Contoh pengalihan ke server otorisasi Google

Contoh URL di bawah ini meminta akses offline (access_type=offline) ke cakupan yang mengizinkan akses untuk melihat akun YouTube pengguna. Otorisasi ini menggunakan otorisasi inkremental untuk memastikan bahwa token akses yang baru mencakup semua cakupan yang sebelumnya diberikan akses aplikasi oleh pengguna. URL tersebut juga menetapkan nilai untuk parameter redirect_uri, response_type, dan client_id yang diperlukan serta untuk parameter state. URL berisi jeda baris dan spasi agar mudah dibaca.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Setelah Anda membuat URL permintaan, alihkan pengguna ke URL tersebut.

Kode contoh JavaScript

Cuplikan JavaScript berikut menunjukkan cara memulai alur otorisasi di JavaScript tanpa menggunakan Library Klien Google API untuk JavaScript. Karena endpoint OAuth 2.0 ini tidak mendukung Cross-Origin Resource Sharing (CORS), cuplikan akan membuat formulir yang membuka permintaan ke endpoint tersebut.

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Langkah 2: Google meminta izin pengguna

Pada langkah ini, pengguna memutuskan apakah akan memberikan akses yang diminta kepada aplikasi Anda. Pada tahap ini, Google akan menampilkan jendela izin yang menampilkan nama aplikasi Anda dan layanan Google API yang izin aksesnya diminta dengan kredensial otorisasi pengguna dan ringkasan cakupan akses yang akan diberikan. Selanjutnya, pengguna dapat setuju untuk memberikan akses ke satu atau beberapa cakupan yang diminta oleh aplikasi Anda atau menolak permintaan tersebut.

Aplikasi Anda tidak perlu melakukan apa pun pada tahap ini karena menunggu respons dari server OAuth 2.0 Google yang menunjukkan apakah akses telah diberikan. Respons tersebut dijelaskan dalam langkah berikut.

Error

Permintaan ke endpoint otorisasi OAuth 2.0 Google mungkin menampilkan pesan error yang dilihat pengguna, bukan alur autentikasi dan otorisasi yang diharapkan. Kode error umum dan resolusi yang disarankan tercantum di bawah ini.

admin_policy_enforced

Akun Google tidak dapat mengizinkan satu atau beberapa cakupan yang diminta karena kebijakan administrator Google Workspace mereka. Baca artikel bantuan Admin Google Workspace Mengontrol aplikasi pihak ketiga & internal yang mengakses data Google Workspace untuk mengetahui informasi selengkapnya tentang cara administrator dapat membatasi akses ke semua cakupan atau cakupan sensitif dan dibatasi hingga akses diberikan secara eksplisit ke client ID OAuth Anda.

disallowed_useragent

Endpoint otorisasi ditampilkan di dalam agen pengguna tersemat yang tidak diizinkan oleh Kebijakan OAuth 2.0 Google.

Android

Developer Android mungkin menemukan pesan error ini saat membuka permintaan otorisasi di android.webkit.WebView. Sebagai gantinya, developer sebaiknya menggunakan library Android seperti Login dengan Google untuk Android atau AppAuth untuk Android dari OpenID Foundation.

Developer web mungkin mengalami error ini saat aplikasi Android membuka link web umum di agen pengguna tersemat dan pengguna membuka endpoint otorisasi OAuth 2.0 Google dari situs Anda. Developer harus mengizinkan link umum untuk dibuka di pengendali link default sistem operasi, yang mencakup pengendali Link Aplikasi Android atau aplikasi browser default. Library Tab Khusus Android juga merupakan opsi yang didukung.

iOS

Developer iOS dan macOS mungkin mengalami error ini saat membuka permintaan otorisasi di WKWebView. Sebagai gantinya, developer sebaiknya menggunakan library iOS seperti Login dengan Google untuk iOS atau AppAuth for iOS dari OpenID Foundation.

Developer web dapat mengalami error ini saat aplikasi iOS atau macOS membuka link web umum di agen pengguna tersemat dan pengguna membuka endpoint otorisasi OAuth 2.0 Google dari situs Anda. Developer harus mengizinkan link umum untuk dibuka di pengendali link default sistem operasi, yang mencakup pengendali Universal Links atau aplikasi browser default. Library SFSafariViewController juga merupakan opsi yang didukung.

org_internal

Client ID OAuth dalam permintaan adalah bagian dari project yang membatasi akses ke Akun Google di Organisasi Google Cloud tertentu. Untuk mendapatkan informasi selengkapnya tentang opsi konfigurasi ini, lihat bagian Jenis pengguna di artikel bantuan Menyiapkan layar izin OAuth Anda.

invalid_client

Asal permintaan dibuat tidak diizinkan untuk klien ini. Lihat origin_mismatch.

invalid_grant

Saat menggunakan otorisasi inkremental, masa berlaku token mungkin telah berakhir atau menjadi tidak valid. Autentikasi pengguna lagi dan minta izin pengguna untuk mendapatkan token baru. Jika terus mengalami error ini, pastikan aplikasi Anda telah dikonfigurasi dengan benar dan gunakan token dan parameter yang benar dalam permintaan Anda. Jika tidak, akun pengguna mungkin telah dihapus atau dinonaktifkan.

origin_mismatch

Skema, domain, dan/atau port JavaScript yang berasal dari permintaan otorisasi mungkin tidak cocok dengan URI asal JavaScript yang diotorisasi yang terdaftar untuk client ID OAuth. Tinjau origin JavaScript yang diotorisasi di Google API Console Credentials page.

redirect_uri_mismatch

redirect_uri yang diteruskan dalam permintaan otorisasi tidak cocok dengan URI pengalihan yang diotorisasi untuk client ID OAuth. Tinjau URI pengalihan yang diberi otorisasi di Google API Console Credentials page.

Skema, domain, dan/atau port JavaScript yang berasal dari permintaan otorisasi mungkin tidak cocok dengan URI asal JavaScript yang diotorisasi yang terdaftar untuk client ID OAuth. Tinjau asal JavaScript resmi di Google API Console Credentials page.

Parameter redirect_uri mungkin merujuk ke alur out-of-band (OOB) OAuth yang tidak digunakan lagi dan tidak lagi didukung. Lihat panduan migrasi untuk memperbarui integrasi Anda.

invalid_request

Ada yang salah dengan permintaan yang Anda buat. Hal ini dapat disebabkan oleh beberapa alasan:

  • Permintaan tidak diformat dengan benar
  • Permintaan tidak memiliki parameter yang diperlukan
  • Permintaan tersebut menggunakan metode otorisasi yang tidak didukung oleh Google. Memverifikasi bahwa integrasi OAuth Anda menggunakan metode integrasi yang direkomendasikan

Langkah 3: Tangani respons server OAuth 2.0

Endpoint OAuth 2.0

Server OAuth 2.0 mengirimkan respons ke redirect_uri yang ditentukan dalam permintaan token akses Anda.

Jika pengguna menyetujui permintaan tersebut, respons akan berisi token akses. Jika pengguna tidak menyetujui permintaan tersebut, respons akan berisi pesan error. Token akses atau pesan error ditampilkan di fragmen hash URI pengalihan, seperti ditunjukkan di bawah ini:

  • Respons token akses:

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    Selain parameter access_token, string fragmen juga berisi parameter token_type, yang selalu ditetapkan ke Bearer, dan parameter expires_in, yang menentukan masa aktif token, dalam detik. Jika parameter state ditentukan dalam permintaan token akses, nilainya juga disertakan dalam respons.

  • Respons error:
    https://oauth2.example.com/callback#error=access_denied

Contoh respons server OAuth 2.0

Anda dapat menguji alur ini dengan mengklik contoh URL berikut, yang meminta akses hanya baca untuk melihat metadata file di Google Drive Anda:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.readonly&
 include_granted_scopes=true&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 response_type=token&
 client_id=client_id

Setelah menyelesaikan alur OAuth 2.0, Anda akan dialihkan ke http://localhost/oauth2callback. URL tersebut akan menghasilkan error 404 NOT FOUND kecuali jika mesin lokal Anda kebetulan menyajikan file di alamat tersebut. Langkah berikutnya memberikan detail selengkapnya tentang informasi yang ditampilkan dalam URI saat pengguna dialihkan kembali ke aplikasi Anda.

Memanggil Google API

Endpoint OAuth 2.0

Setelah aplikasi memperoleh token akses, Anda dapat menggunakan token tersebut untuk melakukan panggilan ke Google API atas nama akun pengguna tertentu jika cakupan akses yang diperlukan oleh API telah diberikan. Untuk melakukannya, sertakan token akses dalam permintaan ke API dengan menyertakan parameter kueri access_token atau nilai Bearer header HTTP Authorization. Jika memungkinkan, header HTTP akan lebih disukai, karena string kueri cenderung terlihat dalam log server. Pada umumnya, Anda dapat menggunakan library klien untuk menyiapkan panggilan ke Google API (misalnya, saat memanggil YouTube Data API).

Perlu diperhatikan bahwa YouTube Data API hanya mendukung akun layanan untuk pemilik konten YouTube yang memiliki dan mengelola beberapa channel YouTube, seperti label rekaman dan studio film.

Anda dapat mencoba semua Google API dan melihat cakupannya di OAuth 2.0 Playground.

Contoh GET HTTP

Panggilan ke endpoint youtube.channels (YouTube Data API) menggunakan header HTTP Authorization: Bearer mungkin terlihat seperti berikut. Perhatikan bahwa Anda perlu menentukan token akses Anda sendiri:

GET /youtube/v3/channels?part=snippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

Berikut adalah panggilan ke API yang sama untuk pengguna yang diautentikasi menggunakan parameter string kueri access_token:

GET https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

Contoh curl

Anda dapat menguji perintah ini dengan aplikasi command line curl. Berikut ini contoh yang menggunakan opsi header HTTP (lebih disukai):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true

Sebagai alternatif, opsi parameter string kueri:

curl https://www.googleapis.com/youtube/v3/channels?access_token=access_token&part=snippet&mine=true

Kode contoh JavaScript

Cuplikan kode di bawah menunjukkan cara menggunakan CORS (Cross-origin resource sharing) untuk mengirim permintaan ke Google API. Contoh ini tidak menggunakan Library Klien Google API untuk JavaScript. Namun, meskipun Anda tidak menggunakan library klien, panduan dukungan CORS dalam dokumentasi library tersebut mungkin akan membantu Anda untuk lebih memahami permintaan tersebut.

Dalam cuplikan kode ini, variabel access_token mewakili token yang telah Anda peroleh untuk membuat permintaan API atas nama pengguna yang diberi otorisasi. Contoh lengkap menunjukkan cara menyimpan token tersebut di penyimpanan lokal browser dan mengambilnya saat membuat permintaan API.

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

Contoh lengkap

Endpoint OAuth 2.0

Contoh kode ini menunjukkan cara menyelesaikan alur OAuth 2.0 di JavaScript tanpa menggunakan Library Klien Google API untuk JavaScript. Kode ini ditujukan untuk halaman HTML yang menampilkan tombol untuk mencoba permintaan API. Jika tombol tersebut diklik, kode akan memeriksa apakah halaman telah menyimpan token akses API di penyimpanan lokal browser. Jika demikian, permintaan API akan dijalankan. Jika tidak, alur OAuth 2.0 akan dimulai.

Untuk alur OAuth 2.0, halaman akan mengikuti langkah-langkah berikut:

  1. Tindakan ini akan mengarahkan pengguna ke server OAuth 2.0 Google yang meminta akses ke cakupan https://www.googleapis.com/auth/youtube.force-ssl.
  2. Setelah memberikan (atau menolak) akses ke satu atau beberapa cakupan yang diminta, pengguna akan dialihkan ke halaman asal, yang mengurai token akses dari string ID fragmen.
  3. Halaman ini menggunakan token akses untuk membuat contoh permintaan API.

    Permintaan API ini memanggil metode channels.list YouTube Data API untuk mengambil data tentang channel YouTube pengguna yang diberi otorisasi.

  4. Jika permintaan berhasil dijalankan, respons API akan dicatat dalam konsol proses debug browser.

Anda dapat mencabut akses ke aplikasi melalui halaman Izin untuk Akun Google Anda. Aplikasi akan tercantum sebagai Demo OAuth 2.0 untuk Dokumen Google API.

Untuk menjalankan kode ini secara lokal, Anda harus menetapkan nilai untuk variabel YOUR_CLIENT_ID dan YOUR_REDIRECT_URI yang sesuai dengan kredensial otorisasi. Variabel YOUR_REDIRECT_URI harus ditetapkan ke URL yang sama dengan tempat halaman ditayangkan. Nilai harus sama persis dengan salah satu URI pengalihan yang diberi otorisasi untuk klien OAuth 2.0, yang Anda konfigurasikan di API Console Credentials page. Jika nilai ini tidak cocok dengan URI yang diberi otorisasi, Anda akan mendapatkan error redirect_uri_mismatch. Project Anda juga harus sudah mengaktifkan API yang sesuai untuk permintaan ini.

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/youtube/v3/channels?part=snippet&mine=true&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/youtube.force-ssl',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

Aturan validasi origin JavaScript

Google menerapkan aturan validasi berikut ke origin JavaScript untuk membantu developer menjaga keamanan aplikasi mereka. Asal JavaScript Anda harus mematuhi aturan ini. Lihat RFC 3986 bagian 3 untuk definisi domain, host, dan skema, yang disebutkan di bawah ini.

Aturan validasi
Skema

Asal JavaScript harus menggunakan skema HTTPS, bukan HTTP biasa. URI Localhost (termasuk URI alamat IP localhost) dikecualikan dari aturan ini.

Pembawa acara

Host tidak boleh berupa alamat IP mentah. Alamat IP localhost dikecualikan dari aturan ini.

Domain
  • TLD host (Domain Level Teratas) harus termasuk dalam daftar akhiran publik.
  • Domain host tidak boleh “googleusercontent.com”.
  • Asal JavaScript tidak boleh berisi domain penyingkat URL (misalnya, goo.gl) kecuali jika aplikasi memiliki domain tersebut.
  • Info pengguna

    Asal JavaScript tidak boleh berisi subkomponen userinfo.

    Jalur

    Asal JavaScript tidak boleh berisi komponen jalur.

    Kueri

    Asal JavaScript tidak boleh berisi komponen kueri.

    Fragment

    Asal JavaScript tidak boleh berisi komponen fragmen.

    Karakter Asal JavaScript tidak boleh berisi karakter tertentu, termasuk:
    • Karakter pengganti ('*')
    • Karakter ASCII yang tidak dapat dicetak
    • Encoding persen tidak valid (encoding persen apa pun yang tidak mengikuti bentuk tanda persen encoding URL yang diikuti dengan dua digit heksadesimal)
    • Karakter null (karakter NULL yang dienkode, misalnya, %00, %C0%80)

    Otorisasi inkremental

    Pada protokol OAuth 2.0, aplikasi Anda meminta otorisasi untuk mengakses resource, yang diidentifikasi berdasarkan cakupan. Hal ini dianggap sebagai praktik pengalaman pengguna terbaik untuk meminta otorisasi resource pada saat Anda membutuhkannya. Untuk memungkinkan praktik tersebut, server otorisasi Google mendukung otorisasi inkremental. Fitur ini memungkinkan Anda meminta cakupan sesuai kebutuhan dan, jika pengguna memberikan izin untuk cakupan baru, akan menampilkan kode otorisasi yang dapat ditukarkan dengan token yang berisi semua cakupan yang telah diberikan pengguna pada project.

    Misalnya, sebuah aplikasi membantu pengguna mengidentifikasi acara lokal yang menarik. Aplikasi ini memungkinkan pengguna melihat video tentang peristiwa, memberi rating pada video, dan menambahkan video ke playlist. Pengguna juga dapat menggunakan aplikasi ini untuk menambahkan acara ke Google Kalender mereka.

    Dalam hal ini, saat login, aplikasi mungkin tidak memerlukan atau meminta akses ke cakupan apa pun. Namun, jika pengguna mencoba memberi rating pada video, menambahkan video ke playlist, atau melakukan tindakan YouTube lainnya, aplikasi dapat meminta akses ke cakupan https://www.googleapis.com/auth/youtube.force-ssl. Demikian pula, aplikasi dapat meminta akses ke cakupan https://www.googleapis.com/auth/calendar jika pengguna mencoba menambahkan acara kalender.

    Aturan berikut berlaku untuk token akses yang diperoleh dari otorisasi tambahan:

    • Token ini dapat digunakan untuk mengakses resource yang sesuai dengan salah satu cakupan yang digabungkan ke dalam otorisasi gabungan baru.
    • Ketika Anda menggunakan token refresh untuk otorisasi gabungan guna memperoleh token akses, token akses tersebut akan merepresentasikan otorisasi gabungan dan dapat digunakan untuk setiap nilai scope yang disertakan dalam respons.
    • Otorisasi gabungan mencakup semua cakupan yang diberikan pengguna ke project API meskipun jika hibah diminta dari klien yang berbeda. Misalnya, jika pengguna memberikan akses ke satu cakupan menggunakan klien desktop aplikasi, lalu memberikan cakupan lain ke aplikasi yang sama melalui klien seluler, otorisasi gabungan akan menyertakan kedua cakupan tersebut.
    • Jika Anda mencabut token yang mewakili otorisasi gabungan, akses ke semua cakupan otorisasi tersebut atas nama pengguna terkait akan dicabut secara bersamaan.

    Contoh kode di bawah ini menunjukkan cara menambahkan cakupan ke token akses yang ada. Dengan pendekatan ini, aplikasi Anda tidak perlu mengelola beberapa token akses.

    Endpoint OAuth 2.0

    Dalam contoh ini, aplikasi pemanggil meminta akses untuk mengambil data YouTube Analytics pengguna, selain akses lain yang telah diberikan pengguna ke aplikasi.

    Untuk menambahkan cakupan ke token akses yang ada, sertakan parameter include_granted_scopes dalam permintaan ke server OAuth 2.0 Google.

    Cuplikan kode berikut menunjukkan cara melakukannya. Cuplikan ini mengasumsikan bahwa Anda telah menyimpan cakupan di mana token akses Anda valid di penyimpanan lokal browser. (Kode contoh lengkap menyimpan daftar cakupan yang valid untuk token akses dengan menetapkan properti oauth2-test-params.scope di penyimpanan lokal browser.)

    Cuplikan ini membandingkan cakupan yang valid untuk token akses dengan cakupan yang ingin Anda gunakan untuk kueri tertentu. Jika token akses tidak mencakup cakupan tersebut, alur OAuth 2.0 akan dimulai. Di sini, fungsi oauth2SignIn sama dengan fungsi yang diberikan pada langkah 2 (dan akan disediakan nanti dalam contoh lengkap).

    var SCOPE = 'https://www.googleapis.com/auth/youtube.force-ssl';
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    
    var current_scope_granted = false;
    if (params.hasOwnProperty('scope')) {
      var scopes = params['scope'].split(' ');
      for (var s = 0; s < scopes.length; s++) {
        if (SCOPE == scopes[s]) {
          current_scope_granted = true;
        }
      }
    }
    
    if (!current_scope_granted) {
      oauth2SignIn(); // This function is defined elsewhere in this document.
    } else {
      // Since you already have access, you can proceed with the API request.
    }

    Mencabut token

    Dalam beberapa kasus, pengguna mungkin ingin mencabut akses yang diberikan ke aplikasi. Pengguna dapat mencabut akses dengan membuka Setelan Akun. Lihat dokumen dukungan Menghapus akses situs atau aplikasi di situs & aplikasi pihak ketiga yang memiliki akses ke akun Anda untuk mengetahui informasi selengkapnya.

    Aplikasi juga dapat mencabut akses yang diberikan kepadanya secara terprogram. Pencabutan terprogram sangat penting jika pengguna berhenti berlangganan, menghapus aplikasi, atau resource API yang diperlukan oleh aplikasi telah berubah secara signifikan. Dengan kata lain, bagian dari proses penghapusan dapat mencakup permintaan API untuk memastikan izin yang sebelumnya diberikan ke aplikasi dihapus.

    Endpoint OAuth 2.0

    Untuk mencabut token secara terprogram, aplikasi Anda membuat permintaan ke https://oauth2.googleapis.com/revoke dan menyertakan token sebagai parameter:

    curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
            https://oauth2.googleapis.com/revoke?token={token}

    Token dapat berupa token akses atau token refresh. Jika token adalah token akses dan memiliki token refresh yang terkait, token refresh juga akan dicabut.

    Jika pencabutan berhasil diproses, kode status HTTP respons adalah 200. Untuk kondisi error, kode status HTTP 400 akan ditampilkan bersama dengan kode error.

    Cuplikan JavaScript berikut menunjukkan cara mencabut token di JavaScript tanpa menggunakan Library Klien Google API untuk JavaScript. Karena endpoint OAuth 2.0 Google untuk mencabut token tidak mendukung Cross-origin Resource Sharing (CORS), kode akan membuat formulir dan mengirim formulir tersebut ke endpoint, bukan menggunakan metode XMLHttpRequest() untuk memposting permintaan.

    function revokeAccess(accessToken) {
      // Google's OAuth 2.0 endpoint for revoking access tokens.
      var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
    
      // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
      var form = document.createElement('form');
      form.setAttribute('method', 'post');
      form.setAttribute('action', revokeTokenEndpoint);
    
      // Add access token to the form so it is set as value of 'token' parameter.
      // This corresponds to the sample curl request, where the URL is:
      //      https://oauth2.googleapis.com/revoke?token={token}
      var tokenField = document.createElement('input');
      tokenField.setAttribute('type', 'hidden');
      tokenField.setAttribute('name', 'token');
      tokenField.setAttribute('value', accessToken);
      form.appendChild(tokenField);
    
      // Add form to page and submit it to actually revoke the token.
      document.body.appendChild(form);
      form.submit();
    }