I was looking for Social login integration (FB and Google) but after my so much research I did not find anything more suitable as per my requirements so I decided to make it more customization.
So, here it is simple and easy to use.
Step -1: https://console.developers.google.com/apis/
, click on this url to generate client ID and secret key (Don’t forget to enter
your url where you are going to publish this web site)
Step -2: https://developers.facebook.com/apps/
, click on this url to generate client
ID and secret key (Don’t forget to enter your URL where you are going to
publish this web site)
Step -3: Write down
below code in your .aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="https://apis.google.com/js/platform.js"></script>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/socialLogin.js"></script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<head runat="server">
<title>Social Login Page </title>
<meta name="google-signin-client_id" content="xxxxxxxxxx-xxxxx.apps.googleusercontent.com"/>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<a id="anchor" runat="server">
<div class="g-signin2" data-width="145" data-height="50" data-onsuccess="onSignIn">
</div>
</a>
</div>
<input type="hidden" id="txtEmail" runat="server" />
<input type="hidden" id="txtPassword" runat="server" />
</form>
</body>
<script>
var id = "";
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
id = profile.getId();
$('#txtName').val(profile.getName());
$('#txtEmail').val(profile.getEmail());
$('#txtPassword').val(id);
if ($('#txtEmail').val() != "") {
SocialLogin();
}
}
</script>
<script>
if (response.status === 'connected') {
testAPI();
}
}
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId: 'your key comes here',
status : true,
xfbml : true,
version : 'v2.7'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
function testAPI() {
FB.api('/me?fields=name,id,email', function (response) {
$('#txtName').val(response.name);
$('#txtEmail').val(response.email);
$('#txtPassword').val(response.id);
if ($('#txtEmail').val() != "") {
SocialLogin();
}
});
}
</script>
</html>
Step -4: you can download Jquery from online (jquery-1.10.2.js, jquery-1.10.2.min.js)
Step -5: Write below script in socialLogin.js
function SocialLogin() {
var name = $('#txtName').val();
var email = $('#txtEmail').val();
var password = $('#txtPassword').val();
PageMethods.SocialLogin(name, email, password, onSucess, onError);
function onSucess(result) {
alert(result);
}
function onError(result) {
alert('Something went wrong.');
}
}
Step -6: Now write below code in your .aspx.cs file
[WebMethod]
public static string SocialLogin(string name, string email, string password)
{
string result = "Welcome Mr.
" +
name + ".
Your email is '" + email + "'.";
//make
entry into Login table (if it is first time user)
return result;
}
Step -7: Run your website and check through FB and Google
login.
Please feel free to ask your doubts.
Comments