Membuat Aplikasi Login Dengan Google Account

Saat ini siapa sih yang tidak punya akun google? Google sudah berhasil membuat kita selalu menggunakan produk – produknya, karena memang bermanfaat dan sangat dimudahkan. Dengan satu akun google kita sudah bisa menggunakan layanan google seperti gmail, google+, google drive, youtube, maps, adsense dan lain sebagainya.

Posting kali ini kita akan sama-sama belajar membuat aplikasi yang loginnya bisa menggunakan akun google. Dengan fitur ini tentu pengguna aplikasi kita merasa dimudahkan, karena tidak usah mendaftar – daftar lagi pada aplikasi kita, cukup menggunakan akun google yang mereka punya.

Sebelum memulai, kita pahami dulu alur sistem login menggunakan akun google ini, kira – kira seperti berikut gambarannya:

Jadi pengguna aplikasi kita melakukan login dihalaman google, jika berhasil login maka google akan mengalihkan ke url callback yang kita definisikan, disertakan pula code yang akan digunakan untuk mendapatkan token. Dengan token maka aplikasi kita bisa mendapatkan profil pengguna seperti alamat email, nama depan, nama belakang, jenis kelamin dan lain-lain kecuali password ya.

Sebenarnya tanpa profile pengguna seperti alamat email, nama, jenis kelamin dll, Aplikasi kita sudah bisa mengidentifikasi bahwa ada pengguna yang login menggunakan akun googlenya dan kita buat session untuk mereka, namun untuk kepentingan kelengkapan profil biasanya kita membutuhkan nama dan alamat email saja.

Sekarang yuk sama – sama kita mulai praktikkan projek kita kali ini tentang membuat aplikasi login dengan akun google.

Setting Google API Console

Langkah pertama, kita harus membuat projek di google API console untuk mendapatkan OAuth 2.0 client IDs, caranya:

Akses API Console https://console.developers.google.com
Menuju ke menu Credentials kemudian ciptakan projek baru:

Sebagai contoh nama projeknya DokumenAry, kemudian pilih create:
Menuju ke tab OAuth consent screen, kemudian atur profile aplikasi, contoh:

Kemudian simpan.
Menuju ke tab Credentials, kemudian Create Credentials pilih Oauth Client ID:

Kemudian pilih Create maka kita sudah berhasil membuat OAuth 2.0 client ID

Pada isian Authorized redirect URLs saya isikan http://localhost/login_google/auth.php ini karena kita selanjutnya akan membuat projek dilocalhost kita dengan nama folder login_google.
Aktifkan Google+ API, supaya aplikasi kita bisa mendapatkan profil pengguna

Memulai Menggunakan Google APIs Client Library for PHP

Google sudah menyediakan library php yang bisa kita gunakan untuk projek kita ini, jadi kita tinggal pakai saja. Pastikan versi php Anda minimal 5.4.

Buat folder didalam htdocs, pada contoh kali ini saya beri nama login_google.
Download file composer.phar di https://getcomposer.org/download/, pilih manual download saja atau langsung ke https://getcomposer.org/download/1.2.2/composer.phar dan letakkan file composer.phar pada folder login_google.
Penjelasan Singkat Tentang Composer:
Composer merupakan dependency management yang sekarang umum digunakan para programmer PHP dalam membangun aplikasi. Fungsi composer adalah kita dapat dengan mudah mendapatkan paket – paket library php yang kita butuhkan dalam projek kita dan sumbernya terpecaya. Untuk melihat paket – paket yang ada bisa melihatnya di https://packagist.org/.
Buka Terminal untuk pengguna mac & linux, untuk windows buka CMD. Kemudian masuk ke folder htdocs/login_google, kemudian jalankan perintah berikut:
Mac & Linux : php composer.phar require google/apiclient:^2.0
Windows : ..\..\..\php\php.exe composer.phar require google/apiclient:^2.0
Setelah dijalankan, maka akan ada folder verdor:
Kembali ke API Console, kemudian download Auth client IDs:

Simpan di dalam folder login_google, kemudian rename menjadi client_secret.json

Buat file baru bernama index.php sejajar dengan folder vendor, dan berikut isinya:

<?php
require_once __DIR__.'/vendor/autoload.php';
 
session_start();
 
if (isset($_SESSION['access_token']) && $_SESSION['access_token']) {
  $profile = $_SESSION['access_profile'];
  echo "<img src=\"{$profile['image']['url']}\">";
  echo "<h3>Hai, {$profile['displayName']} ({$profile['emails']['0']['value']})</h3>";
  echo "Anda telah berhasil login menggunakan akun google anda, klik <a href='logout.php'>Logout</a> untuk keluar.";
} else {
  echo "<a href='auth.php'>Login dengan Akun Google</a>";
}

