Library JavaScript google.accounts.oauth2 membantu Anda meminta izin pengguna dan mendapatkan token akses untuk digunakan dengan data pengguna. Hal ini didasarkan pada alur pemberian izin 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 kami (juga dikenal sebagai gapi.client) untuk akses sederhana dan fleksibel ke API kami yang lebih kompleks.
Sebelum mengakses data pengguna yang dilindungi dari browser, pengguna di situs Anda memicu proses pemilih akun, login, dan izin berbasis web dari Google. Terakhir, server OAuth Google mengeluarkan dan menampilkan token akses ke aplikasi web Anda.
Dalam model otorisasi berbasis token, Anda tidak perlu menyimpan token refresh per pengguna di server backend.
Sebaiknya ikuti pendekatan yang diuraikan di sini, bukan teknik yang dijelaskan dalam panduan OAuth 2.0 untuk Aplikasi Web Sisi Klien yang lebih lama.
Penyiapan
Temukan atau buat client ID dengan mengikuti langkah-langkah yang dijelaskan dalam panduan Mendapatkan client ID Google API. Selanjutnya, tambahkan library klien ke halaman di situs Anda yang akan memanggil Google API. Terakhir, lakukan inisialisasi klien token. Biasanya, hal ini dilakukan dalam pengendali onload library klien.
Menginisialisasi klien token
Panggil initTokenClient() untuk menginisialisasi klien token baru dengan client ID aplikasi web Anda. Anda juga dapat 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 akan meminta pengguna untuk:
- Pilih akun mereka,
- masuk ke Akun Google jika belum masuk,
- memberikan izin bagi aplikasi web Anda untuk 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 callback Anda.
Pengguna dapat menutup pemilih akun atau jendela login, yang dalam hal ini fungsi callback Anda tidak akan dipanggil.
Cara menangani izin
Desain dan pengalaman pengguna untuk aplikasi Anda sebaiknya diterapkan hanya setelah meninjau Kebijakan OAuth 2.0 Google secara menyeluruh. Kebijakan ini mencakup penggunaan beberapa cakupan, waktu dan cara menangani izin pengguna, dan lainnya.
Otorisasi inkremental adalah metodologi desain dan kebijakan yang digunakan untuk meminta akses ke resource, menggunakan cakupan, hanya sesuai kebutuhan, bukan di muka dan sekaligus. Pengguna dapat menyetujui atau menolak pembagian resource individual yang diminta oleh aplikasi Anda. Hal ini dikenal sebagai izin terperinci.
Selama proses ini, Google akan meminta izin pengguna, dengan mencantumkan setiap cakupan yang diminta satu per satu, pengguna memilih resource yang akan dibagikan ke aplikasi Anda, dan terakhir, Google memanggil fungsi callback Anda untuk menampilkan token Akses dan cakupan yang disetujui pengguna. Aplikasi Anda kemudian menangani berbagai hasil yang berbeda secara aman dengan izin terperinci.
Otorisasi inkremental
Untuk aplikasi web, dua skenario tingkat tinggi berikut menunjukkan penggunaan otorisasi inkremental:
- Aplikasi Ajax satu halaman, yang sering menggunakan
XMLHttpRequestdengan akses dinamis ke resource. - Beberapa halaman web, aset dipisahkan dan dikelola di setiap halaman.
Kedua skenario ini disajikan untuk menggambarkan pertimbangan dan metodologi desain, tetapi tidak dimaksudkan sebagai rekomendasi komprehensif tentang cara membuat izin di aplikasi Anda. Aplikasi di 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 setiap cakupan pada saat dibutuhkan 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",
});
Minta izin dan dapatkan token akses melalui gestur pengguna,
klik `+` untuk membuka:
Dokumen untuk dibacaTampilkan 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
diluaskan, sehingga membatasi berbagi resource melalui pilihan pengguna.
Beberapa halaman web
Ketika mendesain untuk otorisasi tambahan, beberapa halaman digunakan untuk meminta hanya cakupan yang diperlukan untuk memuat halaman, sehingga mengurangi kerumitan dan perlu melakukan beberapa panggilan untuk mendapatkan izin pengguna dan mengambil token akses.
| Aplikasi multihalaman | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Setiap halaman meminta cakupan yang diperlukan dan memperoleh token akses dengan memanggil initTokenClient() dan requestAccessToken() pada waktu pemuatan. Dalam skenario ini, masing-masing halaman digunakan untuk memisahkan dengan jelas fungsionalitas dan resource pengguna berdasarkan cakupan. Dalam situasi 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 dan token akses
ditampilkan, pastikan 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
...
}
}
},
});
Setiap pemberian izin yang diterima sebelumnya dari sesi atau permintaan sebelumnya juga akan
disertakan dalam respons. Data izin pengguna dikelola per pengguna dan Client ID, serta tetap ada di beberapa panggilan ke initTokenClient() atau requestAccessToken(). Secara default, izin pengguna hanya diperlukan saat pengguna pertama kali mengunjungi situs Anda dan meminta cakupan baru, tetapi dapat diminta di setiap pemuatan halaman menggunakan prompt=consent dalam objek konfigurasi Klien Token.
Menangani token
Dalam model Token, token akses tidak disimpan oleh OS atau browser. Token baru pertama kali diperoleh pada waktu pemuatan halaman, atau kemudian dengan memicu panggilan ke requestAccessToken() melalui gestur pengguna seperti menekan tombol.
Menggunakan REST dan CORS dengan Google API
Token akses dapat digunakan untuk membuat permintaan yang diautentikasi ke Google API menggunakan REST dan CORS. Dengan begitu, pengguna dapat login, memberikan izin, dan Google mengeluarkan token akses, dan situs Anda dapat menggunakan 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 mudah berintegrasi 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
Menurut desainnya, token akses memiliki masa pakai yang singkat. Jika masa berlaku token akses berakhir sebelum akhir sesi pengguna, dapatkan token baru dengan memanggil requestAccessToken() dari peristiwa berbasis 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);
});