Cara Membuat Fitur Login Menggunakan Akun Google pada Website

Hai teman-teman codrat semua semoga kalian sehat selalu. Kali ini saya ingin berbagi tentang cara membuat login menggunakan akun google pada website yang kita miliki. Dengan adanya fitur ini pengunjung web tidak akan susah untuk mendaftar dan akan membuat orang yang tadinya malas mendafatar jadi turut mendaftar karena kemudahannya.

Google Sign api yang akan kita gunakan agar nantinya calon pendaftar hanya tinggal memasukkan akun google mereka. Anda sebagai pemilik web bisa menyimpan data mereka kedalam database atau tidak. Adapun data yang bisa anda simpan adalah email, nama lengakp, nama depan, nama belakang, id, hingga gambar thumb.

Jangan berharap yah untuk bisa mendapatkan password mereka karena pihak google sendiri membatasinya. Selain tidak dapat password pengunjung salah satu hal yang susah dalam pembuatan login goole ini, anda harus memiliki hosting dan domain.

Susah jika anda hanya ingin menggunakan localhost, sebab biasnya aplikasi akan error. Tapi teman-teman tidak perlu khawatir, beacause kita bisa menggunakan penyedia hosting gratis seperti 000webhost.com.

Jika anda belum memiliki akun di 000webhost.com, silahkan buat terlebih dahulu. Jika sudah punya silahkan anda lanjutkan untuk membuat api Google Sign.

Membuat Hosting dan domain di 000webhost.com

1. Buka halaman https://id.000webhost.com/ dan silahkan login.

2. Setelah anda berhasil login silahkan cari tanda tambah seperti pada gambar kemudian klik.

3. Isi pertanyaan kemudian klik next atau selanjutnya

4. Isi nama website (jangan ada spasi karena nanti akan eror), pilih password default atau buat sendiri. Setelah itu klik Buat.

5. Jika website anda sudah di buat maka akan tampil alamat web anda. Sekarang anda punya domain dan hosting secara gratis (ingat karena ini gratis dia memiliki jangka waktu tertentu). Silahkan catat alamat domain gratis anda ini.

Mendaftarkan Aplikasi kedalam Google Sign

Sebelum kita membuat koding login menggunakan google sebelumnya kita perlu mendapatkan Client Id dengan cara sebagai berikut :

1. Buka halaman https://console.cloud.google.com/ dan login menggunakan akun google anda.

2. Klik buat pada menu Kredensial.

3. Masukkan nama project dan lokasi (biarkan default saja) selanjutnya klik buat.

4. Selanjutnya akan muncul beberapa menu di halaman utama, klik Layar persetujuan OAuth.

5. Isi nama aplikasi sesuai keinginan anda dan jangan lupa isi gambar. Untuk form lainnya silahkan isi sesuai domain yang telah di daftarkan tadi, seperti gambar di bawah kemudian klik simpan.

6. Kembali ke menu Kredensial silahkan klik button biru yaitu Buat kredensial dan pilih ID Klien OAuth.

7. Silahkan pilih aplikasi web dan isi Asal JavaScript yang sah : nama_domain dan URI pengalihan yang sah : nama_domain/login.php lalu klik buat.

8. Anda akan mendapatkan kode ID Klien dan klien, silahkan disimpan baik-baik kalau bisa simpan menggunakan aplikasi notepad atau sebangsanya.

Tahap pengkoden

Ada 3 file yang harus anda buat yaitu :

index.php
login.php
home.php

index.php

<!DOCTYPE html>

<html>

<head>

    <title>Login Menggunakan Google</title>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

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

    <meta name="google-signin-client_id" content="PASTE_Clien_ID_disini" >

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-4 col-md-offset-4">

            <div class="account-box">

                <div class="logo">

                    <center>codingrakitan.blogspot.com</center>

                </div>

                <form class="form-signin" action="#">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Email" required autofocus />

                </div>

                <div class="form-group">

                    <input type="password" class="form-control" placeholder="Password" required />

                </div>

                <label class="checkbox">

                    <input type="checkbox" value="remember-me" />

                    Keep me signed in

                </label>

                <button class="btn btn-lg btn-block purple-bg" type="submit">

                    Sign in</button>

                </form>

                <a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>

                <div class="or-box">

                    <span class="or">OR</span>

                    <div class="row">

                        <div class="col-md-12">

                            <center><div class="g-signin2" data-onsuccess="onSignIn"></div></center><br>

                        </div>

                    </div>

                </div>

                <div class="or-box row-block">

                    <div class="row">

                        <div class="col-md-12 row-block">

                            <a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    function onSignIn(googleUser) {

    var profile = googleUser.getBasicProfile();

      if(profile){

          $.ajax({

                type: 'POST',

                url: 'login.php',

                data: {id:profile.getId(), name:profile.getName(), email:profile.getEmail(), image:profile.getImageUrl()}

            }).done(function(data){

                console.log(data);

                window.location.href = 'home.php';

            }).fail(function() {

                alert( "Posting failed." );

            });

      }

    }

</script>

</body>

</html>

login.php

<?php

    session_start();

    $_SESSION["id"] = $_POST["id"];

    $_SESSION["name"] = $_POST["name"];

    $_SESSION["email"] = $_POST["email"];
    $_SESSION["image"] = $_POST["image"];

    echo "Updated Successful";

?>

home.php

<?php
session_start();
?>
<!DOCTYPE html>

<html>

<head>

    <title>Welcome to ItSolutionStuff.com</title>
    <style type="text/css">
        body{
            text-align: center;
        }
    </style>
</head>

<body>

<h1>Website Home Page</h1>
<img src="<?php echo $_SESSION['image']; ?>">
<p><strong>Id: </strong> <?php echo $_SESSION['id']; ?> </p>

<p><strong>Name: </strong><?php echo $_SESSION['name']; ?></p>

<p><strong>Email: </strong><?php echo $_SESSION['email']; ?></p>
<a href="https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://codingrakitan.000webhostapp.com/" >Sign out</a>

</body>

</html>

Tahap upload

Setelah semua selesai di buat sekarang saatnya mangapload file kedalam hosting gratis kita yang sudah di buat tadi seperti berikut :

1. Buka halaman https://id.000webhost.com/members/website/list dan klik website manager lalu file manager.

2. Pilih uggah file sekarang maka anda akan di arahkan masuk kedalam file manager.

3. Silahkan klik ikon upload files kemudian select files. Ketika jendela baru terbuka silahkan cari 3 file yang telah dibuat tadi kemudian tekan ok dan selanjutnya tekan upload. Tunggu hingga proses upload selesai.

4. Buka halaman web anda dan lihat hasilnya ketika sign google di klik akan seperti berikut. Serta ketika sukses melakukan login.

Sekarang aplikasi yang anda buat telah berhasil, tinggal anda terapkan pada hosting/domain berbayar anda. Jika ada pertanyaan silahkan kirimkan melalui kolom komentar di bawah. Terima Kasih.

Saturday, March 16, 2019