Menggunakan OAuth 2.0 untuk aplikasi web sisi klien

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 sembari menyimpan nama pengguna, sandi, dan informasi bersifat pribadi. Misalnya, aplikasi dapat menggunakan OAuth 2.0 untuk mendapatkan izin untuk mengambil data YouTube channel.

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

Dalam alur ini, aplikasi Anda membuka URL Google yang menggunakan parameter kueri untuk mengidentifikasi aplikasi Anda dan jenis akses API yang diperlukan aplikasi. Anda dapat membuka URL di browser saat ini atau pop-up. Pengguna dapat melakukan autentikasi dengan Google dan memberikan izin yang diminta. Kemudian, Google mengalihkan pengguna kembali ke aplikasi Anda. Pengalihan tersebut menyertakan token akses, yang diverifikasi dan kemudian digunakan aplikasi Anda 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 sah ke Google, Anda harus menggunakan Library JavaScript Google Identity Services untuk menangani alur OAuth 2.0. Lihat Google layanan identitas model token, yaitu berdasarkan 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 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 dan aktifkan juga API tersebut.

Membuat 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 > Client ID OAuth yang baru.
  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. Asal mengidentifikasi domain dari yang dapat digunakan aplikasi Anda untuk mengirim permintaan ke server OAuth 2.0. Asal ini harus mematuhi dengan aturan validasi Google.

Mengidentifikasi cakupan akses

Dengan cakupan, aplikasi Anda dapat hanya meminta akses ke resource yang diperlukannya sekaligus memungkinkan pengguna untuk mengontrol jumlah akses yang mereka berikan ke aplikasi Anda. Oleh karena itu, mungkin merupakan hubungan terbalik antara jumlah cakupan yang diminta dan kemungkinan mendapatkan izin pengguna.

Sebelum mulai menerapkan otorisasi OAuth 2.0, sebaiknya Anda mengidentifikasi cakupan aplikasi Anda memerlukan izin untuk mengaksesnya.

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 cakupan yang dapat Anda gunakan untuk mengakses Google API.

Mendapatkan token akses OAuth 2.0

Langkah-langkah berikut menunjukkan cara aplikasi Anda berinteraksi dengan server OAuth 2.0 Google untuk mendapatkan izin pengguna untuk melakukan permintaan API atas nama pengguna. Permohonan Anda harus memiliki izin 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 OAuth 2.0 Google server tertentu.

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 web aplikasi server:

Parameter
client_id Wajib

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

redirect_uri Wajib

Menentukan tempat 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 page. Jika nilai ini tidak sesuai dengan URI pengalihan yang diberi otorisasi untuk client_id yang disediakan, Anda akan mendapatkan Error redirect_uri_mismatch.

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

response_type Wajib

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

scope Wajib

J dipisahkan spasi daftar cakupan yang mengidentifikasi sumber daya yang dapat diakses aplikasi Anda di atas nama pengguna. Nilai ini memberi tahu layar izin yang ditampilkan Google kepada .

Dengan cakupan, aplikasi Anda dapat hanya meminta akses ke resource yang diperlukan sekaligus memungkinkan pengguna mengontrol jumlah akses yang mereka berikan kepada Anda aplikasi. Jadi, 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 memberikan daftar lengkap cakupan yang dapat Anda gunakan untuk mengakses Google API.

Sebaiknya aplikasi Anda meminta akses ke cakupan otorisasi sesuai konteks jika memungkinkan. Dengan meminta akses ke data pengguna sesuai konteks, melalui otorisasi inkremental, Anda membantu pengguna untuk memahami mengapa aplikasi Anda membutuhkan akses yang dimintanya.

state Direkomendasikan

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

Anda dapat menggunakan parameter ini untuk beberapa tujuan, seperti mengarahkan pengguna ke resource yang benar dalam aplikasi Anda, mengirimkan nonce, dan memitigasi permintaan lintas situs pemalsuan. Karena redirect_uri Anda dapat ditebak, menggunakan state nilai tersebut dapat meningkatkan jaminan bahwa koneksi masuk adalah hasil dari permintaan autentikasi. Jika Anda menghasilkan string acak atau mengenkode {i>hash<i} cookie atau nilai lain yang mencatat status klien, Anda dapat memvalidasi respons untuk pastikan juga bahwa permintaan dan respons berasal dari browser yang sama, memberikan perlindungan terhadap serangan seperti permintaan lintas situs pemalsuan. Lihat OpenID Connect dokumentasi untuk contoh cara membuat dan mengonfirmasi token state.

include_granted_scopes Opsional

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

login_hint Opsional

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

Setel nilai parameter ke alamat email atau ID sub, yang merupakan setara dengan ID Google pengguna.

prompt Opsional

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