Buat file baru bernama auth.php sejajar dengan folder vendor, dan berikut isinya:

<?php
require_once __DIR__.'/vendor/autoload.php';
 
session_start();
 
$client = new Google_Client();
$client->setAuthConfigFile('client_secret.json');
$client->setRedirectUri("http://localhost/login_google/auth.php");
$client->setScopes(array(
    "https://www.googleapis.com/auth/userinfo.email",
    "https://www.googleapis.com/auth/userinfo.profile",
    "https://www.googleapis.com/auth/plus.me"
));
 
if (!isset($_GET['code'])) {
  $auth_url = $client->createAuthUrl();
  header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL));
} else {
  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
   
  try {
      // profile
      $plus = new Google_Service_Plus($client);
      $_SESSION['access_profile'] = $plus->people->get("me");
  } catch (\Exception $e) {
      echo $e->__toString();

      $_SESSION['access_token'] = "";
      die;
  }
 
  header('Location:index.php');
}

Terahir buat file lagi bernama logout.php, dan berikut kodenya:
```
<?php 
session_start();

$_SESSION['access_token'] = "";
$_SESSION['access_profile'] = "";

header('location:index.php');
```
Saat logout kita akan mengosongkan variabel $_SESSION[‘access_token’] & $_SESSION[‘access_profile’]

Test Aplikasi

Saatnya testing aplikasi, sekarang coba akses http://localhost/login_google, kemudian klik link Login dengan Akun Google maka akan diarahkan kehalaman login akun google, kemudian akan dijumpai halaman seperti berikut:

Klik Allow, maka akan diredirect kembali ke halaman aplikasi kita, dan profil sudah didapatkan:

Video Tutorial

Download FIle

Teman – teman bisa mendownload file contohnya di SINI.

Ok sekian totorial kali ini, selamat mencoba.
Sekali lagi semoga tutorial ini bisa memberikan pencerahan buat teman – teman semua.

Terimakasih 🙂

Category: Uncategorized

Tags: aplikasi login, aplikasi login dengan akun gmail, aplikasi login dengan google account, composer

Comments

Raka Aditya
September 12, 2017 - 4:04 pm

saya ada masalah pada saat menginstal composernya via wndows cmd “The system cannot find the path specified.”

Reply ↓
Raka Aditya
October 13, 2017 - 3:21 pm

oh iya mas, gak pake database ?

Reply ↓
Destu
November 29, 2018 - 6:45 am

Mac & Linux : php composer.phar require google/apiclient:^2.0
Windows : ......\php\php.exe composer.phar require google/apiclient:^2.0

pada Windows ndak mau jalan,, mohon bantuanya?

Reply ↓
- Almazari
  November 29, 2018 - 8:17 am
  
  sepertinya masalahnya ada di penentuan path phpnya, mas sudah tau path lokasi php.exe nya? lokasinya sesuai install paket webserver (XAMPP, WAMP, dst) nya di drive mana, kalo di C, biasanya C:\program files\xampp\php\php.exe, cara ngetestnya tambahkan -v jadi C:\program files\xampp\php\php.exe -v, keluar versi phpnya tidak, kalo keluar berarti sudah bener pathnya.
  
  Reply ↓
aji
March 2, 2019 - 11:31 pm

forbidden 403

Reply ↓
CV. Kubah Motif Bangilan
June 14, 2022 - 1:46 pm

terima kasih ilmunya langsung saya praktek dan berhasil
walaupun tidak sampai g+ konsol
minimal sudah dapat client ID dan Secret

Reply ↓
Dompet mudah telasfer
February 2, 2024 - 12:26 pm

Saya ingin buat aplikasi

Reply ↓
casinoapp.Webgarden.com
February 6, 2024 - 9:51 am

Howdy, i read your blog occasionally and i own a similar one and i was just wondering if you
get a lot of spam comments? If sso how do yyou potect against it, any
plugin or anything you can suggest? I get sso
much latelyy it’s driving me crazy so any support is very much appreciated.

Reply ↓
https://Livegamevavada.Webgarden.com/
February 7, 2024 - 9:58 am

Hiya very nice site!! Mann .. Beautiful .. Wonderful ..
I’ll booomark your blog and take the feeds also?
I am glad to seearch out a lot of helpful information right here within the post, we’d like develop extra techniques in this regard, thank you for sharing.
. . . . .

Reply ↓
jeepin.Com
February 8, 2024 - 6:56 pm

