Topik ini menjelaskan cara aplikasi web JavaScript frontend mengakses Drive and Photo Service menggunakan OAuth 2.0. Aplikasi web JavaScript frontend dapat berupa Plugin Chrome atau widget dalam JavaScript.
Karena aplikasi ini adalah aplikasi frontend, tidak aman untuk menyimpan informasi rahasia seperti AppSecret di dalam aplikasi tersebut. Prosedur otorisasi Drive and Photo Service untuk aplikasi ini berbeda dari aplikasi server web.
1. Ikhtisar
(1) Jenis Pemberian Izin Implisit OAuth 2.0
Jenis Pemberian Izin Implisit memungkinkan aplikasi mendapatkan token akses langsung dari server otorisasi peramban tanpa perlu kode otorisasi dari server aplikasi pihak ketiga. Semua operasi dilakukan di peramban. Token terlihat oleh semua pengunjung dan tidak memerlukan otorisasi tambahan di sisi klien.
(2) Diagram Alir SPA
2. Persiapan
(1) Buat Domain
Buat domain di Konsol PDS (Drive and Photo Service). Setelah domain dibuat, nama domain API tingkat keempat dalam format https://{domainId}.api.aliyunpds.com akan disediakan.
(2) Aktifkan Halaman Log Masuk
Aktifkan halaman log masuk yang disediakan oleh Drive and Photo Service untuk otorisasi. Drive and Photo Service menyediakan nama domain tingkat keempat berikut: https://{domainId}.api.aliyunpds.com.
(3) Buat Aplikasi sebagai Klien OAuth di Konsol Drive and Photo Service
Buat aplikasi dengan memilih WebBrowser (Aplikasi Klien Web) sebagai Tipe. Tentukan parameter Ruang Lingkup Izin. Untuk informasi lebih lanjut, lihat Ruang Lingkup. Ruang lingkup akan ditampilkan di halaman persetujuan. Konfigurasikan URI pengalihan. Setelah aplikasi dibuat, Anda bisa mendapatkan AppId aplikasi, yang digunakan sebagai ClientId untuk otorisasi OAuth.
3. Prinsip otorisasi dan operasi API
(1) Panggil Operasi Otorisasi
Jalankan perintah berikut di halaman baru:
// Buka halaman web untuk otorisasi.
var domainId ='ID domain Anda'
var authWin = window.open('https://'+domainId+'.api.aliyunpds.com/v2/oauth/authorize?client_id='+APP_ID+'&response_type=token&state=abc&login_type=default&redirect_uri=http://example.com/callback', '_blank', 'location=0,status=0,titlebar=0,menubar=0,resizable=0,height=500,width=600', true)
authWin.onmessage=function(e){
var hash = e.data;
// Parse nilai hash untuk mendapatkan token akses.
}Sintaks permintaan API:
GET /v2/oauth/authorize?client_id=<APPID>&response_type=token&state=[state]&login_type=<login_type>&redirect_uri=<redirect_uri> HTTP/1.1
Host: {domainId}.api.aliyunpds.comParameter | Diperlukan | Deskripsi |
client_id | Ya | AppId aplikasi Anda. Jika Anda tidak memiliki AppId, buat aplikasi untuk mendapatkan AppId di konsol Drive and Photo Service. |
redirect_uri | Ya | URI tempat server otorisasi Drive and Photo Service mengarahkan pengguna setelah proses otorisasi selesai. URL yang disediakan oleh aplikasi server web. Contoh: |
scope | Tidak | Ruang lingkup yang menentukan izin yang diperlukan oleh aplikasi Anda. Ruang lingkup akan ditampilkan di halaman persetujuan. Untuk informasi lebih lanjut, lihat Ruang Lingkup. |
response_type | Ya | Tipe respons. Atur nilainya menjadi |
state | Tidak, tapi direkomendasikan | Jika parameter ini ditentukan, server otorisasi Drive and Photo Service mengembalikan nilai ini utuh di URI pengalihan untuk mencegah serangan ulang. |
login_type | Ya | Metode log masuk. Nilai valid: |
hide_consent | Tidak | Menentukan apakah akan menampilkan halaman persetujuan jika pengguna masuk untuk pertama kali. Nilai valid: |
lang | Tidak | Bahasa halaman yang ditampilkan. Nilai valid: |
(2) URI Pengalihan
Jika otorisasi berhasil, server otorisasi Drive and Photo Service akan mengarahkan pengguna ke URI dalam format berikut:
http://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer.Jika otorisasi gagal, server otorisasi Drive and Photo Service akan mengarahkan pengguna ke URI dalam format berikut:
http://example.com/callback#error=xxxxxx.
Contoh Kode:
<!DOCTYPE html>
<html>
<body>
<script>
var hash = location.hash;
if (hash) {
var sch = new URLSearchParams(hash.replace(/^#?/g, ''))
var access_token = sch.get('access_token')
var expires_in = parseInt(sch.get('expires_in'))
var expire_time = sch.get('expire_time')
if(!isNaN(expires_in) && !expire_time){
expire_time=new Date(Date.now()+expires_in*1000).toISOString()
}
var token_type = sch.get('token_type')
var state = JSON.parse(sch.get('state') || '{}')
top.opener.postMessage({ access_token, expires_in,expire_time, token_type }, state.origin)
window.location.replace(window.location.origin + window.location.pathname)
} else {
window.close()
}
</script>
</body>
</html>Parse nilai hash di halaman panggil balik untuk mendapatkan token akses. Gunakan postMessage() untuk mengaktifkan komunikasi antara halaman web autentikasi dan halaman tujuan pengalihan pengguna.
(3) Dapatkan Token Akses
Di halaman web autentikasi, Anda dapat mendapatkan token akses yang dikembalikan oleh postMessage() dari halaman tujuan pengalihan.
4. Panggil operasi API Drive and Photo Service
Aplikasi dapat menggunakan token akses untuk memanggil operasi API Drive and Photo Service. Token akses harus disertakan dalam header Authorization dari permintaan API.
Untuk informasi lebih lanjut, lihat Metode Pemanggilan.