Nilai yang dimungkinkan adalah:

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

Contoh pengalihan ke server otorisasi Google

Contoh URL ditampilkan di bawah, dengan jeda baris dan spasi agar lebih mudah dibaca. Permintaan URL akses ke cakupan yang mengizinkan akses untuk mengambil data YouTube pengguna. Model ini menggunakan model otorisasi (include_granted_scopes=true) untuk memastikan bahwa token akses baru mencakup cakupan apa pun yang sebelumnya telah diberikan akses aplikasi oleh pengguna. Beberapa lainnya parameter juga ditetapkan dalam contoh.

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 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 dalam JavaScript tanpa menggunakan Library Klien Google API untuk JavaScript. Karena OAuth ini 2.0 tidak mendukung Cross-Origin Resource Sharing (CORS), cuplikannya 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 akan memutuskan apakah akan memberikan akses yang diminta ke aplikasi Anda. Di tahap ini, Google akan menampilkan jendela izin yang menampilkan nama aplikasi Anda dan Google API layanan yang meminta izin akses untuk mengakses dengan kredensial otorisasi pengguna dan ringkasan dari cakupan akses yang akan diberikan. Tujuan pengguna dapat menyetujui untuk memberikan akses ke satu atau beberapa cakupan yang diminta oleh aplikasi Anda atau menolak permintaan.

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

Error

Permintaan ke endpoint otorisasi OAuth 2.0 Google mungkin menampilkan pesan error yang ditampilkan kepada pengguna alih-alih alur otentikasi dan otorisasi yang diharapkan. Kode error umum dan yang disarankan resolusi tercantum di bawah ini.

admin_policy_enforced

Akun Google tidak dapat memberikan otorisasi ke satu atau beberapa cakupan yang diminta karena kebijakan administrator Google Workspace mereka. Lihat artikel bantuan Admin Google Workspace Mengontrol data pihak ketiga & aplikasi internal mengakses data Google Workspace untuk informasi selengkapnya tentang bagaimana administrator dapat membatasi akses ke semua cakupan atau cakupan yang dibatasi hingga akses diberikan secara eksplisit ke ID klien OAuth Anda.

disallowed_useragent

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

Android

Developer Android mungkin melihat pesan error ini saat membuka permintaan otorisasi di android.webkit.WebView Sebaiknya developer menggunakan library Android seperti Login dengan Google untuk Android atau OpenID Foundation AppAuth untuk Android.

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

iOS

Developer iOS dan macOS mungkin mengalami error ini saat membuka permintaan otorisasi di WKWebView Sebaiknya developer menggunakan library iOS seperti Login dengan Google untuk iOS atau OpenID Foundation AppAuth untuk iOS.

Developer web mungkin mengalami error ini saat aplikasi iOS atau macOS membuka link web umum di agen pengguna yang disematkan dan pengguna membuka endpoint otorisasi OAuth 2.0 Google dari di situs Anda. Developer harus mengizinkan link umum agar terbuka di pengendali link default sistem operasi, yang mencakup Link Universal atau aplikasi browser default. Tujuan SFSafariViewController library juga merupakan opsi yang didukung.

org_internal

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

invalid_client

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

invalid_grant

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

origin_mismatch

Skema, domain, dan/atau port JavaScript asal permintaan otorisasi tidak boleh cocok dengan URI asal JavaScript resmi yang didaftarkan untuk client ID OAuth. Ulasan diizinkan Asal JavaScript di Google API Console Credentials page.

redirect_uri_mismatch

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

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

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

invalid_request

Ada yang salah dengan permintaan yang Anda buat. Ini bisa disebabkan oleh beberapa alasan:

  • Permintaan tidak diformat dengan benar
  • Permintaan tidak berisi parameter yang diperlukan
  • Permintaan tersebut menggunakan metode otorisasi yang tidak didukung oleh Google. Verifikasi 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.

Jika pengguna menyetujui permintaan, respons akan berisi token akses. Jika pengguna tidak menyetujui permintaan, respons berisi pesan error. Token akses atau pesan error ditampilkan di fragmen hash URI pengalihan, seperti yang 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 diatur ke Bearer, dan parameter expires_in, yang menentukan masa berlaku token, dalam hitungan detik. Jika parameter state telah 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.force-ssl&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=http%3A%2F%2Flocalhost%2Foauth2callback&
 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 komputer lokal Anda menyajikan file di alamat tersebut. Langkah berikutnya memberikan detail lebih lanjut tentang informasi yang ditampilkan dalam URI saat pengguna dialihkan kembali ke aplikasi Anda.

Memanggil Google API

Endpoint OAuth 2.0

