*Artikel ini merupakan terjemahan seri tutorial [Real time Chat application built with Vue, Django, RabbitMQ and uWSGI WebSockets](https://danidee10.github.io/2018/01/03/realtime-django-2.html) bagian kedua yang ditulis oleh [Osaetin Daniel](https://github.com/danidee10). 
*

Kita akan mulai pembuatan chatire dengan melakukan implementasi manajemen user dan otentikasi sehingga user bisa membuat akun baru dan melakukan login. 

Berkat komunitas Django yang luar biasa, hal-hal tadi sudah tersedia untuk kita pakai. Oleh karena itu kita akan menggunakan pustaka django pihak ketiga bernama [djoser](http://djoser.readthedocs.io/)

Mari kita pasang dari `pypi`

```
pip install djangorestframework
pip install djoser
```

Djoser adalah implementasi sistem otentikasi Django berbasis REST. Jadi dengan pustaka ini kita akan mendapatkan endpoint REST untuk melakukan registrasi user, pembuatan token, manajemen user dll.

### Konfigurasi djoser

Kita mulai dengan konfigurasi palign sederhana untuk djoser. Tambahkan kode berikut di `INSTALLED_APPS`

```
INSTALLED_APPS = (
    'django.contrib.auth',
    ...,
    'rest_framework',
    'rest_framework.authtoken',
    'djoser',
)
```

lalu url djoser di `urls.py`:

```
from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    ...,
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.authtoken')),
]
```

Masukkan `rest_framework.authentication.TokenAuthentication` ke dalam kelas otentikasi django rest:

```
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',
        (...)
    ),
}
```

Terakhir, jalankan migrasi database dengan perintah `python manage.py migrate`. Perintah ini akan membuat tabel-tabel yang dibutuhkan `djsoer`.

Hanya dengan menambah kode-kode di atas sekarang endpoint otentikasi sudah siap. Mari kita buat user baru (jalankan di terminal):

```
curl -X POST http://127.0.0.1:8000/auth/users/create/ --data 'username=danidee&password=mypassword'

{"email":"","username":"danidee","id":1}
```

Voila! Sekarang kita sudah memiliki use baru. Lihat dokumentasi djoser untuk semua endpoint yang tersedia dan bagaimana cara menggunakannya di http://djoser.readthedocs.io/en/latest/base_endpoints.html

# Vue.js

Vue adalah Framework JavaScript untuk membuat antarmuka yang Reactive. Meskipun penulis merupakan fans berat React (karena React-native), penulis lebih memilih Vue untuk membuat aplikasi web.

Salah satu alasannya ialah kurva belajar yang lebih bersahabat. Ia lebih mudah untuk mulai dipelajari dan tidak seperti React dimana kita harus bersusah payah menyiapkan banyak hal (dengan Webpack dan kawan-kawannya) untuk membuat aplikasi yang **production ready**. Pembaca cukup menulis tag `<script>` seperti saat akan menggunakan `JQuery`.

Ia juga memiliki komunitas yang giat dengan banyak plugin dan tutorial yang tersedia. 

Kita akan memakai `vue-cli` untuk membuat Vue app dengan cepat (tidak menggunakan tag `<script>`). Methode ini memungkinkan kita untuk menggunakan `ES6+` dan *single file Vue component*.

Pasang `vue-cli` dari npm:

```
npm install -g vue-cli
```

Mari mulai proyek baru menggunakan webpack dengan `vue-cli`

```
vue init webpack chatire-frontend
```

**Catatan: Pastikan memilih opsi “install vue-router” **

Sekarang mungkin waktu yang tepat untuk membuat secangkir kopi atau mengambil *snack* karena prosesnya dapat memakan waktu lama tergantung kecepatan internet kita. 

Selanjutnya, masuk ke direktori aplikasi vue yang sudah muncul (diterminal dengan perintah `cd`) dan jalankan server development dengan perintah:

`npm run dev`.

Seharusnya saat membuka alamat `localhost:8080` di browser kita akan melihat:

![Realtime Django 2.1](https://danidee10.github.io/images/django/realtime-django/realtime-django-2.1.png)

Mari kita bahas sebentar struktur foldernya:

```
.
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   ├── prod.env.js
│   └── test.env.js
├── index.html
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   ├── main.js
│   └── router
│       └── index.js
├── static
└── test
    ├── e2e
    │   ├── custom-assertions
    │   │   └── elementCount.js
    │   ├── nightwatch.conf.js
    │   ├── runner.js
    │   └── specs
    │       └── test.js
    └── unit
        ├── jest.conf.js
        ├── setup.js
        └── specs
            └── HelloWorld.spec.js
```

- **build:** Direktori ini berisi skrips yang dipakai untuk menjalankan server development webpack atau bundel aplikasi saat siap dipakai di production. Contoh, perintah `npm run dev` sebetulnya memanggil perintah:

  `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

  Opsi `--inline` memasukkan file static yang di *generate* ke halaman `index.html`.

- **config:** Sesuai namanya, disini tempat menyimpan file-file yang berhubungan dengan konfigurasi development, testing dan production

- **src:** Disini adalah tempat menulis sebagian besar kode-kode yang kita perlukan, ia memiliki subfolder yang yang memiliki fungsi masing-masing.

  Component single file kita akan disimpan di folder ini.  Akan ada satu component bawaan bernama `HelloWorld.vue`.

  File `index.js` di folder router memiliki konfigurasi untuk vue-router.

- **static:** File static (HTML, CSS and JavaScript) disimpan di folder ini.

- **test:** Terakhir, template webpack dari `vue-cli` akan mempermudah ini jika ingin melakukan pengujian aplikasi dengan membuat *End to end tests* (e2e) di atas [Nightwatch](http://nightwatchjs.org/) dan *unit tests* yang berjalan dengan [Jest](https://facebook.github.io/jest/).

   Pengujian yang ada dapat dijalankan dengan perintah `npm run unit` (untuk *unit tests*) dan `npm run e2e` untuk *End to end tests*.

`vue-cli` juga menyiapkan fitur *hotreloading* untuk kita untuk membantu kita sehingga tidak perlu melakukan refresh di browser.

### Konfigurasi Vue router

Buat dua component, satu untuk halaman utama bernama `Chat.vue` dan satu lagi untuk User Authentication dan Signup bernama `UserAuth.vue`

Idealnya apa yang kita inginkan adalah menampilkan component berdasarkan status Login user. Jika User sudah melakukan Login, maka kita ingin menampilkan component `Chat` jika tidak kita ingin menampilkan component  `UserAuth`.

Kita dapat melakukannya dengan menggunakan *global navigation*. Edit file router `index.js` agar memiliki kode sebagai berikut:

```
import Vue from 'vue'
import Router from 'vue-router'
import Chat from '@/components/Chat'
import UserAuth from '@/components/UserAuth'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/chats',
      name: 'Chat',
      component: Chat
    },

    {
      path: '/auth',
      name: 'UserAuth',
      component: UserAuth
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (sessionStorage.getItem('authToken') !== null || to.path === '/auth') {
    next()
  }
  } else {
    next('/auth')
  }
})

