Cara Mengonfigurasi Keycloak untuk Pengembangan Aplikasi Vuejs
Keycloak adalah sebuah platform open source untuk manajemen identitas dan akses yang memungkinkan Kita mengamankan aplikasi dan layanan web dengan mudah. Dengan Keycloak, Kita dapat menyediakan fitur autentikasi, otorisasi, manajemen pengguna, manajemen sesi, manajemen peran, single sign-on, dan lainnya dengan menggunakan protokol stKitar seperti OpenID Connect, OAuth 2.0, SAML 2.0, dan lainnya.
Vuejs adalah sebuah framework front-end yang populer dan mudah digunakan untuk membangun aplikasi web yang interaktif dan responsif. Vuejs memiliki fitur seperti data binding, komponen, transisi, routing, dan lainnya yang dapat meningkatkan produktivitas dan kualitas pengembangan aplikasi web.
Untuk mengonfigurasi Keycloak untuk pengembangan aplikasi vuejs, Kita dapat mengikuti langkah-langkah berikut:
Langkah 1: Menyiapkan Keycloak
Sebelum Kita dapat menggunakan Keycloak untuk mengamankan aplikasi vuejs Kita, Kita perlu menyiapkan Keycloak terlebih dahulu. Kita dapat menginstal Keycloak di mesin lokal Kita atau menggunakan layanan cloud yang menyediakan Keycloak, seperti Red Hat SSO atau Keycloak Cloud.
Untuk menginstal Keycloak di mesin lokal Kita, Kita dapat mengunduh dan mengekstrak paket distribusi Keycloak dari situs resmi Keycloak. Kita juga perlu memiliki Java 8 atau lebih tinggi yang terinstal di mesin Kita.
Setelah Kita mengunduh dan mengekstrak paket Keycloak, Kita dapat menjalankan Keycloak dengan menggunakan perintah berikut di terminal atau command prompt:
cd <lokasi paket Keycloak>
bin/stKitalone.sh -b 0.0.0.0
Perintah ini akan menjalankan Keycloak di port 8080 dengan menggunakan database H2 yang disimpan di dalam paket Keycloak. Database ini tidak akan bertahan jika Kita menghapus atau menghentikan Keycloak. Jika Kita ingin menggunakan database yang persisten, Kita dapat mengikuti panduan ini untuk menghubungkan Keycloak dengan database eksternal, seperti PostgreSQL, MySQL, MariaDB, Oracle, atau lainnya.
Setelah Keycloak berhasil dijalankan, Kita dapat mengakses antarmuka web Keycloak melalui browser Kita dengan mengunjungi alamat http://localhost:8080/auth. Kita akan diminta untuk membuat akun admin yang dapat digunakan untuk mengelola Keycloak.
Langkah 2: Membuat Realm, Client, dan User di Keycloak
Setelah Kita membuat akun admin, Kita dapat mulai membuat realm, client, dan user di Keycloak. Realm adalah sebuah kontainer logis yang mengelompokkan client, user, role, dan sumber daya lainnya yang terkait dengan Keycloak. Kita dapat membuat beberapa realm untuk memisahkan lingkungan yang berbeda, seperti development, testing, dan production.
Client adalah sebuah entitas yang merepresentasikan aplikasi atau layanan yang ingin menggunakan Keycloak untuk mengamankan aksesnya. Client dapat berupa aplikasi web, aplikasi mobile, aplikasi desktop, atau layanan web. Kita dapat mengatur protokol, alamat, scope, role, dan konfigurasi lainnya untuk setiap client.
User adalah sebuah entitas yang merepresentasikan pengguna akhir yang ingin mengakses aplikasi atau layanan yang terdaftar di Keycloak. User dapat memiliki atribut, credential, role, dan grup yang menentukan identitas dan hak aksesnya. Kita dapat membuat, mengedit, menghapus, dan mengimpor user secara manual atau otomatis di Keycloak.
Untuk membuat realm, client, dan user di Keycloak, Kita dapat mengikuti langkah-langkah berikut:
- Login ke antarmuka web Keycloak dengan menggunakan akun admin yang Kita buat sebelumnya.
- Klik tombol drop-down di pojok kiri atas yang menampilkan nama realm saat ini (biasanya master) dan pilih Add realm. Masukkan nama realm yang Kita inginkan (misalnya vuejs) dan klik Create.
- Klik menu Clients di panel kiri dan klik tombol Create. Masukkan Client ID yang Kita inginkan (misalnya vuejs-app) dan pilih protokol yang Kita inginkan (misalnya openid-connect). Klik Save.
- Kita akan melihat halaman Settings untuk client yang baru Kita buat. Ubah beberapa pengaturan berikut sesuai kebutuhan Kita:
- Root URL: Masukkan URL aplikasi vuejs Kita (misalnya http://localhost:8081).
- Valid Redirect URIs: Masukkan URL yang valid untuk diarahkan setelah autentikasi (misalnya http://localhost:8081/*).
- Web Origins: Masukkan URL yang valid untuk menerima permintaan CORS (misalnya http://localhost:8081).
- Access Type: Pilih confidential jika Kita ingin menggunakan authorization code flow atau public jika Kita ingin menggunakan implicit flow.
- StKitard Flow Enabled: Aktifkan jika Kita ingin menggunakan authorization code flow.
- Implicit Flow Enabled: Aktifkan jika Kita ingin menggunakan implicit flow.
- Direct Access Grants Enabled: Aktifkan jika Kita ingin menggunakan resource owner password credentials flow.
- Service Accounts Enabled: Aktifkan jika Kita ingin menggunakan client credentials flow.
- Authorization Enabled: Aktifkan jika Kita ingin menggunakan fitur authorization service dari Keycloak.
- Klik tab Credentials dan catat Secret yang dihasilkan oleh Keycloak. Kita akan membutuhkan Secret ini untuk mengonfigurasi aplikasi vuejs Kita nanti.
- Klik menu Users di panel kiri dan klik tombol Add user. Masukkan username, email, dan atribut lainnya yang Kita inginkan. Klik Save.
- Kita akan melihat halaman Settings untuk user yang baru Kita buat. Ubah beberapa pengaturan berikut sesuai kebutuhan Kita:
- Credentials: Masukkan password dan konfirmasi password untuk user Kita. Pilih Temporary jika Kita ingin user mengganti password saat login pertama kali. Klik Reset Password.
- Role Mappings: Tambahkan role yang Kita inginkan untuk user Kita. Kita dapat menggunakan role bawaan dari realm atau client, atau membuat role kustom sendiri. Role menentukan hak akses yang dimiliki user terhadap sumber daya yang dilindungi oleh Keycloak.
Langkah 3: Mengintegrasikan Keycloak dengan Aplikasi Vuejs
Setelah Kita membuat realm, client, dan user di Keycloak, Kita dapat mengintegrasikan Keycloak dengan aplikasi vuejs Kita. Kita dapat menggunakan library keycloak-js yang disediakan oleh Keycloak untuk memudahkan Kita menghubungkan aplikasi vuejs Kita dengan Keycloak.
Untuk mengintegrasikan Keycloak dengan aplikasi vuejs, Kita dapat mengikuti langkah-langkah berikut:
- Buat aplikasi vuejs Kita dengan menggunakan vue-cli atau cara lain yang Kita inginkan. Kita dapat mengikuti [panduan ini] untuk mempelajari cara membuat aplikasi vuejs dengan vue-cli.
- Tambahkan library keycloak-js sebagai dependensi aplikasi Kita dengan menggunakan perintah berikut:
npm install keycloak-js --save
- Buat sebuah file konfigurasi untuk Keycloak di folder src dengan nama keycloak.json. Isi file ini dengan informasi yang sesuai dengan realm, client, dan URL Keycloak Kita. Contoh isi file keycloak.json:
{
"realm": "vuejs",
"auth-server-url": "http://localhost:8080/auth/",
"ssl-required": "external",
"resource": "vuejs-app",
"public-client": true,
"confidential-port": 0
}
- Buat sebuah file plugin untuk Keycloak di folder src dengan nama keycloak.js. Isi file ini dengan kode berikut:
import Keycloak from 'keycloak-js';
import store from './store';
// Menginisialisasi Keycloak dengan file konfigurasi
const keycloak = Keycloak('./keycloak.json');
// Membuat sebuah plugin Vue untuk Keycloak
const keycloakPlugin = {
install(Vue) {
// Menambahkan properti $keycloak ke prototype Vue
Vue.prototype.$keycloak = keycloak;
// Menambahkan mixin global untuk Vue
Vue.mixin({
// Menjalankan fungsi sebelum membuat instance Vue
beforeCreate() {
// Menambahkan properti keycloak ke data Vue
this.$data.keycloak = keycloak;
},
// Menjalankan fungsi ketika instance Vue dibuat
created() {
// Menambahkan event listener untuk perubahan status Keycloak
keycloak.onReady = (authenticated) => {
// Mengupdate data dan store Vue dengan status Keycloak
this.$data.keycloak = keycloak;
store.dispatch('keycloakReady', authenticated);
};
keycloak.onAuthSuccess = () => {
// Mengupdate data dan store Vue dengan status Keycloak
this.$data.keycloak = keycloak;
store.dispatch('keycloakAuthSuccess');
};
keycloak.onAuthError = (error) => {
// Mengupdate data dan store Vue dengan status Keycloak
this.$data.keycloak = keycloak;
store.dispatch('keycloakAuthError', error);
};
keycloak.onAuthRefreshSuccess = () => {
// Mengupdate data dan store Vue dengan status Keycloak
this.$data.keycloak = keycloak;
store.dispatch('keycloakAuthRefreshSuccess');
};
keycloak.onAuthRefreshError = () => {
// Mengupdate data dan store Vue dengan status Keycloak
this.$data.keycloak = keycloak;
store.dispatch('keycloakAuthRefreshError');
};
keycloak.onAuthLogout = () => {
// Mengupdate data dan store Vue dengan status Keycloak
this.$data.keycloak = keycloak;
store.dispatch('keycloakAuthLogout');
};
keycloak.onTokenExpired = () => {
// Meminta token baru dari Keycloak
keycloak.updateToken(5);
};
},
});
},
};
export default keycloakPlugin;
- Buat sebuah file store untuk Keycloak di folder src dengan nama store.js. Isi file ini dengan kode berikut:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// Membuat sebuah store Vue untuk Keycloak
const store = new Vuex.Store({
state: {
// Menyimpan status Keycloak
keycloakReady: false,
keycloakAuthenticated: false,
keycloakError: null,
},
mutations: {
// Mengubah status Keycloak
keycloakReady(state, ready) {
state.keycloakReady = ready;
},
keycloakAuthenticated(state, authenticated) {
state.keycloakAuthenticated = authenticated;
},
keycloakError(state, error) {
state.keycloakError = error;
},
},
actions: {
// Menjalankan mutasi berdasarkan event Keycloak
keycloakReady({ commit }, ready) {
commit('keycloakReady', ready);
},
keycloakAuthSuccess({ commit }) {
commit('keycloakAuthenticated', true);
},
keycloakAuthError({ commit }, error) {
commit('keycloakError', error);
},
keycloakAuthRefreshSuccess({ commit }) {
commit('keycloakAuthenticated', true);
},
keycloakAuthRefreshError({ commit }) {
commit('keycloakAuthenticated', false);
},
keycloakAuthLogout({ commit }) {
commit('keycloakAuthenticated', false);
},
},
getters: {
// Mengambil status Keycloak
keycloakReady(state) {
return state.keycloakReady;
},
keycloakAuthenticated(state) {
return state.keycloakAuthenticated;
},
keycloakError(state) {
return state.keycloakError;
},
},
});
export default store;
- Ubah file main.js di folder src dengan menambahkan kode berikut:
import Vue from 'vue';
import App from './App.vue';
import keycloak from './keycloak';
import store from './store';
Vue.config.productionTip = false;
// Menggunakan plugin Keycloak
Vue.use(keycloak);
// Membuat instance Vue
new Vue({
store,
render: (h) => h(App),
}).$mount('#app');
- Ubah file App.vue di folder src dengan menambahkan kode berikut:
<template>
<div id="app">
<!-- Menampilkan status Keycloak -->
<div v-if="!keycloakReady">Loading Keycloak...</div>
<div v-else-if="keycloakError">Keycloak Error: {{ keycloakError }}</div>
<div v-else-if="!keycloakAuthenticated">Please login to Keycloak</div>
<div v-else>
<h1>Welcome to Vuejs App</h1>
<p>Username: {{ keycloak.tokenParsed.preferred_username }}</p>
<p>Email: {{ keycloak.tokenParsed.email }}</p>
<p>Roles: {{ keycloak.realmAccess.roles }}</p>
<button @click="logout">Logout</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
// Mengambil data Keycloak dari plugin
keycloak: this.$keycloak,
};
},
computed: {
// Mengambil status Keycloak dari store
keycloakReady() {
return this.$store.getters.keycloakReady;
},
keycloakAuthenticated() {
return this.$store.getters.keycloakAuthenticated;
},
keycloakError() {
return this.$store.getters.keycloakError;
},
},
methods: {
// Membuat fungsi untuk logout dari Keycloak
logout() {
this.keycloak.logout();
},
},
};
</script>
- Jalankan aplikasi vuejs Kita dengan menggunakan perintah berikut:
npm run serve
Perintah ini akan menjalankan aplikasi vuejs Kita di port 8081. Kita dapat mengakses aplikasi vuejs Kita melalui browser Kita dengan mengunjungi alamat http://localhost:8081.
Kita akan melihat halaman aplikasi vuejs Kita yang terhubung dengan Keycloak. Kita dapat mencoba untuk login, logout, dan mengakses data user yang disediakan oleh Keycloak.
Demikianlah cara mengonfigurasi Keycloak untuk pengembangan aplikasi vuejs. Semoga artikel ini bermanfaat dan selamat mencoba! 😊
Komentar
Posting Komentar