Setelah aplikasi Anda mendapatkan token akses, Anda bisa menggunakan token tersebut untuk melakukan panggilan ke API atas nama objek jika cakupan akses yang diperlukan oleh API telah diberikan. Untuk melakukannya, sertakan token akses dalam permintaan ke API dengan menyertakan kueri access_token atau nilai Bearer header HTTP Authorization. Jika memungkinkan, header HTTP lebih disukai, karena string kueri cenderung terlihat di log server. Dalam sebagian besar Anda dapat menggunakan library klien untuk menyiapkan panggilan ke Google API (misalnya, saat memanggil YouTube Live Streaming API).

Perhatikan bahwa YouTube Live Streaming API tidak mendukung alur akun layanan. Karena ada bukanlah cara untuk menautkan Akun Layanan ke akun YouTube, berupaya mengotorisasi permintaan dengan alur akan menghasilkan error NoLinkedYouTubeAccount.

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

Contoh GET HTTP

Panggilan ke liveBroadcasts.list endpoint (YouTube Live Streaming API) menggunakan HTTP Authorization: Bearer {i>header<i} akan terlihat seperti berikut. Perhatikan bahwa Anda perlu menentukan token akses Anda sendiri:

GET /youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

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

GET https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

Contoh curl

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

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/youtube/v3/liveBroadcasts?part=id%2Csnippet&mine=true

Atau, sebagai alternatif, opsi parameter string kueri:

curl https://www.googleapis.com/youtube/v3/liveBroadcasts?access_token=access_token&part=id%2Csnippet&mine=true

Kode contoh JavaScript

Cuplikan kode di bawah menunjukkan cara menggunakan CORS (Cross-origin resource sharing) untuk mengirim ke Google API. Contoh ini tidak menggunakan Library Klien Google API untuk JavaScript. Namun, bahkan jika 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 Anda miliki untuk membuat permintaan API atas nama pengguna yang diotorisasi. Informasi lengkap contoh 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/liveBroadcasts?part=id,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 tersebut ditujukan untuk halaman HTML yang menampilkan tombol untuk mencoba permintaan API. Jika Anda mengeklik tombol itu, kode tersebut akan memeriksa untuk melihat apakah laman telah menyimpan Token akses API di penyimpanan lokal browser Anda. Jika demikian, permintaan API akan dijalankan. Jika tidak, proses ini akan memulai alur OAuth 2.0.

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

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

    Permintaan API ini memanggil liveBroadcasts.list YouTube Data API untuk mengambil daftar siaran video untuk saluran YouTube pengguna yang diotorisasi.

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

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

Untuk menjalankan kode ini secara lokal, Anda perlu menetapkan nilai untuk YOUR_CLIENT_ID dan YOUR_REDIRECT_URI variabel 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 diotorisasi untuk klien OAuth 2.0, yang telah Anda konfigurasi di API Console Credentials pageJika nilai ini tidak cocok dengan URI yang diberi otorisasi, Anda akan mendapatkan redirect_uri_mismatch {i>error<i}. Proyek Anda juga harus memiliki 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';

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

      trySampleRequest();
    } else {
      console.log('State mismatch. Possible CSRF attack');
    }
  }

  // Function to generate a random state value
  function generateCryptoRandomState() {
    const randomValues = new Uint32Array(2);
    window.crypto.getRandomValues(randomValues);

    // Encode as UTF-8
    const utf8Encoder = new TextEncoder();
    const utf8Array = utf8Encoder.encode(
      String.fromCharCode.apply(null, randomValues)
    );

    // Base64 encode the UTF-8 data
    return btoa(String.fromCharCode.apply(null, utf8Array))
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  }

  // 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/liveBroadcasts?part=id,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() {
    // create random state value and store in local storage
    var state = generateCryptoRandomState();
    localStorage.setItem('state', state);

    // 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': state,
                  '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 asal JavaScript

Google menerapkan aturan validasi berikut ke origin JavaScript untuk membantu pengembang menjaga keamanan aplikasi mereka. Asal JavaScript Anda harus mematuhi aturan ini. Lihat RFC 3986 bagian 3 untuk mengetahui definisi domain, {i>host<i} 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.

Penyelenggara

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

