Google is providing OAuth Service. You can implement Google Login on your website so that user doesn't need to remember another password for your website. You will also get worthy email addresses to connect with users.
Here i will show you, how to implement OAuth Service in your web Application.
OAuth 2.0 Flow
1) User will click on Auth login link
2.) Google Auth server will show permission screen to user
3.) Once user accepts to the scope, It will send code to App Server ( Redirect URI)
4.) Once we got code, get access token by using client secret id
5.) Access User's Information using that access token
Get OAuth 2.0 Credentials from Google developer console
1.) Go to Google Developer Console https://console.developers.google.com
2.) Create Project and Open that project
3.) Go to API & Auth > Credentials > Create New Client ID
Login With Google plus JavaScript example code
Below code save as index.jsp page and run this jsp on web server.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login with Google Account</title>
<meta name="google-signin-client_id" content="105652209176118-i5dqkldno6smhiq01gr2r221i0qnodis.apps.googleusercontent.com">
<script src="jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
<script src="jquery-1.8.0.js"></script>
<script>
function onSuccess(googleUser) {
var profile = googleUser.getBasicProfile();
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({
'userId': 'me'
});
//Display the user details
request.execute(function (resp) {
var profileHTML = '<div class="profile"><div class="head">Welcome '+resp.name.givenName+'! <a href="javascript:void(0);" onclick="signOut();">Sign out</a></div>';
profileHTML += '<img src="'+resp.image.url+'"/>';
profileHTML += '<div class="proDetails"><p>'+resp.displayName+'</p>';
profileHTML += '<p>'+resp.emails[0].value+'</p>';
profileHTML += '<p>'+resp.gender+'</p>';
profileHTML += '<p>'+resp.id+'</p>';
profileHTML += '<p><a href="'+resp.url+'">View Google+ Profile</a></p></div></div>';
//alert(profileHTML);
$('.userContent').html(profileHTML);
$('#gSignIn').slideUp('slow');
});
});
}
function onFailure(error) {
alert(error);
}
function renderButton() {
gapi.signin2.render('gSignIn', {
'scope': 'profile email',
'width': 200,
'height': 40,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSuccess,
'onfailure': onFailure
});
}
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
$('.userContent').html('');
$('#gSignIn').slideDown('slow');
});
}
</script>
</head>
<body>
<div id="gSignIn"></div>
<div class="userContent"></div>
<div class="divid"> </div>
</body>
</html>
No comments:
Post a Comment