Menggunakan Autentikasi SSO UI Dengan RistekCSUI/SSO dan Laravel

6 min readMar 6, 2017

Disclaimer: Artikel ini saya tujukan untuk teman-teman Universitas Indonesia yang memiliki akses SSO dan ingin menggunakan autentikasi SSO untuk aplikasi mereka

SSO UI merupakan Single Sign On yang digunakan oleh Universitas Indonesia sebagai gerbang autentikasi untuk hampir semua aplikasi di lingkungan Universitas Indonesia. Kita juga dapat memanfaatkan SSO UI untuk autentikasi aplikasi kita sendiri. Dengan begitu kita tidak perlu lagi menyimpan username dan password dari pengguna dan pengguna tidak perlu mendaftarkan diri untuk menggunakan aplikasi. Namun drawbacks nya adalah tidak sembarang pengguna bisa menggunakan aplikasi yang mengimplementasi SSO UI, hanya pengguna yang terdaftar sebagai civitas Universitas Indonesia.

Saya akan coba share pada teman-teman implementasi SSO UI pada aplikasi web. Dalam percobaan kali ini saya akan menggunakan framework PHP Laravel versi 5.4. Beruntung kita tidak perlu mengimplementasikan kode jasig phpCAS client secara manual dari awal karena tim Ristek Fasilkom UI sudah berbaik hati membungkus kode yang diperlukan dalam package composer sehingga kita tinggal menggunakan package tersebut.

Langsung saja kita mulai.

Instalasi Laravel 5.4

Artikel ini berfokus pada implementasi SSO UI pada Laravel dan tidak akan membahas lebih dalam terkait instalasi, konfigurasi awal Laravel, maupun setup local server. Silakan Anda membaca dokumentasi Laravel di http://laravel.com/docs untuk detil instalasi dan konfigurasi awal.

Kita awali dengan instalasi Laravel 5.4. Saya akan menggunakan composer dengan alasan waktu instalasi yang cepat dan tidak banyak setup. Silakan buka command prompt Anda dan mulai ketikkan kode dibawah dan enter.

composer create-project --prefer-dist laravel/laravel ./try-sso

Instalasi Laravel menggunakan composer pada command prompt

Tunggu hingga instalasi Laravel selesai. Silakan akses aplikasi web Anda pada browser.

Halaman utama Laravel yang dapat diakses setelah instalasi

Instalasi RistekCSUI/SSO Menggunakan Composer

Composer adalah sebuah package manager untuk PHP. Keuntungan metode ini adalah Anda dapat dengan mudah mendapatkan update melalui satu perintah composer update. Selain itu, Anda juga dapat mengakses library ini dengan mudah apabila Anda menggunakan framework yang juga menggunakan Composer, misalnya Laravel atau Yii2.0. Anda dapat membaca lebih lanjut tentang Composer di sini.

Untuk meng-install library ini, ikuti langkah berikut.

Install Composer. (Lihat caranya)

2. Tambahkan dependensi berikut ke file composer.json yang ada di root project Anda (atau buat baru jika belum ada).

{ 
    "require": {
        "ristek/sso": "*"
    }
}

Modifikasi pada file composer.json untuk menambahkan dependensi RistekCSUI/SSO

3. Install library RistekCSUI/SSO dengan menjalankan perintah berikut pada terminal di folder ./try-sso

composer update

Langkah ini dapat memakan waktu beberapa menit tergantung koneksi Anda.

Mengunduh dan memasang RistekCSUI/SSO pada Laravel

Anda sekarang sudah dapat menggunakan library ini.

Penggunaan

Anda dapat melihat contoh penggunaan pada file example.php dan example-manual.php.

1. Otentikasi

SSO\SSO::authenticate();

Pemanggilan ini akan melakukan redirect browser ke login SSO. Jika otentikasi user berhasil, fungsi ini akan mengembalikan nilai boolean true. Anda dapat mengasumsikan bahwa setelah pemanggilan fungsi ini, user telah berhasil diotentikasi.

2. Mendapatkan detail user

SSO\SSO::getUser();

Fungsi getUser() akan mengembalikan sebuah object stdClass PHP yang memiliki detail dari user yang berhasil diotentikasi. Potongan kode berikut mengilustrasikan penggunaannya:

$user = SSO\SSO::getUser();
echo $user->username;             // prints user's username
echo $user->name;                 // prints user's name
echo $user->role;                 // prints user's role/* jika role sebagai mahasiswa */
echo $user->npm;                  // prints user's npm
echo $user->org_code;             // prints user's organization code
echo $user->faculty;              // prints user's faculty
echo $user->study_program;        // prints user's study program
echo $user->educational_program;  // prints user's educational program/* jika role sebagai staff */
echo $user->nip;                  // prints user's nip

3. Memeriksa otentikasi

SSO\SSO::check();

Pemanggilan ini akan mengembalikan true jika user sudah pernah berhasil otentikasi dan false jika sebaliknya.