Domain
  • TLD Host (Domain Tingkat 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 aplikasi memiliki domain.
  • 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 yang tidak mengikuti encoding URL dalam bentuk tanda persen 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 sumber daya, yang diidentifikasi berdasarkan cakupan. Permintaan otorisasi dianggap sebagai praktik pengalaman pengguna terbaik pada saat Anda membutuhkannya. Untuk mengaktifkan praktik tersebut, server otorisasi Google mendukung otorisasi inkremental. Fitur ini memungkinkan Anda meminta cakupan sesuai kebutuhan dan, jika pengguna memberikan izin untuk cakupan baru, menampilkan kode otorisasi yang mungkin ditukar dengan token yang berisi semua cakupan yang telah diberikan pengguna ke project.

    Misalnya, aplikasi mengambil data untuk saluran YouTube pengguna yang diautentikasi dan juga memungkinkan pengguna mengambil data YouTube Analytics melalui alur khusus. Dalam hal ini, saat login aplikasi mungkin hanya meminta akses ke https://www.googleapis.com/auth/youtube.force-ssl ruang lingkup proyek. Namun, jika pengguna mencoba mengakses data Analytics untuk channel-nya, aplikasi juga dapat meminta akses ke cakupan https://www.googleapis.com/auth/yt-analytics.readonly.

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

    • Token dapat digunakan untuk mengakses resource yang terkait dengan cakupan apa pun yang digabungkan ke dalam otorisasi baru yang digabungkan.
    • Saat Anda menggunakan token refresh untuk otorisasi gabungan guna memperoleh token akses, token akses mewakili otorisasi gabungan dan dapat digunakan untuk scope nilai disertakan dalam respons.
    • Otorisasi gabungan mencakup semua cakupan yang diberikan pengguna ke proyek API bahkan jika hibah diminta dari klien yang berbeda. Misalnya, jika pengguna memberikan akses ke satu ruang lingkup menggunakan klien desktop aplikasi dan kemudian memberikan ruang lingkup lain ke aplikasi melalui klien seluler, otorisasi gabungan akan mencakup kedua cakupan.
    • Jika Anda mencabut token yang mewakili otorisasi gabungan, akses ke semua cakupan otorisasi atas nama pengguna terkait dicabut secara bersamaan.

    Contoh kode di bawah ini menunjukkan cara menambahkan cakupan ke token akses yang ada. Pendekatan ini memungkinkan aplikasi Anda sehingga tidak perlu mengelola banyak token akses.

    Endpoint OAuth 2.0

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

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

    Cuplikan kode berikut menunjukkan cara melakukannya. Cuplikan tersebut mengasumsikan bahwa Anda telah menyimpan cakupan di mana token akses Anda valid dalam penyimpanan lokal browser. ( kode contoh lengkap menyimpan daftar cakupan tempat token akses valid dengan menyetel properti oauth2-test-params.scope di parameter storage.)

    Cuplikan ini membandingkan cakupan tempat token akses valid 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 yang disediakan di langkah 2 (dan yang diberikan nanti dalam langkah selesai contoh).

    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 mengunjungi Setelan Akun. Lihat Hapus bagian akses situs atau aplikasi di situs pihak ketiga & aplikasi yang memiliki akses ke akun Anda dokumen dukungan untuk informasi selengkapnya.

    Aplikasi juga dapat mencabut akses yang diberikan kepadanya secara terprogram. Pencabutan terprogram penting jika pengguna berhenti berlangganan, menghapus aplikasi, atau sumber daya API yang dibutuhkan oleh aplikasi telah berubah secara signifikan. Dengan kata lain, {i>SUMIF<i} memiliki daftar sel bagian dari proses penghapusan dapat mencakup permintaan API untuk memastikan yang diberikan ke aplikasi akan 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 tersebut adalah token akses dan memiliki token pembaruan yang sesuai, token pembaruan juga akan dicabut.

    Jika pencabutan berhasil diproses, kode status HTTP respons tersebut adalah 200. Untuk kondisi error, kode status HTTP 400 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 jika token tidak mendukung Cross-origin Resource Sharing (CORS), kode akan membuat formulir dan mengirimkan formulir 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();
    }

    Menerapkan Perlindungan Lintas Akun

    Langkah tambahan yang harus Anda ambil untuk melindungi akun menerapkan Lintas Akun Perlindungan dengan menggunakan Layanan Perlindungan Lintas Akun Google. Layanan ini memungkinkan Anda berlangganan pemberitahuan peristiwa keamanan yang memberikan informasi ke aplikasi Anda tentang perubahan besar pada akun pengguna. Selanjutnya, Anda dapat menggunakan informasi tersebut untuk mengambil tindakan, bergantung pada bagaimana Anda memutuskan untuk menanggapi peristiwa.

    Beberapa contoh jenis peristiwa yang dikirim ke aplikasi Anda oleh Cross-Account Protection Service Google adalah:

    • https://schemas.openid.net/secevent/risc/event-type/sessions-revoked
    • https://schemas.openid.net/secevent/oauth/event-type/token-revoked
    • https://schemas.openid.net/secevent/risc/event-type/account-disabled

    Lihat Melindungi akun pengguna dengan halaman Perlindungan Lintas Akun untuk mengetahui informasi selengkapnya tentang cara menerapkan Perlindungan Lintas Akun dan daftar lengkap peristiwa yang tersedia.