Integrasi Google, Twitter, dan Facebook pada Aplikasi Mobile Native Tizen

Toni Haryanto 31 Agustus 2016

Integrasi Google, Twitter, dan Facebook pada Aplikasi Mobile Native Tizen

Tizen SDK sudah dilengkapi dengan library OAuth 2 sehingga kita dapat terkoneksi dengan aplikasi lain yang menerapkan OAuth seperti Google, Facebook dan Twitter. Pada turorial kali ini kita akan mempelajari bagaimana aplikasi Tizen dapat terhubung dan merekues token yang dapat digunakan di dalam aplikasi untuk mengambil sejumlah data user dari media social Google, Facebook dan Twitter. Saat tulisan ini ditulis, library OAuth baru tersedia untuk SDK aplikasi native saja.

Persiapan Aplikasi

Buka Tizen IDE, lalu pilih menu File > New > Tizen Native Project. Pada tab Template, pilih tipe Basic UI, lalu beri nama project sesuai keinginan. Klik tombol Finish. Pada tutorial in membiarkannya dengan nama BasicUI, sehingga file .c dan file .h pun bernama basicui.c dan basicui.h.

Buka file src/basicui.c dan tambahkan kode berikut di bagian akhir fungsi create_base_gui().

/* Base Layout */
ad->layout = elm_layout_add(ad->conform);
evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_layout_theme_set(ad->layout, "layout", "application", "default");
evas_object_show(ad->layout);
elm_object_content_set(ad->conform, ad->layout);

/* Naviframe */
ad->nf = elm_naviframe_add(ad->layout);
elm_object_part_content_set(ad->layout, "elm.swallow.content", ad->nf);
eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_MORE, eext_naviframe_more_cb, NULL);

// Create Box container
Evas_Object *box = elm_box_add(ad->nf);
elm_box_horizontal_set(box, EINA_FALSE);
evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_object_content_set(ad->nf, box);
evas_object_show(box);

