Login Form Menggunakan Request

by

Walaupun cukup kompleks, proses login dapat dilakukan dengan menggunakan object request. Sebetulnya akan lebih mudah jika menggunakan headless browser.

Untuk melakukan testing login, kita gunakan website yang memang disediakan untuk latihan dan testing scraping. Silakan kunjungi webnya di http://toscrape.com

Alamat login form yang digunakan adalah http://quotes.toscrape.com/login. Login form ini menggunakan security CSRF Token. Apa itu CSRF silakan disini.

Code

const request = require('request-promise');
const cheerio = require('cheerio');

(async () => {

    //get csrf token
    console.log('Request untuk mengambil data csrf token');
    let req1 =  await request({
        uri: 'http://quotes.toscrape.com/login',
        method: 'GET',
        gzip: true,
        resolveWithFullResponse: true
    });

    //get cookie
    let cookie = req1.headers['set-cookie'].map(value => value.split(';')[0]).join(' ');
    let $ = cheerio.load(req1.body);
    let csrf = $('input[name="csrf_token"]').val();

    //proses login
    console.log('Proses Submit Login');
    try{
        let Req2 = await request({
            uri: 'http://quotes.toscrape.com/login',
            method: 'POST',
            gzip: true,
            header: {
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
                'Accept-Encoding': 'gzip, deflate',
                'Accept-Language': 'en-US,en;q=0.9',
                'Cache-Control': 'max-age=0',
                'Connection': 'keep-alive',
                'Content-Type': 'application/x-www-form-urlencoded',
                'Cookie': cookie,
                'DNT': '1',
                'Host': 'quotes.toscrape.com',
                'Origin': 'http://quotes.toscrape.com',
                'Referer': 'http://quotes.toscrape.com/login',
                'Upgrade-Insecure-Requests': '1',
                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.131 Safari/537.36',
            },
            form: {
                'csrf_token': csrf,
                'username': 'admin',
                'password': 'admin'
            },
            resolveWithFullResponse: true
        });
    } catch (response){
        // get cookie after logged in
        cookie = response.response.headers['set-cookie'].map(value => value.split(';')[0]).join(' ');
    }


})();

Pembahasan Code

Load library yang digunakan, yaitu request-promise dan cheerio.

const request = require('request-promise');
const cheerio = require('cheerio');

Karena login form menggunakan CSRF token, kita perlu ambil datanya dahulu

//get csrf token
console.log('Request untuk mengambil data csrf token');
let req1 =  await request({
    uri: 'http://quotes.toscrape.com/login',
    method: 'GET',
    gzip: true,
    resolveWithFullResponse: true
});

Proses login memerlukan cookie, yang perlu kita ambil dari header

//get cookie
let cookie = req1.headers['set-cookie'].map(value => value.split(';')[0]).join(' ');
let $ = cheerio.load(req1.body);
let csrf = $('input[name="csrf_token"]').val();

Dengan menggunakan data CSRF dan cookie diatas, kita lanjutkan dengan proses login. Hal yang harus diperhatikan adalah

  • Proses login harus menggunakan metoda POST
  • Data CSRF, User dan Password serta Cookie diset di header request.
  • Penggunaan try-catch block untuk menangkap error return karena response yang didapat adalah error code redirect (302).
//proses login
console.log('Proses Submit Login');
try{
    let Req2 = await request({
    uri: 'http://quotes.toscrape.com/login',
    method: 'POST',
    gzip: true,
    header: {
         'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
         'Accept-Encoding': 'gzip, deflate',
         'Accept-Language': 'en-US,en;q=0.9',
         'Cache-Control': 'max-age=0',
         'Connection': 'keep-alive',
         'Content-Type': 'application/x-www-form-urlencoded',
         'Cookie': cookie,
         'DNT': '1',
         'Host': 'quotes.toscrape.com',
         'Origin': 'http://quotes.toscrape.com',
         'Referer': 'http://quotes.toscrape.com/login',
         'Upgrade-Insecure-Requests': '1',
         'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.131 Safari/537.36',
            },
        form: {
            'csrf_token': csrf,
            'username': 'admin',
            'password': 'admin'
        },
        resolveWithFullResponse: true
    });
} catch (response){
    // get cookie after logged in
    cookie = response.response.headers['set-cookie'].map(value => value.split(';')[0]).join(' ');
}

Cara Untuk Mendapatkan Data Header

Gunakan browser untuk mendapatkan data header, pada contoh digunakan chrome browser.

Buka developer tools, pilih tab network (no. 1), tekan tombol clear dahulu untuk memastikan tidak ada hasil record sebelumnya. Baru tekan tombol record (no.2).

Kemudian panggil halaman http://quotes.toscrape.com/login

Lihat isi response dengan memilih file login (no. 3). Kemudian Pilih tab header (no. 4).

Sharing is caring:

Leave a Comment