Drive and Photo Service：Akses untuk aplikasi JWT

Ikhtisar aplikasi JWT

Dalam topik ini, aplikasi JWT adalah aplikasi kustom yang menggunakan mekanisme JWT untuk otentikasi identitas.

Setelah Anda menandatangani data di server aplikasi JWT menggunakan kunci privat, asersi JWT akan dibuat. Asersi JWT digunakan sebagai kredensial untuk mengakses Drive and Photo Service, di mana kunci publik telah dikonfigurasi.

Skenario

1. Sebuah perusahaan memiliki sistem perangkat lunak internal dengan sistem akun independen. Perusahaan tersebut ingin pengguna internal menggunakan halaman masuk internal untuk mengakses Drive and Photo Service.

2. Sebuah perusahaan memiliki portal masuk dengan sistem akun independen. Perusahaan tersebut ingin mengaitkan portal masuk dengan Drive and Photo Service untuk membangun sistem penyimpanan cloud yang dapat diakses melalui sistem akun independen.

Cara kerjanya

1. Buat domain kustom dan aplikasi JWT di Konsol Drive and Photo Service.

2. Gunakan algoritma Rivest–Shamir–Adleman (RSA) untuk membuat kunci publik dan kunci privat. Simpan kunci publik di server Drive and Photo Service dan kunci privat di server aplikasi JWT.

3. Setelah Anda mengkodekan data dan menandatanganinya menggunakan kunci privat di server aplikasi JWT, asersi JWT akan dibuat. Kemudian, asersi JWT dikirim ke Drive and Photo Service.

4. Setelah Drive and Photo Service menggunakan kunci publik untuk memverifikasi bahwa asersi JWT valid, Drive and Photo Service mengembalikan token akses ke server aplikasi JWT. Server aplikasi JWT kemudian dapat menggunakan token akses untuk memanggil operasi API Drive and Photo Service.

Prosedur

1. Konfigurasikan pasangan kunci

1.1 Buat domain atau pilih domain yang ada

1.2 Buat aplikasi atau pilih aplikasi yang ada

Klik nama domain untuk masuk ke halaman detail. Di halaman yang muncul, klik tab Aplikasi. Pada tab Aplikasi, buat aplikasi JWT atau pilih aplikasi JWT yang ada.

1.3 Atur kunci publik

Temukan aplikasi JWT yang ingin Anda kelola dan klik Set Public Key di kolom Tindakan.

Hasilkan pasangan kunci publik-privat.

Setelah pasangan kunci dihasilkan, salin kunci privat dan simpan secara rahasia. Klik OK.

2. Dapatkan token akses

2.1 Dapatkan asersi JWT dari server aplikasi JWT

Setelah Anda mengkodekan data dan menggunakan kunci privat yang disalin untuk menandatangani data berdasarkan algoritma enkripsi yang ditentukan di server aplikasi JWT, asersi JWT akan dihasilkan. Contoh kode Node.js berikut menunjukkan cara mendapatkan asersi JWT:

const JWT = require('jsonwebtoken');

function signAssertion({ domain_id, client_id, user_id, privateKeyPEM }) {
  var now_sec = parseInt(Date.now() / 1000);
  var opt = {
    iss: client_id,
    sub: user_id,
    sub_type: "user",
    aud: domain_id,
    jti: Math.random().toString(36).substring(2),
    exp: now_sec + 60,
    // iat: now_sec,
    // nbf: '',
    auto_create: false,
  };
  return JWT.sign(opt, privateKeyPEM, {
    algorithm: "RS256",
  });
}

Parameter opt

Untuk informasi lebih lanjut tentang pustaka pihak ketiga dan algoritma enkripsi JWT, kunjungi situs resmi JWT.

2.2 Tukar asersi JWT dengan token akses

Contoh kode berikut menunjukkan cara memanggil operasi Authorize untuk menukar asersi JWT dengan token akses:

POST /v2/oauth/token
Content-Type: application/x-www-form-urlencoded

grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer&client_id=${APP_ID}&assertion=xxxxxxxxxx

Parameter Permintaan

Contoh Token Akses dalam Format JSON:

{
  "access_token": "eyJh****eQdnUTsEk4",
  "refresh_token": "kL***Lt",
  "expires_in": 7200,
  "token_type": "Bearer"
}

Setelah server aplikasi JWT memperoleh token akses, token akses dikirim ke server web JWT. Server web JWT dapat menggunakan token akses untuk memanggil operasi API Drive and Photo Service dan mengakses sumber daya yang disimpan di Drive and Photo Service.

2.3 Segarkan token akses

Token akses yang diperoleh menggunakan aplikasi JWT hanya berlaku selama dua jam. Setelah token akses kedaluwarsa, Anda dapat melakukan Langkah 2.1 dan 2.2 untuk mendapatkan token akses baru. Anda juga dapat memanggil operasi API Drive and Photo Service untuk menyegarkan token akses dalam tujuh hari. Setelah tujuh hari, Anda harus mengikuti Langkah 2.1 dan 2.2 untuk mendapatkan token akses baru.

Contoh kode berikut menunjukkan cara memanggil operasi Authorize untuk menyegarkan token akses:

POST /v2/oauth/token
Content-Type: application/x-www-form-urlencoded

client_id=${APPID}&refresh_token=${access_token}&grant_type=refresh_token&redirect_uri=${REDIRECT_URI}

(Opsional) 3. Gunakan UI dasar Drive and Photo Service

Jika Anda tidak ingin mengembangkan antarmuka pengguna (UI) dan UI dasar yang disediakan oleh Drive and Photo Service dapat memenuhi kebutuhan bisnis Anda, Anda dapat menggunakan UI dasar.

Metode 1:

Gunakan metode window.open() untuk membuka UI dasar dan gunakan metode postMessage() untuk mengirim token akses.

Contoh:

const endpoint = `https://${domain_id}.apps.aliyunpds.com`
const url = `${endpoint}/accesstoken?origin=${location.origin}`
var win = window.open(url)

window.addEventListener('message', onMessage, false)
async function onMessage(e) {
  if (e.data.code == 'token' && e.data.message == 'ready') {
    var result = await getToken();//  Dapatkan token akses dari server aplikasi JWT.
    //result = {"access_token": ...}
    win.postMessage({
      code: 'token',
      message: result
    }, endpoint || '*')

    window.removeEventListener('message', onMessage)
  }
}

Metode 2:

Gunakan iframe untuk menyematkan UI dasar dan gunakan metode postMessage() untuk mengirim token akses.

Contoh:

const endpoint = `https://${domain_id}.apps.aliyunpds.com`
// Gunakan iframe untuk menyematkan UI dasar pada halaman host.
const iframeURL = `${endponit}/accesstoken?origin=${location.origin}`

Contoh dalam HTML:

// Tentukan variabel iframeURL.
<iframe id="ifr" src="iframeURL"></iframe>

window.addEventListener('message', onMessage)
async function onMessage(e) {
  if (e.data.code == 'token' && e.data.message == 'ready') {
    var result = await getToken();//  Dapatkan token akses dari server aplikasi JWT.
    //result = {"access_token": ......}
    document.getElementById('ifr').contentWindow.postMessage({
        code: 'token',
        message: result
    }, endpoint || '*')

    window.removeEventListener('message', onMessage)
  }
}

Sebagai contoh, jika URL halaman host adalah https://example.com/a.html, asal halaman host adalah https://example.com. Dalam kasus ini, masukkan example.com, seperti yang ditunjukkan pada gambar berikut.

Metode 3:

Gunakan iframe untuk menyematkan UI dasar pada halaman masuk kustom.

Tentukan URL halaman masuk kustom dan ID aplikasi JWT. Kemudian, token akses dapat diperbarui secara otomatis di UI dasar.