Verry good write-up. I definitely appreciate this website.
Keep writing!

Reply ↓
Saubier.com
February 9, 2024 - 4:07 pm

I wantewd to thank you forr this excellent read!!
I definitely loved every biit of it. I have you book marked too
look at new things you post…

Reply ↓
Debian.Ru
February 10, 2024 - 3:35 am

Hi there it’s me, I am also visiting this web
page regularly, this web page iss actually pleasant and the peopole
are actually sharing good thoughts.

Reply ↓
http://Mail.Spearboard.com/
February 10, 2024 - 5:30 pm

I could not refrain from commenting. Well written!

Reply ↓
Hnkhajduk.Com
February 13, 2024 - 1:59 am

Hi, Neat post. There’s an issue along with
your site in web explorer, may test this? IE nonetheless is the
market chief and a huge copmponent of other people will pass over your magnificent writing duue too this problem.

Reply ↓
http://heroicfantasygames.free.fr/Forum/profile.php?mode=viewprofile&u=11590
February 13, 2024 - 9:42 pm

Hi there, i read your blog from time to time and i own a similar one and i was just wondering
if yoou get a lot of spam feedback? If so how do you stop it, any plugin or anything you can advise?
I get so much lately it’s driving me mad so
any support is very much appreciated.

Reply ↓
http://Forum.aunbox.com/member.php?3456325-Ilushikrei
February 16, 2024 - 11:19 am

This blig was… how do you say it? Relevant!! Finally I have found something which helped me.
Kudos!

Reply ↓
http://Www.smokinstangs.com/member.php/281366-Ilushikowc
February 16, 2024 - 5:26 pm

These are truly impressive ideas in concerning blogging.
You have touched some good things here. Any way keep
uup wrinting.

Reply ↓
www.Qcforc.Org
February 20, 2024 - 5:59 pm

Wow, awesome weblog format! How lengthy have you been runninhg a blog for?
you make running a blog look easy. The total look of your website is fantastic, let alone the content!

Reply ↓
post461417
February 21, 2024 - 5:12 am

I’m curious too find out what blog system you aare using?
I’m having some small security problems with my latest blog and I would
like to fibd something more safeguarded. Do you have any
recommendations?

Reply ↓
http://Debian.ru/members/562745-Veronaekf
February 21, 2024 - 6:08 pm

Stunbning quest there. What occurred after? Take care!

Reply ↓
http://forum.d-dub.com/member.php?838403-Veronanek
February 22, 2024 - 4:27 am

I blog quikte often and I seriously appreciate your content.
This great article has truily peaked my interest.
I am going to take a note of your site and keep checking for new information about once per week.

I opted in for your Feed ass well.

Reply ↓
http://ds-Dealer.ru/forum/member.php?u=219039
February 22, 2024 - 2:42 pm

Good wweb site you’ve gott here.. It’s difficult to find goood quality writing lile yours nowadays.

I seriously appreciate people like you! Taake care!!

Reply ↓
http://ceparts.in/
February 22, 2024 - 8:26 pm

Thanks for finally wrting about >Membuat Aplikasi Login Dengan Goolgle Account | Dokumenary.net
<Liked it!

Reply ↓
http://Www.Oople.com/forums/member.php?u=235612
February 24, 2024 - 4:34 am

Great post. I was checking continuously tbis blog and I am impressed!
Very useful info specifically the last part 🙂 I care for such info a lot.
I was seeking this particular information for a very long time.
Thank you andd best of luck.

Reply ↓
forum-gsmlab.Com
February 24, 2024 - 6:19 pm

Great article, totally what I needed.

Reply ↓
najlepszy sklep
February 26, 2024 - 11:08 pm

Wow, wonderful weblog structure! How lengthy have you ever been blogging for?
you made blogging glance easy. The full glance
of your site is magnificent, let alone the content! You can see
similar: sklep internetowy and here najlepszy sklep

Reply ↓
https://jubileebeyond.site/
March 7, 2024 - 4:36 am

Hi there, I enjoy reading all of your post. I wanted to write a little comment to support you.

Reply ↓
ccrpl.in
March 7, 2024 - 5:48 am

But if this is not the case, you will certainly need to download the 1xbet APK file.

Reply ↓
https://topcyber.site/
March 7, 2024 - 6:33 am

I read this post fully about the comparison of
most recent and previous technologies, it’s awesome article.

Reply ↓
porn sex
March 7, 2024 - 11:46 am

What’s up all, here every one is sharing these experience, thus it’s pleasant to read this webpage, and I used to pay a quick visit this blog daily.

Reply ↓
Pendik Siemens Servisi
March 7, 2024 - 11:56 am