export default router
```

Method `beforeEach` dipanggil sebelum melakukan navigasi ke route manapun diaplikasi kita. 

Jika sebuah token disimpan di dalam `sessionStorage` kita akan memperbolehkan navigation melanjutkan pekerjaannya dengan memanggil `next()` jika tidak kita kembali ke component auth.

Ke mana pun route yang dituju oleh user di aplikasi kita, fungsi ini akan memeriksa jika user memiliki auth token dan membawanya sesuai tujuan.

### Halaman Login/Signup 

Penulis sudah membuat halaman Login/Signup sederhana dengan Bootstrap 4. Berikut isi konten `UserAuth.vue`:

```
<template>
  <div class="container">
    <h1 class="text-center">Welcome to Chatire!</h1>
    <div id="auth-container" class="row">
      <div class="col-sm-4 offset-sm-4">
        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="signup-tab" data-toggle="tab" href="#signup" role="tab" aria-controls="signup" aria-selected="true">Sign Up</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="signin-tab" data-toggle="tab" href="#signin" role="tab" aria-controls="signin" aria-selected="false">Sign In</a>
          </li>
        </ul>

        <div class="tab-content" id="myTabContent">

          <div class="tab-pane fade show active" id="signup" role="tabpanel" aria-labelledby="signin-tab">
            <form @submit.prevent="signUp">
              <div class="form-group">
                <input v-model="email" type="email" class="form-control" id="email" placeholder="Email Address" required>
              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <input v-model="username" type="text" class="form-control" id="username" placeholder="Username" required>
                </div>
                <div class="form-group col-md-6">
                  <input v-model="password" type="password" class="form-control" id="password" placeholder="Password" required>
                </div>
              </div>
              <div class="form-group">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" id="toc" required>
                  <label class="form-check-label" for="gridCheck">
                    Accept terms and Conditions
                  </label>
                </div>
              </div>
              <button type="submit" class="btn btn-block btn-primary">Sign up</button>
            </form>
          </div>

          <div class="tab-pane fade" id="signin" role="tabpanel" aria-labelledby="signin-tab">
            <form @submit.prevent="signIn">
              <div class="form-group">
                <input v-model="username" type="text" class="form-control" id="username" placeholder="Username" required>
              </div>
              <div class="form-group">
                <input v-model="password" type="password" class="form-control" id="password" placeholder="Password" required>
              </div>
              <button type="submit" class="btn btn-block btn-primary">Sign in</button>
            </form>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  const $ = window.jQuery // JQuery

  export default {

    data () {
      return {
        email: '', username: '', password: ''
      }
    }

  }
