Login with javascript and session php
Perlu Diperhatikan
Level Pengguna = Medium - ProMenguasai bahasa pemprograman :
a. PHP ( medium )
b. HTML ( medium )
c. CSS ( medium )
d. Javascript ( dasar )
Langkah-langkah
1. Buat Google API Console Project
a. Langkah pertama , Buat project baru pada API google . Untuk link nya untuk membuat API https://console.cloud.google.com/
c. Ketiga , Pilih project nya
c. Keempat , Buka ringkasan API
c. Kelima , Klik pada bagian sidebar Kredensial
c. Keenam , Buat Kunci API
c. Ketujuh , Copy dan simpan kunci API
c. Kedelapan , Membuat ID klien OAuth dengan Konfigurasi pada layar persetujuan
d. Terakhir , Isi kan sesuai dengan domain atau localhost teman-teman
2. Google Login with JavaScript API
a. Untuk load button javascript
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
b. Kemudian tambahkan meta
<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
*Keterangan :
Kode berikut menangani proses login dengan Google JavaScript API.
1. renderButton () - Buat tombol Masuk Google dengan pengaturan khusus. Tentukan ID elemen (gSignIn) tempat tombol masuk akan ditampilkan.
2. onSuccess () - Fungsi callback dipanggil oleh signin2.render () ketika pengguna berhasil masuk.
Muat perpustakaan auth2 dan ambil data profil dari Google.
Tampilkan info akun pengguna di halaman web.
3. onFailure () - Fungsi callback dipanggil oleh signin2.render () ketika pengguna gagal masuk.
4. signOut () - Keluar pengguna dari akun Google.
Metode gapi.auth2.signOut () digunakan untuk menangani setelah proses sing out.
5. Metode auth2.disconnect () digunakan untuk keluar dari akun Google mereka bersama dengan Aplikasi OAuth.
<script>
// Render Google Sign-in button
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
// Sign-in success callback
function onSuccess(googleUser) {
// Get the Google profile data (basic)
//var profile = googleUser.getBasicProfile();
// Retrieve the Google account data
gapi.client.load('oauth2', 'v2', function () {
var request = gapi.client.oauth2.userinfo.get({
'userId': 'me'
});
request.execute(function (resp) {
// Display the user details
var profileHTML = '<h3>Welcome '+resp.given_name+'! <a href="javascript:void(0);" onclick="signOut();">Sign out</a></h3>';
profileHTML += '<img src="'+resp.picture+'"/><p><b>Google ID: </b>'+resp.id+'</p><p><b>Name: </b>'+resp.name+'</p><p><b>Email: </b>'+resp.email+'</p><p><b>Gender: </b>'+resp.gender+'</p><p><b>Locale: </b>'+resp.locale+'</p><p><b>Google Profile:</b> <a target="_blank" href="'+resp.link+'">click to view profile</a></p>';
document.getElementsByClassName("userContent")[0].innerHTML = profileHTML;
document.getElementById("gSignIn").style.display = "none";
document.getElementsByClassName("userContent")[0].style.display = "block";
});
});
}
// Sign-in failure callback
function onFailure(error) {
alert(error);
}
// Sign out the user
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
document.getElementsByClassName("userContent")[0].innerHTML = '';
document.getElementsByClassName("userContent")[0].style.display = "none";
document.getElementById("gSignIn").style.display = "block";
});
auth2.disconnect();
}
</script>
HTML Code:
Kode HTML berikut menampilkan tombol Masuk Google dan informasi akun pengguna di halaman web.
Tambahkan elemen (gSignIn) untuk merender tombol masuk.
Tambahkan elemen div (userContent) untuk merender info profil Google.
<!-- Display Google sign-in button -->
<div id="gSignIn"></div>
<!-- Show the user profile details -->
<div class="userContent" style="display: none;"></div>
Simpan Data Akun Google di Database (jQuery, Ajax, PHP, dan MySQL)Setelah pengguna masuk dengan akun Google, Anda dapat menyimpan informasi profil pengguna dalam basis data. Panduan langkah demi langkah berikut akan menunjukkan kepada Anda bagaimana cara menyimpan data pengguna di database MySQL menggunakan jQuery, Ajax, dan PHP.
Buat Tabel Database
Untuk menyimpan informasi akun pengguna dari Google, Anda perlu membuat tabel di basis data. SQL berikut ini membuat tabel pengguna dengan beberapa bidang dasar di database MySQL.
CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `oauth_provider` varchar(10) COLLATE utf8_unicode_ci NOT NULL, `oauth_uid` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `first_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `last_name` varchar(25) COLLATE utf8_unicode_ci NOT NULL, `email` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `gender` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL, `locale` varchar(10) COLLATE utf8_unicode_ci DEFAULT NULL, `picture` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL, `link` varchar(255) COLLATE utf8_unicode_ci NOT NULL, `created` datetime NOT NULL, `modified` datetime NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;JavaScript Kami akan menggunakan jQuery dan Ajax untuk mengirim informasi profil pengguna ke skrip sisi server dan memasukkan data akun dalam database MySQL. Memuat perpustakaan jQuery di awal kode JavaScript yang ditulis pada langkah sebelumnya.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Panggil fungsi saveUserData () di request.execute () dari panggilan balik onSuccess () dan sampaikan respons Google OAuth. Setelah pembaruan ini, seluruh kode onSuccess () terlihat seperti di bawah ini.
// Sign-in success callback
function onSuccess(googleUser) {
// Get the Google profile data (basic)
//var profile = googleUser.getBasicProfile();
// Retrieve the Google account data
gapi.client.load('oauth2', 'v2', function () {
var request = gapi.client.oauth2.userinfo.get({
'userId': 'me'
});
request.execute(function (resp) {
// Display the user details
var profileHTML = '<h3>Welcome '+resp.given_name+'! <a href="javascript:void(0);" onclick="signOut();">Sign out</a></h3>';
profileHTML += '<img src="'+resp.picture+'"/><p><b>Google ID: </b>'+resp.id+'</p><p><b>Name: </b>'+resp.name+'</p><p><b>Email: </b>'+resp.email+'</p><p><b>Gender: </b>'+resp.gender+'</p><p><b>Locale: </b>'+resp.locale+'</p><p><b>Google Profile:</b> <a target="_blank" href="'+resp.link+'">click to view profile</a></p>';
document.getElementsByClassName("userContent")[0].innerHTML = profileHTML;
document.getElementById("gSignIn").style.display = "none";
document.getElementsByClassName("userContent")[0].style.display = "block";
// Save user data
saveUserData(resp);
});
});
}
Konfigurasi Basis Data (dbConfig.php)
File dbConfig.php digunakan untuk menghubungkan dan memilih basis data. Tentukan host database ($ dbHost), nama pengguna ($ dbUsername), kata sandi ($ dbPassword), dan nama ($ dbName) sesuai kredensial server MySQL Anda.
<?php // Database configuration $dbHost = "localhost"; $dbUsername = "root"; $dbPassword = "root"; $dbName = "muslimqodr"; // Create database connection $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); // Check connection if ($db->connect_error) { die("Connection failed: " . $db->connect_error); }
File userData.php diambil oleh permintaan Ajax untuk menyimpan informasi akun pengguna (Google) dalam database MySQL.
Ambil dan decode data JSON yang diposting.
Periksa apakah data pengguna sudah ada dalam database berdasarkan pada penyedia dan ID OAuth.
Masukkan atau perbarui data pengguna menggunakan PHP dan MySQL.
<?php // Load the database configuration file require_once 'dbConfig.php'; // Get and decode the POST data $userData = json_decode($_POST['userData']); if(!empty($userData)){ // The user's profile info $oauth_provider = $_POST['oauth_provider']; $oauth_uid = !empty($userData->id)?$userData->id:''; $first_name = !empty($userData->given_name)?$userData->given_name:''; $last_name = !empty($userData->family_name)?$userData->family_name:''; $email = !empty($userData->email)?$userData->email:''; $gender = !empty($userData->gender)?$userData->gender:''; $locale = !empty($userData->locale)?$userData->locale:''; $picture = !empty($userData->picture)?$userData->picture:''; $link = !empty($userData->link)?$userData->link:''; // Check whether the user data already exist in the database $query = "SELECT * FROM users WHERE oauth_provider = '".$oauth_provider."' AND oauth_uid = '".$oauth_uid."'"; $result = $db->query($query); if($result->num_rows > 0){ // Update user data if already exists $query = "UPDATE users SET first_name = '".$first_name."', last_name = '".$last_name."', email = '".$email."', gender = '".$gender."', locale = '".$locale."', picture = '".$picture."', link = '".$link."', modified = NOW() WHERE oauth_provider = '".$oauth_provider."' AND oauth_uid = '".$oauth_uid."'"; $update = $db->query($query); }else{ // Insert user data $query = "INSERT INTO users VALUES (NULL, '".$oauth_provider."', '".$oauth_uid."', '".$first_name."', '".$last_name."', '".$email."', '".$gender."', '".$locale."', '".$picture."', '".$link."', NOW(), NOW())"; $insert = $db->query($query); } return true; } ?>Kesimpulan
Google Sing-in dengan JavaScript adalah cara instan untuk menambahkan fungsi login pengguna di situs web. Dalam kode contoh, kami telah membuatnya mudah untuk mengintegrasikan Google Login tanpa penyegaran halaman menggunakan JavaScript. Skrip ini akan membantu membuat sistem masuk sosial Anda menjadi ramah pengguna karena pengguna dapat masuk dengan akun Google mereka di jendela dialog tanpa meninggalkan halaman web.
#qodralandalus ,
Website : qodr.or.id