It’s an amazing post designed for all the web users; they will obtain advantage from it I am sure.

Reply ↓
link
March 7, 2024 - 12:07 pm

I like the valuable information you provide in your articles.

I will bookmark your weblog and check again here regularly.
I’m quite certain I will learn many new stuff right here!
Best of luck for the next!

Reply ↓
pendik disleksi eğitimi
March 7, 2024 - 1:12 pm

magnificent publish, very informative. I wonder why the other specialists of this sector do not notice this.
You must proceed your writing. I am confident, you have a great readers’ base already!

Reply ↓
renta de equipo tecnico para eventos presupuesto
March 7, 2024 - 1:30 pm

Las cifras de este recuadro no son oficiales, son una
aproximación de lo que ha vendido el equipo. El juego más vendido en el
primer año de vida de la consola, fue Call of Duty 2,
vendió más de un millón de copias. En mayo de 2008, el título Grand Theft Auto IV se posicionó como el juego número uno de los más jugados en la Xbox Live desplazando
a Call of Duty 4 y Halo 3 en segundo y tercer lugar respectivamente.
En los días previos al estallido de la Guerra
de la Independencia, en concreto el 24 de abril de 1808, tuvo lugar en León, al
mismo tiempo que una serie de incidentes acaecidos en otras
ciudades españolas como Burgos, Toledo o Madrid, una manifestación popular
en favor de Fernando VII ante el miedo de que Carlos IV, el
cual contaba con el favor de los franceses,
volviera a reinar, suponiendo, por tanto, un rechazo a
Napoleón. Un hecho importante, desde el punto de vista político, fue la coronación por Diego Gelmírez de Alfonso Raimúndez, el
futuro Alfonso VII, en la catedral compostelana como rey de Galicia.

Reply ↓
https://moonlittop.site/
March 7, 2024 - 2:13 pm

You can definitely see your expertise within the article you write.
The world hopes for even more passionate writers like you who are not afraid to mention how they believe.

At all times go after your heart.

Reply ↓
Ataşehir Siemens Servisi
March 7, 2024 - 4:14 pm

I visit each day a few websites and sites to read posts, but this web site offers feature based posts.

Reply ↓
Pisang69
March 7, 2024 - 11:17 pm

My brother recommended I would possibly like this blog.
He used to be totally right. This publish actually made my day.
You can not consider just how a lot time I had spent
for this info! Thanks!

Reply ↓
jav new
March 8, 2024 - 3:24 am

Helpful information. Lucky me I found your site unintentionally, and I am shocked why
this coincidence did not happened in advance! I bookmarked it.

Reply ↓
what is net followers on tiktok
March 8, 2024 - 4:53 am

Hi i am kavin, its my first time to commenting anywhere, when i read this piece
of writing i thought i could also create comment due to this sensible
post.

Reply ↓
Pisang69
March 8, 2024 - 8:27 am

What i do not realize is in reality how you’re not really much more smartly-preferred than you might be
right now. You’re very intelligent. You recognize thus significantly
in the case of this topic, made me for my part imagine it from a
lot of varied angles. Its like women and men aren’t fascinated until it is one thing
to do with Girl gaga! Your personal stuffs nice.
At all times deal with it up!

Reply ↓
https://quantumvitality.site/
March 8, 2024 - 9:45 am

Thanks a lot for sharing this with all of us you really
recognise what you’re talking approximately! Bookmarked.
Please additionally talk over with my website =).
We can have a hyperlink trade arrangement between us

Reply ↓
Virusjp
March 8, 2024 - 2:36 pm

It’s appropriate time to make a few plans for the future and it is time to be happy.
I’ve read this publish and if I may just I wish
to suggest you some attention-grabbing things or tips.
Maybe you can write next articles referring to this article.
I want to read even more things approximately
it!

Reply ↓
fire138 login
March 8, 2024 - 3:25 pm

I’m curious to find out what blog platform you happen to
be utilizing? I’m having some minor security issues with
my latest site and I’d like to find something more safe. Do you have any
recommendations?

Reply ↓
บาคาร่า
March 8, 2024 - 4:33 pm

มอบหมายให้ พล.ต.อ.ดำรงศักดิ์ กิตติประภัสร์ รอง ผบ.ตร.ดูว่าคุณชนะเกมบาคาร่าจำนวนกี่เกมและผลสำเร็จที่คุณบรรลุ รับและแสดงทรัพย์สินพิเศษในโปรไฟล์ของคุณ ดูโปรไฟล์ของผู้เล่นอื่นเพื่อเปรียบเทียบกับของคุณ!

