Library JavaScript google.accounts.oauth2 membantu Anda meminta izin pengguna dan mendapatkan token akses untuk menggunakan data pengguna. Hal ini didasarkan pada alur
pemberian implisit OAuth 2.0 dan dirancang untuk memungkinkan Anda memanggil Google API secara langsung menggunakan REST dan CORS, atau menggunakan library klien Google API untuk JavaScript (juga dikenal sebagai gapi.client) untuk akses yang sederhana dan fleksibel ke API kami yang lebih kompleks.
Sebelum mengakses data pengguna yang dilindungi dari browser, pengguna di situs Anda memicu proses pemilihan akun, login, dan izin berbasis web Google, dan terakhir server OAuth Google menerbitkan dan menampilkan token akses ke aplikasi web Anda.
Dalam model otorisasi berbasis token, tidak perlu menyimpan token refresh per pengguna di server backend Anda.
Sebaiknya Anda mengikuti pendekatan yang diuraikan di sini, bukan teknik yang dibahas dalam panduan OAuth 2.0 untuk Aplikasi Web Sisi Klien yang lebih lama.
Prasyarat
Ikuti langkah-langkah yang dijelaskan di Penyiapan untuk mengonfigurasi Layar Izin OAuth, mendapatkan ID klien, dan memuat library klien.
Menginisialisasi klien token
Panggil initTokenClient() untuk menginisialisasi klien token baru dengan ID klien aplikasi web Anda. Anda harus menyertakan daftar satu atau beberapa cakupan yang perlu diakses pengguna:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
Memicu alur token OAuth 2.0
Gunakan metode requestAccessToken() untuk memicu alur UX token dan mendapatkan
token akses. Google meminta pengguna untuk:
- Pilih akunnya,
- login ke Akun Google jika belum login,
- memberikan izin agar aplikasi web Anda dapat mengakses setiap cakupan yang diminta.
Gestur pengguna memicu alur token: <button onclick="client.requestAccessToken();">Authorize me</button>
Kemudian, Google akan menampilkan TokenResponse yang berisi token akses dan daftar cakupan yang telah diberi akses oleh pengguna, atau error, ke pengendali panggilan balik Anda.
Pengguna dapat menutup jendela pemilih akun atau login, sehingga fungsi callback Anda tidak akan dipanggil.
Cara menangani izin
Desain dan pengalaman pengguna untuk aplikasi Anda harus diterapkan hanya setelah peninjauan menyeluruh terhadap Kebijakan OAuth 2.0 Google. Kebijakan ini mencakup cara kerja dengan beberapa cakupan, kapan dan cara menangani izin pengguna, dan lainnya.
Otorisasi inkremental adalah kebijakan dan metodologi desain aplikasi yang digunakan untuk meminta akses ke resource, menggunakan cakupan, hanya sesuai kebutuhan, bukan di awal dan sekaligus. Pengguna dapat menyetujui atau menolak berbagi masing-masing resource yang diminta oleh aplikasi Anda, yang dikenal sebagai izin terperinci.
Selama proses ini, Google akan meminta izin pengguna, mencantumkan setiap cakupan yang diminta satu per satu, pengguna akan memilih resource yang akan dibagikan dengan aplikasi Anda, dan terakhir, Google akan memanggil fungsi callback Anda untuk menampilkan Token akses dan cakupan yang disetujui pengguna. Aplikasi Anda kemudian menangani berbagai kemungkinan hasil dengan aman menggunakan izin terperinci.
Namun, ada pengecualian. Aplikasi Google Workspace Enterprise dengan delegasi otoritas di seluruh domain atau aplikasi yang ditandai sebagai Tepercaya, melewati layar izin izin terperinci. Untuk aplikasi ini, pengguna tidak akan melihat layar izin izin terperinci. Sebagai gantinya, aplikasi Anda akan menerima semua cakupan yang diminta atau tidak sama sekali.
Untuk mengetahui informasi yang lebih mendetail, lihat Cara menangani izin terperinci.
Otorisasi inkremental
Untuk aplikasi web, dua skenario tingkat tinggi berikut menunjukkan otorisasi inkremental menggunakan:
- Aplikasi Ajax satu halaman, sering menggunakan
XMLHttpRequestdengan akses dinamis ke resource. - Beberapa halaman web dan resource dipisahkan dan dikelola berdasarkan per halaman.
Kedua skenario ini disajikan untuk mengilustrasikan pertimbangan dan metodologi desain, tetapi tidak dimaksudkan sebagai rekomendasi komprehensif tentang cara membangun izin ke dalam aplikasi Anda. Aplikasi dunia nyata dapat menggunakan variasi atau kombinasi teknik ini.
Ajax
Tambahkan dukungan untuk otorisasi inkremental ke aplikasi Anda dengan melakukan beberapa panggilan
ke requestAccessToken() dan menggunakan parameter
scope objek OverridableTokenClientConfig untuk meminta cakupan individual pada saat diperlukan dan
hanya jika diperlukan. Dalam contoh ini, resource akan diminta dan terlihat hanya setelah gestur pengguna meluaskan bagian konten yang diciutkan.
| Aplikasi Ajax |
|---|
Lakukan inisialisasi klien token saat halaman dimuat:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: "onTokenResponse",
});
Dokumen untuk dibacaMenampilkan dokumen terbaru
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/documents.readonly'
})
);
Acara mendatangTampilkan info kalender
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/calendar.readonly'
})
);
Carousel fotoMenampilkan foto
client.requestAccessToken(
overrideConfig = ({
scope = 'https://www.googleapis.com/auth/photoslibrary.readonly'
})
);
|
Setiap panggilan ke requestAccessToken memicu momen izin pengguna, aplikasi Anda hanya akan memiliki akses ke resource yang diperlukan oleh bagian yang dipilih pengguna untuk diperluas, sehingga membatasi berbagi resource melalui pilihan pengguna.
Beberapa halaman web
Saat mendesain otorisasi inkremental, beberapa halaman digunakan untuk meminta hanya cakupan yang diperlukan untuk memuat halaman, sehingga mengurangi kompleksitas dan kebutuhan untuk melakukan beberapa panggilan untuk mendapatkan izin pengguna dan mengambil token akses.
| Aplikasi multi-halaman | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Setiap halaman meminta cakupan yang diperlukan dan mendapatkan token akses dengan memanggil
initTokenClient() dan requestAccessToken() pada waktu pemuatan. Dalam skenario ini,
halaman web individual digunakan untuk memisahkan fungsi dan
resource pengguna secara jelas berdasarkan cakupan. Dalam situasi dunia nyata, setiap halaman dapat meminta beberapa cakupan terkait.
Izin terperinci
Izin terperinci ditangani dengan cara yang sama di semua skenario; setelah
requestAccessToken() memanggil fungsi callback Anda dan token akses
dikembalikan, periksa apakah pengguna telah menyetujui cakupan yang diminta menggunakan
hasGrantedAllScopes() atau hasGrantedAnyScope(). Contoh:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
Hibah yang diterima sebelumnya dari sesi atau permintaan sebelumnya juga akan disertakan dalam respons. Catatan izin pengguna disimpan per pengguna dan
ID Klien, dan tetap ada di beberapa panggilan ke initTokenClient() atau
requestAccessToken(). Secara default, izin pengguna hanya diperlukan saat pertama kali pengguna mengunjungi situs Anda dan meminta cakupan baru, tetapi dapat diminta pada setiap pemuatan halaman menggunakan prompt=consent dalam objek konfigurasi Klien Token.
Bekerja dengan token
Dalam model Token, token akses tidak disimpan oleh OS atau browser, melainkan token baru diperoleh terlebih dahulu pada waktu pemuatan halaman, atau selanjutnya dengan memicu panggilan ke requestAccessToken() melalui gestur pengguna seperti penekanan tombol.
Menggunakan REST dan CORS dengan Google API
Token akses dapat digunakan untuk membuat permintaan terautentikasi ke Google API menggunakan REST dan CORS. Hal ini memungkinkan pengguna untuk login, memberikan izin, Google mengeluarkan token akses, dan situs Anda bekerja dengan data pengguna.
Dalam contoh ini, lihat acara kalender mendatang pengguna yang login menggunakan
token akses yang ditampilkan oleh tokenRequest():
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
Lihat Cara menggunakan CORS untuk mengakses Google API untuk mengetahui informasi selengkapnya.
Bagian berikutnya membahas cara berintegrasi dengan mudah dengan API yang lebih kompleks.
Menggunakan library JavaScript Google API
Klien token berfungsi dengan Library Klien Google API untuk JavaScript Lihat cuplikan kode di bawah.
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
Akhir masa berlaku token
Secara desain, token akses memiliki masa berlaku yang singkat. Jika masa berlaku token akses berakhir
sebelum akhir sesi pengguna, dapatkan token baru dengan memanggil
requestAccessToken() dari peristiwa yang didorong pengguna seperti penekanan tombol.
Menggunakan token akses untuk mencabut izin
Panggil metode google.accounts.oauth2.revoke untuk menghapus izin pengguna dan akses ke resource untuk semua cakupan yang diberikan ke aplikasi Anda. Token akses yang valid diperlukan untuk mencabut izin ini:
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});