// Create button for login to google
Evas_Object *buttonGoogle = elm_button_add(box);
elm_object_text_set(buttonGoogle, "Google");
evas_object_size_hint_weight_set(buttonGoogle, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(buttonGoogle, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_box_pack_end(box, buttonGoogle);
evas_object_smart_callback_add(buttonGoogle, "clicked", google_oauth_cb, ad->nf);
evas_object_show(buttonGoogle);

// Create button for login to twitter
Evas_Object *buttonTwitter = elm_button_add(box);
elm_object_text_set(buttonTwitter, "Twitter");
evas_object_size_hint_weight_set(buttonTwitter, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(buttonTwitter, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_box_pack_end(box, buttonTwitter);
evas_object_smart_callback_add(buttonTwitter, "clicked", twitter_oauth_cb, ad->nf);
evas_object_show(buttonTwitter);

// Create button for login to facebook
Evas_Object *buttonFacebook = elm_button_add(box);
elm_object_text_set(buttonFacebook, "Facebook");
evas_object_size_hint_weight_set(buttonFacebook, EVAS_HINT_EXPAND,
EVAS_HINT_EXPAND);
evas_object_size_hint_align_set(buttonFacebook, EVAS_HINT_FILL, EVAS_HINT_FILL);
elm_box_pack_end(box, buttonFacebook);
evas_object_smart_callback_add(buttonFacebook, "clicked", facebook_oauth_cb, ad->nf);
evas_object_show(buttonFacebook);

// add box to naviframe
elm_naviframe_item_push(ad->nf, "OAuth 2.0 Sample", NULL, NULL, box, NULL);

Pada kode di atas, kita membuat objek box dan menyisipkan tiga buat objek button masing-masing untuk menjalankan autorisasi OAuth untuk Google, Twitter dan Facebook. Pada setiap button kita sudah sisipkan event handler bilamana tombol ditekan, dengan mendefinisikan fungsi callback masing-masing untuk Google, Twitter dan Facebook yaitu google_oauth_cb, twitter_oauth_cb dan facebook_oauth_cb. Oleh karena itu kita deklarasikan ketiga fungsi tersebut di atas fungsi create_base_ui(). Adapun isi dari masing-masing fungsi akan kita buat pada langkah selanjutnya.

void google_oauth_cb(void *data, Evas_Object *obj, void *event_info)
{

}

void twitter_oauth_cb(void *data, Evas_Object *obj, void *event_info)
{

}

void facebook_oauth_cb(void *data, Evas_Object *obj, void *event_info)
{

}

Tampilan akhir dari aplikasi kita akan seperti gambar berikut:

1

Persiapan terakhir adalah menyisipkan library oauth2 di bagian paling atas file basicui.c.

#include <oauth2.h>

Menambahkan Kode untuk Menampilkan Response

Kita akan mengambil response token yang kita sudah dapatkan dari hasil login dari ketiga social media dan menampilkannya pada popup sebagai bukti bahwa kita berhasil terhubung dengan social media tersebut. Tutorial ini hanya akan menunjukkan bagaimana dapat terhubung dengan ketiga media. Adapun setelah itu Kamu dapat melakukan sejumlah task seperti menggunakan kontak untuk registrasi di aplikasi Tizen, menampilkan sejumlah data dari social media seperti Facebook avatas dan Twitter tweet.

Tambahkan kode berikut setelah kode typedef pada file basicui.c:

static void
popup_btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
{
  Evas_Object *popup = data;
  evas_object_del(popup);
}

static void
create_popup(char *popup_str, void * data)
{
  Evas_Object *popup = elm_popup_add(win_data);
  if (flag == 0)
    elm_object_part_text_set(popup, "title,text", "Response");
  else if (flag == 1)
    elm_object_part_text_set(popup, "title,text", "Success");

  Evas_Object *btn;
  char str[2048] = {0,};
  strcpy(str, popup_str);
  elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
  evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_object_text_set(popup, popup_str);
  btn = elm_button_add(popup);
  elm_object_style_set(btn, "popup");
  evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
  elm_object_text_set(btn, "OK");
  elm_object_part_content_set(popup, "button1", btn);
  eext_object_event_callback_add(popup,
  EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
  evas_object_smart_callback_add(btn, "clicked", popup_btn_clicked_cb, popup);
  evas_object_show(popup);
  flag = 0;
  return;
}

void
token_response_cb(oauth2_response_h response, void *user_data)
{
  dlog_print(DLOG_INFO, LOG_TAG, "token_response_cb");
  char *acc_token = NULL;
  oauth2_response_get_access_token(response, &acc_token);
  char *ref_token = NULL;
  oauth2_response_get_refresh_token(response, &ref_token);
  google_refresh_token = ref_token;
  long long int expires_in = 0;
  oauth2_response_get_expires_in(response, &expires_in);
  char displayStr[1024] = {0,};

  if (acc_token) {
    displayStr[0] = '\0';
    strcpy(displayStr, "access token = ");
    strcat(displayStr, acc_token);
  } else {
    oauth2_error_h e_handle =  NULL;
    char* error_msg = NULL;
    oauth2_response_get_error(response, &e_handle);
    oauth2_error_get_description(e_handle, &error_msg);
      
    if (error_msg)
      strcpy(displayStr, error_msg);
    else {
      int error_code = 0;
      int platform_error_code = 0;
      oauth2_error_get_code(e_handle, &error_code, &platform_error_code);

      if (error_code != 0 || platform_error_code != 0)
        sprintf(displayStr, "Error = [%d][%d]", error_code, platform_error_code);
      else
        strcpy(displayStr, "Unknown server error");
    }
  }

  if (ref_token) {
    strcat(displayStr, "\r\n");
    strcat(displayStr, "refresh token = ");
    strcat(displayStr, ref_token);
  }

  if (expires_in != 0) {
    strcat(displayStr, "\r\n");
    strcat(displayStr, "expires in = ");
    char expires_str[128] = {0};
    sprintf(expires_str, "%lld", expires_in);
    strcat(displayStr, expires_str);
  }

  create_popup(displayStr, win_data);
  return;
}

Kita membuat tiga buah fungsi yakni token_response_cb untuk menangkap response token dari media setelah proses autorisasi berhasil, create_popup untuk menampilkan popup berisi token, dan popup_btn_clicked_cb untuk menutup popup.

Integrasi Google

Langkah pertama integrasi akun Google di aplikasi adalah dengan membuat terlebih dahulu Google API console project dan mendapatkan client ID. Untuk itu ikuti langkah berikut:
  1. Buka Google API Console di URL https://console.developers.google.com/projectselector/apis/library. Login terlebih dahulu dengan akun Google.
  2. Buka project yang sudah pernah dibuat atau buat project baru dengan mengklik tombol Create a Project. g1
  3. Pada panel popup New Project, isikan Project name, lalu klik tombol Create. Tunggu hingga proses pembuatan project selesai. g2
  4. Pada sidebar, di bawah tulisan “API Manager”, klik menu Credentials, klik tab OAuth consent screen. Isi kolom Email address dan Product name shown to users. Klik tombol Save. g3
  5. Pada tab Credentials, klik dropdown list Create credentials, lalu pilih OAuth client ID. g4
  6. Pada jendela Create client ID, pilih opsi Other, lalu beri nama, misalkan “Tizen”. Klik tombol Create. g5
  7. Kita akan mendapatkan client ID dan client secret. Salin dan simpan kode tersebut karena akan kita gunakan dalam kode aplikasi. g6
Sekarang buka project Tizen Native yang sudah kita siapkan seperti pada langkah Persiapan Aplikasi. Buka file basicui.c dan tambahkan kode berikut di dalam fungsi google_oauth_cb(): 
void google_oauth_cb(void *data, Evas_Object *obj, void *event_info)
{
  win_data = (Evas_Object *) data;

oauth2_manager_h mgr = NULL;
int ret = oauth2_manager_create(&mgr);


oauth2_request_h request = NULL;
ret = oauth2_request_create(&request);


ret = oauth2_request_set_auth_end_point_url(request, "https://accounts.google.com/o/oauth2/auth");
ret = oauth2_request_set_token_end_point_url(request, "https://accounts.google.com/o/oauth2/token");
ret = oauth2_request_set_redirection_url(request, "https://localhost:8080");


ret = oauth2_request_set_client_id(request, "CLIENT_ID");
ret = oauth2_request_set_client_secret(request, "CLIENT_SECRET");


ret = oauth2_request_set_scope(request, "email");


ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
ret = oauth2_request_add_custom_data(request, "prompt", "consent");
ret = oauth2_request_add_custom_data(request, "access_type", "offline");


if (mgr && request) {
mgr1 = mgr;
ret = oauth2_manager_request_token(mgr, request,
token_response_cb, NULL);
}
}
Fungsi di atas akan dipanggil ketika tombol Google ditekan. Kamu hanya perlu memasukkan kode CLIENT_ID dan CLIENT_SECRET yang sudah Kamu generate sebelumnya. Maka ketika tombol Google ditekan, aplikasi akan membuka jendela naviframe baru untuk menampilkan halaman login Google, dan bila proses autorisasi berhasil, Google akan mengembalikan kode token yang bisa kita gunakan untuk mengakses sejumlah data yang kita inginkan, seperti pada contoh kode di atas kita akan request email.

gr

Integrasi Twitter

Langkah pertama integrasi akun Twitter di aplikasi adalah dengan membuat terlebih dahulu Twitter App project untuk mendapatkan consumer key dan consumer secret. Untuk itu ikuti langkah berikut:
  1. Buka Twitter Application Management pada URL https://apps.twitter.com. Login terlebih dahulu dengan akun Twitter.
  2. Klik tombol Create New App.
  3. Pada halaman Create an application, isi form Application detail, mencakup Name, Description, Website, dan Callback URL. Untuk kolom Callback URL, isi dengan https://127.0.0.1:8080. Klik tombol Create your Twitter Application. t1
  4. Setelah selesai dibuat, kita akan mendapatkan Consumer key (API key) dan Consumer secret (API secret), yang dapat diakses pada tab Keys and Access Tokens. Kedua kode tersebut akan kita gunakan pada kode aplikasi t2
Sekarang buka project Tizen Native yang sudah kita siapkan seperti pada langkah Persiapan Aplikasi. Buka file basicui.c dan tambahkan kode berikut di dalam fungsi twitter_oauth_cb(): 
void twitter_oauth_cb(void *data, Evas_Object *obj, void *event_info)
{
  oauth2_manager_h mgr = NULL;
  int ret = oauth2_manager_create(&mgr);

oauth2_request_h request = NULL;
ret = oauth2_request_create(&request);
win_data = (Evas_Object *) data;


ret = oauth2_request_set_auth_end_point_url(request, "https://api.twitter.com/oauth2/token");
ret = oauth2_request_set_token_end_point_url(request, "https://api.twitter.com/oauth2/token");
ret = oauth2_request_set_redirection_url(request, "https://127.0.0.1:8080");


ret = oauth2_request_set_client_id(request, "CONSUMER_ID");
ret = oauth2_request_set_client_secret(request, " CONSUMER_SECRET");


ret = oauth2_request_set_grant_type(request,
OAUTH2_GRANT_TYPE_CLIENT_CREDENTIALS);


ret = oauth2_request_set_client_authentication_type(request,
OAUTH2_CLIENT_AUTHENTICATION_TYPE_BASIC);


if (mgr && request) {
mgr1 = mgr;
ret = oauth2_manager_request_token(mgr, request,
token_response_cb, NULL);
}
}
Tidak jauh berbeda dengan mekanisme OAuth pada Google seperti yang sudah kita coba pada langkah sebelumnya. Pada fungsi ini, kita harus memasukkan CONSUMER_ID dan CONSUMER_SECRET dengan yang sudah kita dapat dari Twitter. Maka bila kita mengklik tombol Twitter, aplikasi akan langsung menerima token tanpa harus login terlebih dahulu.

tr1

Integrasi Facebook

Langkah pertama integrasi akun Twitter di aplikasi adalah dengan membuat terlebih dahulu Twitter App project untuk mendapatkan consumer key dan consumer secret. Untuk itu ikuti langkah berikut:
  1. Buka halaman Facebook for Developers di URL https://developers.facebook.com/apps/.
  2. Buat project baru dengan mengklik tombol Add a new app.
  3. Pada panel popup Create a New App ID, isi form yakni kolom Display Name, Contact Email dan Category. Kemudian klik tombol Create App ID. f1
  4. Pada halaman Product Setup, klik tombol Get Started pada product Facebook Login. f2
  5. Pada bagian panel Client OAuth Settings, isi kolom Valid OAuth redirect URIs dengan https://127.0.0.1:8080, dan kolom Login from Devices dengan opsi Yes. Klik tombol Save Changes di bagian kanan bawah halaman. f3
  6. Pada sidebar, klik menu Dashboard. Pada halaman Dashboard kita akan mendapati App ID dan App secret yang akan kita gunakan di dalam kode aplikasi kita. f4
Sekarang buka project Tizen Native yang sudah kita siapkan seperti pada langkah Persiapan Aplikasi. Buka file basicui.c dan tambahkan kode berikut di dalam fungsi facebook_oauth_cb(): 
void facebook_oauth_cb(void *data, Evas_Object *obj, void *event_info)
{
  oauth2_manager_h mgr = NULL;
  int ret = oauth2_manager_create(&mgr);

win_data = (Evas_Object *) data;


oauth2_request_h request = NULL;
ret = oauth2_request_create(&request);


ret = oauth2_request_set_auth_end_point_url(request, "https://www.facebook.com/dialog/oauth");
ret = oauth2_request_set_redirection_url(request, "https://127.0.0.1:8080");
ret = oauth2_request_set_client_id(request, "APP_ID");
ret = oauth2_request_set_scope(request, "public_profile");
ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_TOKEN);


if (mgr && request) {
mgr1 = mgr;
ret = oauth2_manager_request_token(mgr, request,
token_response_cb, NULL);
}
}
Pada Facebook, kita cukup mengisikan  APP_ID sebagai client ID dan ketika tombol Facebook ditekan, aplikasi akan membuka jendela naviframe baru untuk menampilkan halaman autentikasi Facebook.

fr
Tags
Tutorial
Share to
FacebookTwitterLinkedIn