Reply ↓
optoelectronics
March 8, 2024 - 8:03 pm

I blog quite often and I really thank you for your information. Your article
has truly peaked my interest. I am going to book mark your site and keep checking for new details about once per week.

I opted in for your RSS feed as well.

Reply ↓
Baca Selengkapnya
March 9, 2024 - 8:11 am

This is my first time go to see at here and i am genuinely happy
to read everthing at alone place.

Reply ↓
Prediksi Jitu
March 9, 2024 - 8:32 am

Does your blog have a contact page? I’m having problems locating it but, I’d like to shoot you an email.
I’ve got some recommendations for your blog you
might be interested in hearing. Either way, great
blog and I look forward to seeing it develop over time.

Reply ↓
https://quantumapp.site/
March 9, 2024 - 11:03 am

I am actually thankful to the holder of this site who has shared
this wonderful paragraph at at this time.

Reply ↓
http://www.fordrangerforum.com/members/anthonyetrov7830.html
March 9, 2024 - 11:15 am

The California Electrical Operates Enterprise initial utilised CD
130.1 glass insulators.

Reply ↓
https://npocentral.net
March 9, 2024 - 1:20 pm

I was able to find good advice from your blog articles.

Reply ↓
fun88
March 9, 2024 - 4:09 pm

Howdy! I could have sworn I’ve visited your blog before but
after browsing through many of the posts I realized it’s new to me.
Regardless, I’m definitely pleased I discovered it and I’ll be book-marking it and checking back regularly!

Reply ↓
https://smartmoonlit.site/
March 9, 2024 - 4:38 pm

I just like the helpful information you provide in your articles.

I will bookmark your weblog and check again here regularly.
I’m quite sure I’ll learn lots of new stuff right right
here! Good luck for the next!

Reply ↓
mostbet az
March 9, 2024 - 5:18 pm

Futzal futbola daha bənzəyir, lakin qaydalarına görə fərqlənir
(çıxarkən topu əllə oyuna iç eləmək, topu qapıçıya ötürərkən qətiyyən vahid məhdudiyyət yoxdur və s.).

Reply ↓
mp3juices
March 9, 2024 - 9:03 pm

Greetings! Very helpful advice in this particular post! It’s the little changes which will make the most important changes.
Thanks for sharing!

Reply ↓
Biowin69 login
March 10, 2024 - 12:26 am

Awesome post.

Reply ↓
https://moonlitaspire.site/
March 10, 2024 - 2:33 am

I really like your blog.. very nice colors & theme.
Did you create this website yourself or did you hire someone to do it for
you? Plz answer back as I’m looking to design my own blog and would like to find out where
u got this from. appreciate it

Reply ↓
Beyin tümörü
March 10, 2024 - 6:09 pm

Thanks for sharing your thoughts. I truly appreciate your
efforts and I will be waiting for your furthrr post thanks once again.

Reply ↓
Sultanbeyli Beko Servisi
March 10, 2024 - 6:33 pm

Hiya very nice web site!! Guy .. Beautiful .. Wonderful
.. I’ll bookmark your site and take the feeds additionally?
I am satisfied to search out so many helpful information here in the post, we’d like develop more strategies in this regard, thank you for sharing.
. . . . .

Reply ↓
https://onlinemoonlit.site/
March 11, 2024 - 3:50 am

Hi to all, how is everything, I think every one is getting more
from this web site, and your views are fastidious for new people.

Reply ↓
https://topcyber.site/
March 11, 2024 - 4:16 am

Heya i am for the first time here. I came across this board and
I find It truly useful & it helped me out much. I hope to give
something back and help others like you aided me.

Reply ↓
mostbet
March 11, 2024 - 5:50 am

Mostbet Az 90 Casino Və İdman Mərcləri Mostbet Az 90
Kazino Azerbaycan Ən Yaxşı Bukmeyker…

Reply ↓
Prediksi Sdy 11 Maret 2024
March 11, 2024 - 8:00 am

Incredible points. Sound arguments. Keep up the good effort.

Reply ↓
Live Draw Sgp
March 11, 2024 - 10:41 am

Excellent, what a website it is! This web site provides useful data to us, keep
it up.

Reply ↓
https://techpegg.site/
March 11, 2024 - 1:10 pm

Thanks for finally talking about >Membuat Aplikasi
Login Dengan Google Account | Dokumenary.net <Liked it!

Reply ↓
https://jubileebeyond.site/
March 11, 2024 - 2:55 pm

These are genuinely wonderful ideas in about blogging. You have touched some pleasant factors here.
Any way keep up wrinting.

Reply ↓