Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby
Code

Bagaimana Menggunakan OmniAuth-Twitter di Aplikasi Rails

Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)

Dalam tutorial Anda akan belajar untuk mengizinkan pengguna aplikasi Anda masuk dengan akun Twitter mereka. Melakukan hal ini telah dimudahkan dengan sarana seperti OAuth.

Anda akan memanfaatkan penggunaan OmniAuth-Twitter, yang mengandung strategi Twitter untuk OmniAuth.

Mari menyelam lebih dalam!

Memulai

Mulailah dengan membuka aplikasi Rails Anda. Dari terminal, jalankan perintah untuk melakukan hal tersebut:

Buka Gemfile Anda dan masukkan bootstrap gem.

Pasang gem-nya dengan menjalankan perintah:

Ubah nama app/assets/stylesheets/application.css menjadi app/assets/stylesheets/application.scs.

Apabila sudah selesai, tambahkan baris kode berikut untuk mengimpor bootstrap.

Buat parsial yang dinamai _navigation.html.erb untuk menangani kode navigasi Anda; parsialnya harus diletakkan di app/views/layouts directory.

Masukkan kode di bawah ini ke dalam suatu IDE. Kodenya menggunakan Bootstrap untuk membuat suatu bilah navigasi untuk aplikasi Anda.

Untuk navigasi yang akan digunakan, Anda harus me-render-nya di layout aplikasinya. Tata layout aplikasi Anda supaya terlihat seperti punya saya di bawah ini.

Buat suatu PagesController dengan suatu indeks aksi dengan memasukkan perintah di bawah ini ke dalam terminal Anda.

Di tampilan indeks yang dihasilkan, sunting supaya terlihat seperti ini.

Dalam kode di atas, kita menggunakan kelas yang dinamai jumbotron—ini adalah komponen Bootstrap yang memungkinkan kita memperluas area pandang untuk menampilkan pesan pemasaran. Anda bisa menemukan lebih banyak lagi tentangnya di dokumentasi Bootstrap.

Buka file rute Anda untuk menambahkan root_path.

Pengaturan Awal OmniAuth-Twitter

Anda harus membuat  suatu aplikasi Twitter baru. Kunjungi halaman ini di halaman Twitter Developer untuk membuatnya. Masukkan semua perincian yang dibutuhkan, seperti milik saya di screenshot di bawah ini.

Twitter Application Management

Untuk URL callback, masukkan alamat website Anda plus "auth/twitter/callback". Jika Anda menggunakan mesin lokal maka URL callback Anda seharusnya adalah: http://127.0.0.1:3000/auth/twitter/callback.

Anda akan diarahkan ke halaman informasi aplikasi di Twitter. Buka tab Keys and Access Tokens untuk mendapatkan kunci Anda. Salin Consumer Key dan Consumer Secret dan tempelkan ke tempat yang aman—kita akan menggunakannya dalam waktu dekat ini.

Callback URL adalah URL yang dengannya pengguna bisa diarahkan ke dalam aplikasi setelah autentikasi yang berhasil dan autorisasi yang diterima (permintaan juga akan menganding data dan token pengguna). Semua strategi OmniAuth mengekspektasikan callback URL untuk setara dengan “/auth/:provider/callback”. :provider mengambil namanya sebagai strategi. Dalam hal ini, strategi ini nantinya adalah "twitter" begitu Anda akan memasukkannya di initializer.

Buka Gemfile Anda dan tambahkan gem omniauth-twitter.

Sekarang buat suatu initializer untuk OmniAuth dalam direktori config/initializer Anda. Itu akan menangani konfigurasi untuk OmniAuth. Jadikan seperti yang saya punya di bawah ini.

Di titik ini Anda harus menggunakan kuncinya dan mengakses token yang Anda simpan dengan aman. Anda harus menyimpannya dengan aman karena Anda tidak ingin mendorongnya ke repositori umum ketikan Anda memasukkan kode Anda.

Anda akan menggunakan suatu gem untuk ini. Buka Gemfile Anda lagi dan tambahkan ke gem di bawah ini. Tambahkan ke Gemfile Anda seperti ini:

Untuk memasang gem, jalankan.

Di direktori home aplikasi Anda, buat file yang bernama .env.

Buka dan tambahkan kunci-kunci Anda seperti ini:

Buka .gitignore dan tambahkan file yang baru Anda buat.

Setelah melakukan ini, kunci dan akses token Anda aman! Untuk belajar lebih banyak bagaimana menggunakan dotenv-rails, merujuklah ke halaman GitHub.

Waktunya mengerjakan rute Anda. Buka file rutenya dan masukkan rute berikut.

Anda harus menambahkan tautan untuk masuk dengan Twitter ke navigasi Anda. Buka file navigasi Anda dan atur supaya terllihat seperti ini.

Dari hal-hal di atas, Anda ingin menunjukkan tautan untuk masuk dengan Twitter hanya ketika penggunanya tidak masuk.

Membuat Sesi

Anda harus membuat kontroller sesi untuk menangani masuknya pengguna. Buat file yang ada di direktori kontroller Anda; penampakannya seharusnya seperti ini.

Aksi pembuatan membantu untuk membuat sesi untuk pengguna sehingga mereka bisa masuk ke dalam aplikasi Anda. Tanpa hal ini, pengguna tidak bisa masuk.

Anda akan membutuhkan metode current_user di titik ini. Hal ini akan membantu Anda memeriksa apakah penggunanya masuk atau keluar.

Buka app/controllers/application_controller.rbdan tambahkan yang berikut ini.

Model Pengguna

Sekarang buat model untuk Pengguna Anda. Jalankan perintah berikut untuk melakukannya.

Hal itu harus menghasilkan file migrasi yang terlihat seperti ini.

Sekarang migrasikan database Anda dengan menjalankan:

Buka model Pengguna Anda dan buatlah agar terlihat seperti ini:

Kode di atas menyimpan sejumlah informasi yang menjadi milik pengguna. Ini akan mencakup nama, profile_image, token, dan rahasia pengguna. Jika aplikasi Anda membutuhkan lebih dari ini, Anda bisa mengecek halaman OmniAuth-Twitter:

Menghapus Sesi

Dalam aplikai Anda, akan disediakan bagi pengguna kemampuan untuk keluar (log out). Anda butuh aksi destroy di SessionsController untuk melakukan hal ini. Lalu suatu tautan akan ditambahkan ke navigasi Anda.

Tambahkan aksi destroy ke SessionsController Anda.

Lalu tambahkan tautan ini untuk keluar ke navigasi Anda, jadi navigasinya akan tampak seperti ini.

Buka config/route.rb untuk memperbarui rute Anda dengan aksi yang baru saja dibuat.

Mulai server rails Anda dan arahkan peramban Anda ke http://localhost:3000 untuk melihat apa yang Anda miliki.

Kesimpulan

Dalam tutorial ini Anda telah mempelajari cara mengaktifkan OmniAuth-Twitter dalam aplikasi Rails Anda. Anda melihat cara mendapatkan data pengguna dengan menggunakan OmniAuth-Twitter, yang Anda lakukan dalam model Pengguna Anda. Anda mampu membuat SessionsControllers untuk menangani proses masuk (log in) dan keluar (log out) dari aplikasi Anda.

Saya harap Anda menikmatinya. Di waktu yang akan datang, Anda akan melihat cara yang sama untuk Facebook, Google, dan LinkedIn.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.