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:
- Open the API Library di Google API Console.
- If prompted, select a project, or create a new one.
- 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.
- Go to the Credentials page.
- Klik Create credentials > Client ID OAuth yang baru.
- Pilih jenis aplikasi Web application.
- 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/youtube | Mengelola akun YouTube Anda |
| https://www.googleapis.com/auth/youtube.channel-memberships.creator | Melihat 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-ssl | Melihat, mengedit, dan secara permanen menghapus video, rating, komentar, dan teks YouTube |
| https://www.googleapis.com/auth/youtube.readonly | Melihat akun YouTube Anda |
| https://www.googleapis.com/auth/youtube.upload | Mengelola video YouTube Anda |
| https://www.googleapis.com/auth/youtubepartner | Melihat dan mengelola aset Anda dan konten terkait di YouTube |
| https://www.googleapis.com/auth/youtubepartner-channel-audit | Melihat 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 Perhatikan bahwa skema |
||||||||||||||||
response_type |
Wajib
Aplikasi JavaScript perlu menetapkan nilai parameter ke |
||||||||||||||||
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:
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 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 |
||||||||||||||||
include_granted_scopes |
Opsional
Memungkinkan aplikasi menggunakan otorisasi tambahan untuk meminta akses ke
cakupan dalam konteks. Jika Anda menetapkan nilai parameter ini ke |
||||||||||||||||
enable_granular_consent |
Opsional
Default-nya adalah Jika Google mengaktifkan izin terperinci untuk aplikasi, parameter ini tidak akan tidak lagi memiliki pengaruh apa pun. |
||||||||||||||||
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 |
||||||||||||||||
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:
|
||||||||||||||||
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 parametertoken_type, yang selalu diatur keBearer, dan parameterexpires_in, yang menentukan masa berlaku token, dalam hitungan detik. Jika parameterstatetelah 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:
- Ini mengarahkan pengguna ke server OAuth 2.0 Google, yang meminta akses ke
https://www.googleapis.com/auth/youtube.force-sslcakupan. - 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.
Halaman menggunakan token akses untuk membuat permintaan API contoh.
Permintaan API ini memanggil
liveBroadcasts.listYouTube Data API untuk mengambil daftar siaran video untuk saluran YouTube pengguna yang diotorisasi.- 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 |
“googleusercontent.com”.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:
|
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
scopenilai 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.