4. Log Out

SSO\SSO::logout();

Pemanggilan ini akan mengakhiri otentikasi user. Anda juga dapat menambahkan parameter URL pada method logout sebagai URL redirect setelah logout dari SSO.

SSO\SSO::logout('http://google.com');

Tips: Menghilangkan namespace

Anda banyak melihat pemanggilan SSO\SSO di sini. Kadang itu membuat kode Anda buruk dan tidak mudah dibaca. Anda dapat menghilangkannya dengan satu statement berikut:

use SSO\SSO;

Setelah itu Anda akan dapat menghilangkan awalan SSO\, seperti ini:

SSO::authenticate();
$user = SSO::getUser();

Menggunakan SSO UI

Bagian ini tidak akan menjelaskan design pattern MVC yang digunakan oleh Laravel dan tidak akan menjelaskan struktur folder dan file dari Laravel. Bagian ini hanya menunjukkan contoh skenario sederhana dari penggunaan SSO UI. Implementasi dengan cara lain sangat dimungkinkan untuk mengakomodasi kebutuhan lain.

Pada bagian ini saya akan mencontohkan penggunaan RistekCSUI/SSO dengan skenario yang sederhana. Saya akan membuat sebuah route menuju suatu halaman khusus yang hanya bisa diakses jika pengguna sudah login dengan SSO UI. Jika pengguna mengakses route tersebut dan belum login SSO, aplikasi akan redirect ke halaman login SSO UI. Setelah pengguna terautentikasi dengan SSO UI, aplikasi akan redirect kembali ke halaman khsuus tersebut. Halaman khusus tersebut akan menampilkan informasi akun SSO pengguna seperti username, nama, nomor, dan fakultas. Pada halaman tersebut saya juga akan tambahkan suatu tombol untuk logout SSO.

Waktu estimasi untuk implementasi sekitar 10–15 menit.

Implementasi:

1. Buat sebuah controller. Silakan beri nama sesuai kemauan Anda. Buat sebuah method yang mengarahkan pengguna menuju halaman khusus. Kemudian buat method logout.

Method secret() untuk mengakses halaman khusus dan method logout() untuk logout

Diasumsikan SSO::authenticate() pasti berhasil.

2. Tambahkan dua buah route untuk mengakses halaman khusus dan logout. Gunakan method secret() dan method logout() sebagai controller action-nya.

Tambahkan route unutk mengakses halaman khusus dan logout

3. Buat HTML blade template untuk halaman khusus tersebut. Dalam kasus ini saya menggunakan nama secret.blade.php. Saya akan menyalin kode dari welcome.blade.php dan melakukan beberapa perubahan.

Binding atribut yang dimliki object $user yang telah di passing ke blade template

4. Akses halaman khusus dengan mengakses /try-sso/public/secret. Jika Anda belum terautentikasi maka Anda akan dialihkan ke halaman login SSO. Masukkan username dan pass Anda. Dalam beberapa detik Anda akan kembali dialihkan ke halaman /try-sso/public/secret yang akan menampilkan nama, npm, dan fakultas Anda.

Berhasil login. Dalam beberapa detik Anda akan dialihkan kembali ke try-sso/public/secret

Halaman khusus kini telah menampilkan data Anda yang didapatkan dari SSO UI

5. Sekarang Anda dapat mencoba logout. Klik link ‘Logout SSO’.

Anda akan dialihkan ke halaman login SSO kembali, bukan ke halaman aplikasi Anda.

Halaman login SSO setelah berhasil logout

TIPS: Logout dengan parameter URL

Anda mungkin ingin mengalihkan aplikasi Anda ke halaman utama setelah logout. Anda dapat melakukan hal tersebut dengan menambahkan parameter pada method SSO::logout().

Tambahkan parameter URL agar aplikasi Anda dialihkan ke URL yang diberikan setelah berhasil logout

SSO akan mengarahakan aplikasi Anda ke parameter URL yang diberikan

DONE. Selesai lah tutorial singkat implementasi RistekCSUI/SSO kali ini. Anda dapat bereksperimen sendiri lebih lanjut dengan RistekCSUI/SSO dan Laravel 5.4. Tutorial ini hanya sebagai contoh saja agar Anda dapat lebih memahami implementasi RistekCSUI/SSO dengan langsung mencobanya. Semoga bermanfaat bagi Anda. Terima kasih telah membaca artikel ini ^^

$this->endOfBlog();

Bagian ‘Instalasi RistekCSUI/SSO Menggunakan Composer’ dan ‘Penggunaan’ disadur dari berkas README.md pada repositori RistekCSUI/SSO
Terdapat upgrade versi RistekCSUI/SSO dari versi 0.4.0 menjadi 0.5.0 pada 7 Maret 2017. Silakan lakukan composer update untuk update versi RistekCSUI/SSO Anda menjadi versi terbaru.