Setelah permintaan masuk dikirim, sistem menampilkan halaman masuk kustom daripada halaman masuk default UI dasar.

Setelah pengguna masuk ke sistem, UI dasar mengirimkan token akses ke halaman masuk kustom menggunakan metode postMessage().

if(parent!=self){
  let origin = ''
  parent.postMessage({
    code: 'token',
    message: {
       access_token: 'xxxx',
       refresh_token: 'xxxx',
       ...
    }
  }, endpoint || "*")
}

Lampiran 1: Contoh kode dalam Node.js

Contoh kode berikut menunjukkan cara mendapatkan token akses menggunakan aplikasi JWT dan cara menyegarkan token akses:

const fs = require('fs')
const JWT = require('jsonwebtoken');
const axios = require('axios')

const DOMAIN_ID = '' // ID domain.
const APP_ID = '' // ID aplikasi JWT.
const USER_ID = '' // ID pengguna.
const PRIVATE_KEY_PEM = '' // Kunci privat, yang diperoleh di Langkah 1.3.
const PRE = `https://${domain_id}.api.aliyunpds.com`

async function init() {
  try {
    // Tentukan variabel berikut berdasarkan kebutuhan bisnis Anda. 
    var params = {
      domain_id: DOMAIN_ID,
      client_id: APP_ID,
      user_id: USER_ID,
      privateKeyPEM: PRIVATE_KEY_PEM,
    };
    var assertion = signAssertion(params)
    var obj = await getToken(assertion)
    return obj.data
  } catch (e) {
    if (e.response) {
      console.log(e.response.status)
      console.log(e.response.headers)
      console.log(e.response.data)
    } else {
      console.error(e)
    }
  }
}

function signAssertion({ domain_id, client_id, user_id, privateKeyPEM }) {
  var now_sec = parseInt(Date.now()/1000)
  var opt = {
    iss: client_id,
    sub: user_id,
    sub_type: 'user',
    aud: domain_id,
    jti: Math.random().toString(36).substring(2),
    exp: now_sec + 300,
    // iat: now_sec,
    // nbf: '',
    auto_create: true,
  };
  return JWT.sign(opt, privateKeyPEM, {
    algorithm: 'RS256'
  });
}

async function getToken(assertion) {
  return await axios({
    method: 'post',
    url: PRE + '/v2/oauth/token',
    // Catatan: Atur header Content-Type ke application/x-www-form-urlencoded.
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    // Catatan: Tentukan parameter permintaan di badan permintaan.
    data: params({
      grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer',
      client_id: APP_ID,
      assertion
    })
  })
}

async function refreshToken(refresh_token) {
  return await axios({
    method: 'post',
    url: PRE + '/v2/oauth/token',
    // Catatan: Atur header Content-Type ke application/x-www-form-urlencoded.
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    // Catatan: Tentukan parameter permintaan di badan permintaan.
    data: params({
      grant_type: 'refresh_token',
      client_id: APP_ID,
      refresh_token,
    })
  })
}

function params(m){
  const params = new URLSearchParams();
  for(var k in m){ 
     params.append(k, m[k]);
  }
  return params;
}

// Panggilan uji.
;(async ()=>{
  let result = await init() 
  console.log(result) // Kembalikan token akses dalam struktur {access_token:...}. Untuk informasi lebih lanjut tentang struktur token akses, lihat Lampiran 2 dalam topik ini.
  // Segarkan token akses setelah token akses kedaluwarsa.
  refreshToken(result.refreshToken) // Kembalikan token akses baru dalam struktur {access_token:...}. Untuk informasi lebih lanjut tentang struktur token akses, lihat Lampiran 2 dalam topik ini.
})();

Lampiran 2: Struktur token akses

Contoh:

{
  access_token: 'eyJhbG.....g7M0p28',
  refresh_token: '62f1acc.......9b781f3',
  expires_in: 7200,
  token_type: 'Bearer',
  ......
}