Hemant Vishwakarma: July 2016

Saturday 30 July 2016

Oauth Login for Linkedin, Facebook, Google and Microsoft

Database
Users table database design.

CREATE TABLE IF NOT EXISTS `users`

(

id INT(11) NOT NULL AUTO_INCREMENT,

email VARCHAR(200) ,

name VARCHAR(200) ,

first_name VARCHAR(200) ,

last_name VARCHAR(200) ,

gender VARCHAR(10) ,

birthday VARCHAR(20) ,

location VARCHAR(200) ,

hometown VARCHAR(200) ,

bio TEXT,

relationship VARCHAR(30) ,

timezone VARCHAR(10) ,

provider VARCHAR(10) ,

provider_id INT(30) ,

picture TEXT,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

The script contains three folders called facebook_lib, google_lib, microsoft_lib,linkedin_lib and images with PHP files.

facebook_lib //Facebook OAUTH library
-- config.php //Facebook app configuration file.
google_lib //Google OAUTH library
-- config.php //Google app configuration file.
microsoft_lib //Microsoft OAUTH library
-- config.php //Microsoft app configuration file.
linkedin_lib //Linkedin OAUTH library
-- config.php //Linkedin app configuration file.
images
db.php //Database connection
OauthLogin.php //Class
facebook_login.php //Facebook Login
google_login.php //Google Login
microsoft_login.php //Microsoft Login
linkedin_login.php //Linkedin Login
index.php
home.php
header.php
redirect.php
logout.php

How to Use
Just call anchor tag with particular service login file.

<a href='facebook_login.php'>Facebook Login</a>

<a href='google_login.php'>Google Login</a>

<a href='microsoft_login.php'>Microsoft Login</a>

<a href='linkedin_login.php'>Linkedin</a>

How it Works
Facebook & Google Authentication Flowchart

Installation
In this script just you have to modify three file.

db.php
Database configuration file, modify MySQL server details.

<?php

$mysql_hostname = "localhost";

$mysql_user = "username";

$mysql_password = "password";

$mysql_database = "databasename";

$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");

mysql_select_db($mysql_database, $bd) or die("Could not select database");

$base_url='http://www.yourwebsite.com/';

?>

Application setup details click here.

Facebook Configuration facebook_lib/config.php
You have to create a application. Facebook will provide you app id and app secret id, just replace in the following code.
fbconfig.php

<?php

$facebook_appid='App ID';

$facebook_app_secret='App Secret';

$facebook_scope='email,user_birthday';

$facebook = new Facebook(array(

'appId' => $facebook_appid,

'secret' => $facebook_app_secret,

));

?>

Google Configuration google_lib/config.php
You can find this in google_lib folder, here you have to configure application OAuth keys, Consumer keys and redirection callback URL.

// OAuth2 Settings, you can get these keys at https://code.google.com/apis/console Step 6 keys 

'oauth2_client_id' => 'Client ID',

'oauth2_client_secret' => 'Client Secret',

'oauth2_redirect_uri' => 'http://www.yoursite.com/google_login.php',

// OAuth1 Settings Step 3  keys.

'oauth_consumer_key' => 'OAuth Consumer Key',

'oauth_consumer_secret' => 'OAuth Consumer Secret',

Microsoft Configuration microsoft_lib/config.php
Click here to launch Microsoft live development dashboard and create an application. Microsoft will provide you Client_Id and Client_Secret.
fbconfig.php

<?php

//Microsoft Application Settings

$microsoft_client_id='Client ID';

$microsoft_client_secret='Client Secret';

$microsoft_scope='wl.basic wl.emails wl.birthday';

$microsoft_redirect_url=$base_url.'microsoft_login.php';

));

?>

Linkedin Configuration linkedin_lib/config.php
Click here to launch Linkedin developer network and application will provide your App_Key and App_Secret.
fbconfig.php

<?php

//Linkedin Application Settings

$linkedin_appKey='App Key';

$linkedin_appSecret='App Secret';

$linkedin_callbackUrl=$base_url.'linkedin_login.php';

));

?>

Oauth Login for Linkedin, Facebook, Google and Microsoft

Friday 29 July 2016

Bootstrap datepicker example

<!DOCTYPE html>
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

</head>
<body>
<div class="container">
<div class="hero-unit">
<input type="text" placeholder="click to show datepicker" id="example1">
</div>
</div>


<script type="text/javascript">
// When the document is ready
$(document).ready(function () {

$('#example1').datepicker({
format: "dd/mm/yyyy"
});

});
</script>
</body>
</html>

Bootstrap datepicker example

Remove all html tags from php string

Wednesday 27 July 2016

jQuery Add More or Less Link to Text | Show More Link to Shorten Text to Display Rest of Text

<html>

<head>

<title>jQuery Add More/Less link to Text</title>

$(function() {

var showChar = 120, showtxt = "more", hidetxt = "less";

$('.more').each(function() {

var content = $(this).text();

if (content.length > showChar) {

var con = content.substr(0, showChar);

var hcon = content.substr(showChar, content.length - showChar);

var txt= con + '<span class="dots">...</span><span class="morecontent"><span>' + hcon +'</span>  <a href="" class="moretxt">' + showtxt + '</a></span>';

$(this).html(txt);

}

});

$(".moretxt").click(function() {

if ($(this).hasClass("sample")) {

$(this).removeClass("sample");

$(this).text(showtxt);

} else {

$(this).addClass("sample");

$(this).text(hidetxt);

}

$(this).parent().prev().toggle();

$(this).prev().toggle();

return false;

});

</script>

body{

font-family: Calibri, Arial;

margin: 0px;

padding: 0px;

}

.more {

width: 400px;

background-color: #f0f0f0;

margin: 10px;

}

.morecontent span {

display: none;

}

</style>

</head>

<body>

Welcome to Aspdotnet-suresh. It's Technical blog related to Microsoft Technologies.

It's Technical blog related to Microsoft Technologies. It's Technical blog related

to Microsoft Technologies

</div>

Aspdotnet-Suresh.com offers many Microsoft related articles. Welcome to Aspdotnet-suresh.

It's Technical blog related to Microsoft Technologies.

It's Technical blog related to Microsoft Technologies. It's Technical blog related

to Microsoft Technologies

</div>

It's Technical blog related to Microsoft Technologies.

It's Technical blog related to Microsoft Technologies. It's Technical blog related

to Microsoft Technologies

</div>

</body>

</html>

jQuery Add More or Less Link to Text | Show More Link to Shorten Text to Display Rest of Text