</script>

<style scoped>
  #auth-container {
    margin-top: 50px;
  }

  .tab-content {
    padding-top: 20px;
  }
</style>
```

Pada sisipan kode di atas, `v-model` dipakai untuk melakukan *two way data binding* untuk semua kolom input. Ini artinya apapun yang kita tulis di kolom tersebut dapat langsung diakses dari JavaScript menggunakan `this.field_name`.

Kita juga membuat event listeners di kedua form menggunakan  `@submit.prevent` yang akan mendengarkan event form submitdari setiap form dan memanggil method yang diinginkan. Kita belum mengimplementasi method-method tersebut.

Karena kita menggunakan `Bootstrap`, daripada memanggil `jQuery` dari `npm` kita menggunakan variabel `$` untuk mendaftarkan `window.jQuery` secara global. 

Kita akan memakai method ajax `jQuery` untuk berkomunikasi dengan server. Silahkan gunakan pustaka ajax lain seperti  [Axios](https://github.com/axios/axios) jika tidak ingin menggunakan `jQuery`. Pustaka ini cukup populer dikalangan pengguna `Vue`.

Jangan lupa untuk menambahkan *include* file-file CSS dan JavaScript Bootstrap di halaman `index.html`.

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <style>
      .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        outline: none;
      }
    </style>

    <title>chatire-frontend</title>
  </head>
  <body>
    <div id="app"></div>
    

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
  </body>
</html>
```

Hasil yang didapat seharusnya:

![Realtime Django 1.2](https://danidee10.github.io/images/django/realtime-django/realtime-django-2.2.png)

Cukup oke kan?

### Mari Kita Ambil auth token dari Django

Ktia ingin mendaftarkan user, memasukkannya dan membawanya ke route Chat. 

Untuk melakukannya, kita harus mengimplement method `signUp` dan `signIn` di kode sebelumnya:

```
methods: {
  signUp () {
    $.post('http://localhost:8000/auth/users/create/', this.$data, (data) => {
      alert("Your account has been created. You will be signed in automatically")
      this.signIn()
    })
    .fail((response) => {
      alert(response.responseText)
    })
  },

  signIn () {
    const credentials = {username: this.username, password: this.password}

    $.post('http://localhost:8000/auth/token/create/', credentials, (data) => {
      sessionStorage.setItem('authToken', data.auth_token)
      sessionStorage.setItem('username', this.username)
      this.$router.push('/chats')
    })
    .fail((response) => {
      alert(response.responseText)
    })
  }
}
```

Sekarang coba submit form tadi. Oops! Ada kesalahan:

**Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/auth/users/create. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).**

### CORS

