Belajar SSO (Single Sign On/Out)

Selamat Siang 🙂

Pada cermi kali ini angga mau bahas tentang belajar SSO (Single Sign On/Out). Angga memanfaatkan hosting gratis di Hostinger.

Singkat cerita setelah angga mendapatkan hosting dan domain gratis.

Contoh tampilan sukses membuat website

Selanjutnya setelah mendapatkan website nya, kemudian angga menggunakan aplikasi SmartFTP Client untuk mendapatkan FTP.

Gambar di atas adalah tampilan dari SmartFTP Client, kemudian membuat koneksi baru dan isi sesuai dengan akun ftp yang tadi dibuat pada hosting.

Nah, setelah terbaca file FTP kita, terdapat 3 folder yang dimana wilayah folder untuk mengedit tampilan atau menambah script coding yaitu pada folder “public_Html”

Pada folder Public_Html terdpat 2 file yaitu index.html dan .htacces. Kemudian kita hapus dan ganti pada script html yang ada pada file index.html karena di dalamnya berisi script default ketika kita berhasil membuat website nya.

Kemudian langkah-langkah untuk membuat sso, yaitu :

 

  • klik url berikut http://console.developers.google.com/ lalu login dengan akun gmail anda
  • Setelah login, anda akan diarahkan menuju halaman Google Developers Console
  • buatlah project baru anda dengan mengklik Create project, seperti gambar dibawah ini:

 

  • Setelah selesai membuat project baru, anda akan dibawa menuju Project Dashboard, klik Credentials
  • Klik Create New Client ID & Create New Key
  • Setelah berhasil membuat Client ID dan Key, disitu akan terlihat CLIENT ID anda
  • Untuk melihat Client Secret,

Untuk Client ID, Email Address, dan Client Secret, sengaja angga coret dikarenakan ini ID yang harus dijaga, yang nantinya akan dimasukan ke dalam website 🙂

 

Ketika pengguna masuk menggunakan akun Google, aplikasi Anda mendapatkan  akses, yang dapat  digunakan untuk membuat panggilan ke Google+ API atas nama pengguna Anda .Menambahkan tombol Google+ Sign-In ke halaman website tadi mengharuskan  untuk mengikuti  langkah ini :

<script src="https://apis.google.com/js/client:platform.js" async 
defer></script>

bagian bawah <head> pada index.html , seperti berikut :

Menambahkan script ini didalam <body> … </body>

<span id="signinButton">
  <span
    class="g-signin"
    data-callback="signinCallback"
    data-clientid="CLIENT_ID"
    data-cookiepolicy="single_host_origin"
    data-requestvisibleactions="http://schema.org/AddAction"
    data-scope="https://www.googleapis.com/auth/plus.login">
  </span>
</span>

note : data-clientid="CLIENT_ID" (ganti CLIENT_ID dengan client id yang kita dapatkan tadi)

Seperti ini :

 

Kita akan coba melihat apa yang berubah dari tampilan tersebut 🙂

Views All Time
Views All Time
122
Views Today
Views Today
1
130 Total Views 1 Views Today

Leave a Reply

You must be logged in to post a comment.