››Koneksi Google API

Koneksi Google API

Qonita

Google API memungkinkan Anda untuk terhubung ke sistem Google dengan beberapa sistem seperti:

  • Login Google
  • Google Maps

Pengaturan Login Ke Google

Fitur ini digunakan untuk memudahkan audiens (konsumen) untuk mengajukan keanggotaan atau membuat akun untuk masuk ke situs web dengan mudah. Caranya adalah sebagai berikut:

  1. Kunjungi link: https://developers.google.com/identity/sign-in/web/sign-in
  2. Klik tautan “Credential Page” (Halaman Kredensial).
  3. Jika Anda belum melakukan login, maka silahkan login  menggunakan akun Gmail Anda. Lalu, klik “Next” (Selanjutnya).
  5. Klik tombol “+ Create Credential” (+Buat Kredensial).
  6. Klik opsi “OAuth Client ID”.
  7. Terdapat kotak yang berisi opsi pilihan. Anda dapat memilih “Web Application” (Aplikasi Web) dalam tahap ini.

  8. Klik tombol “Add URI” (Tambahkan URI).
  9.  Masukkan URL website Anda yang diawali dengan https (misal: https://makewebeasy.com), lalu tekan “Create” (Buat).

  10. Di bagian ini, Anda dakan mendapatkan client ID atau ID klien untuk menggunakan Google Sign-In.
  11. Masukkan nilai client ID atau ID klien dalam bidang  Google Sign-In Client ID di halaman pengaturan API Google dan kemudian atur untuk mengaktifkan sistem Login ke Google.

Pengaturan Koneksi Google Maps

Tampilan peta pada website digunakan untuk memudahkan audiens (konsumen) mengetahui lokasi toko atau perusahaan Anda. Cara untuk mengatur koneksi dengan Google Maps adalah sebagai berikut:

  1. Kunjungi situs: https://cloud.google.com/maps-platform
  2. Klik tombol “Get Started” (Mulai).
  3. Klik untuk memilih penggunaan Maps lalu tekan tombol “Continue” (Lanjutkan).
  4. Jika Anda belum melakukan login, maka silahkan login  menggunakan akun Gmail Anda. Lalu, klik “Next” (Selanjutnya).
  5. Beri nama project sesuai keinginan. Nama harus mengandung lebih dari 4 karakter, termasuk spasi dan -. Jika nama sudah lengkap, klik opsi “Yes” (Ya) dan klik “Next (Selanjutnya)”.
  6. Klik “Create Billing Account” (Buat Akun Penagihan) untuk mengatur keterangan pembayaran.
  7. Jika akun Google Anda belum pernah digunakan untuk mendapatkan kunci API Google Maps sebelumnya, Anda dapat melakukan uji coba gratis selama 30 hari yang akan ditawarkan seperti yang ditunjukkan pada gambar dibawah. Pilih lokasi negara Anda, lalu tinjau “Terms of Service” (Persyaratan Layanan). Selanjutnya, klik “Agree and Continue” (Setuju dan Lanjutkan).
  8. Siapkan profil pembayaran, edit jenis akun Anda, lalu kemudian isi nama dan alamat.
  9. Scroll ke bawah untuk mengatur metode pembayaran Anda. Edit nama dan lokasi Anda saat ini, lalu klik “Start My Free Trial” (Mulai Uji Coba Gratis).
  10. Setelah informasi kartu kredit telah diatur, klik pada menu “Credential” (Kredensial), lalu klik “Configure Consent Screen” (Konfigurasikan Layar Persetujuan).
  11. Pada halaman berikutnya, Anda akan melihat “OAuth Consent Screen” (Layar Persetujuan OAuth).
  12. Anda dapat memilih “User Type” (Jenis Pengguna) sebagai “External” (Eksternal).
  13. Tekan “Create” (Buat).
  14. Isi informasi yang diminta pada kolom “App Information”. Sebaiknya, nama domain tidak mengandung .com (misal: makewebeasy ). Untuk bagian User Support Email, masukkan sesuai alamat email yang digunakan untuk mendaftar pada bagian awal.
  15. Pada bagian Developer Contact Information (Informasi Kontak Developer), masukkan juga alamat email yang digunakan ketika mendaftar.
  16. Selanjutnya, klik tombol “Save and Continue” (Simpan dan Lanjutkan).
  17. Lalu, klik “Save and Continue” (Simpan dan Lanjutkan) lagi.
  18. Setelah itu, klik tombol “Back To Dashboard” (Kembali Ke Dasbor).
  19. Klik menu “Credentials” (Kredensial), lalu klik +Create Credentials dan pilih API Key.
  20. Setelah itu, tekan ikon Copy pada kolom Your API Key dan klik tombol Restrict Key.
  21. Pada bagian Key Restriction, kik HTTP Refferes (Websites), lalu pada bagian Website Restrictions, klik Add an Item.
  22. Anda dapat mengisi informasi yang diminta dalam bagian ini dengan mengambilnya pada sistem back-end seperti pada gambar.
  23. Pada kolom API Restriction, klik tombol Don’t Restrict Key (Jangan Batasi), lalu klik Save.
  24. Setelah itu, klik pada kata APIs untuk mengaktifkan 4 topik sebagai berikut:
    – Geocoding API
    – Geolocation API
    – Maps JavaScript API
    – Places API
  25. Misalnya jika Anda mengaktifkan Maps JavaScript API, klik pada bagian atasnya dan Anda akan melihat tampilan halaman seperti pada gambar.
    Klik tombol “Enable” dan API telah dibuka.
  26. Kembali ke website, lalu masuk ke halaman Design > Contact Us Menu, lalu klik pada tombol “Map and Branches” dan klik “Manage”. 
  27. Paste API Key yang telah di-copy sebelumnya pada langkah 20.
  28. Klik “Add Branch” 
  29. Klik “Save” (Simpan) untuk menyimpan seluruh hasil pekerjaan.
Qonita

Qonita