Menurut situs Mozilla:

> Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to let a user agent gain permission to access selected resources from a server on a different origin (domain) than the site currently in use. A user agent makes a cross-origin HTTP request when it requests a resource from a different domain, protocol, or port than the one from which the current document originated.

Secara sederhana CORS memperbolehkan rikues Ajax dari domain tertentu untuk melakukan  `XmlHttpRequest`. Normalnya kita tidak bisa melakuakn `XmlHttpRequest` dari situs dengan domain yang berbeda (*catatan: jika ada yang salah harap dikoreksi*).

Dalam kasus ini, meskipun sama-sama berjalan di localhost, karena berjalan di port yang berbeda (8080 dan 8000) mereka dianggap berada di domain yang berbeda.

Domain yang memiliki skema (`http` atau `https`), hostname (`localhost`) dan port yang harus sama pula.

Jadi bagaimana cara menjalankan CORS di aplikasi django? Ada pustaka pihak ketiga untuk memudahkan hal tersebut bernama `django-cors-headers`.

```
pip install django-cors-headers
```

tambahkan di `INSTALLED_APPS`

```
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Custom Apps
    'rest_framework',
    'rest_framework.authtoken',
    'corsheaders',
    'djoser'
]
```

tambahkan juga di  (Pastikan ditulsi sebelum  `django.middleware.common.CommonMiddleware`)

```
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',

    'corsheaders.middleware.CorsMiddleware',

    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
```

Terakhir atur `CORS_ORIGIN_ALLOW_ALL = True`
**Catat bahwa apa yang kita lakukan mengaktifkan CORS untuk semua domain. Ini boleh dilakukan untuk development tapi saat di production kita mungkin hanya ingin domain tertentu saja**

`CORS_ORIGIN_WHITELIST`

Baca [dokumentasi](https://github.com/ottoyiu/django-cors-headers) django-cors-header untuk melihat opsi lain.

Setelah melakukannya, kita sekarang bisa membuat akun dan melakukan login.

Dibelakang layar, `django-cors-headers` menggunakan sebuah Middleware untuk menambah header ke setiap rikues yang memberitahu Django bahwa rikues tersebut aman dan boleh dilakukan.

### Logout

Karena kita memakai `sessionStorage` untuk menyimpan auth token, kita bisa memulai session baru dengan membuka tab baru.

Jika ingin menyimpan token di tab baru atau saat browser di restart kita bisa memakai  `localStorage`. Ia memiliki API yang sama dengan  `sessionStorage` sehingga kita cukup mengganti  `session` ke `local`.

Lalu kita dapat membuat sebuah fugnsi yang mengapus token dari storage dengan memanggil `removeItem`. Berikut kode untuk melakukannya dengan `localStorage`.

```
localStorage.removeItem('authToken')
```

### Kesimpulan

Tutorial kali ini cukup sampai manajemen user dan sistem otensikasi. Kita mulai dengan memasang djoser, sebuah pustaka django yang memberikan endpoint `REST` untuk otentikasi. 

Kita juga menggunakan method ajax milik `jQuery` untuk memanggil endpoints tersebut. 

Selanjutnya kita membahas `Same origin policy` sedikit dan belajar bagaimana memperbolehkan rikues Ajax dari aplikasi Vue ke backend Django menggunakan `CORS` lewat `django-cors-headers`.

Dibagian berikutnya, kita membuat model django dan API untuk aplikasi Chat.

Membuat Aplikasi Web Realtime dengan Django, RabbitMQ dan Vue.js Bagian 2: Otentikasi dan Manajemen User

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Aplikasi Web Realtime dengan Django, RabbitMQ dan Vue.js Bagian 2: Otentikasi dan Manajemen User

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hour of Code, Belajar Coding Satu Jam

Jangan Lewatkan, Jogja Geek Job Fair #2 Digelar Lagi Minggu Ini

Wawancara Bersama Luri Darmawan Pembuat AKSI IDE

io.js, Framework JavaScript yang Kompatibel dengan Node.js dan npm

CodeCombat, Belajar Coding Sambil Bermain Game

Mengenal Meteor, Framework JavaScript yang Sedang Naik Daun