In the previous post, I have introduced how to insert the Google login button into Blogger , in this article I continue to guide inserting Google and Facebook login button but there is no customization according to the available form. This section both Google and Facebook and many websites have instructions so you can rely on those pages to build your own login button or refer to this article yourself. The most important part when creating a custom login button with Google you must create the code google-signin-client_id and with Facebook you have to create an application containing the website domain name and get appId.
How to create and operate mechanisms of customized Google and Facebook login buttons
We will insert the Google login button, including the logout button, and like Facebook, then we will write the event handler script when the button is called to call the login dialog, and when logged in with the account Google or Facebook displays account information including: ID, Name, email address and avatar image link.
Next when an account is logged in if you access the script page again, it will display the account's information, and also display the logout button to log out the account at any time.
Demo
Paragraph reference form:
<html>
<head>
<style type='text/css'>/* <![CDATA[ */
.button {
display: inline-block;
position: relative;
color: #3c4043;
background: rgba(0,0,0,0);
font-family: Roboto,Arial,sans-serif;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
height: 37px;
line-height: 37px;
padding: 0 10px;
border: 1px solid rgba(0,0,0,.15);
-webkit-border-radius: 4px;
border-radius: 4px;
outline: none;
}
.button:hover {
color: rgba(0,0,0,.68);
border-color: rgba(0,0,0,.54);
}
.button:active, .button:focus {
outline: 0;
color: #3c4043;
}
.button .button-icon {
display: inline-block;
margin-right: 8px;
}
.button .button-icon.google,.button .button-icon.google svg {
width: 18px;
height: 18px;
}
.button .button-icon.facebook {
width: 23px;
height: 23px;
}
.button .button-icon.facebook svg {
fill: #3b5998!important;
height: 23px;
width: 23px;
}
.button .button-icon svg {
height: auto;
width: auto;
min-width: auto;
vertical-align: middle;
}
.button.signout,.button.logout {
display: none;
}/* ]]> */</style>
</head>
<body>
<!-- Google sign in button -->
<button class="button signin" type="button"><span class="button-icon google"><svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/></svg></span><span class="button-label">Sign in with Google</span></button>
<!-- Google sign out button -->
<button class="button signout" type="button"><span class="button-icon google"><svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg"><path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z"
<!-- Facebook login button -->
<button class="button login" type="button"><span class="button-icon facebook"><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></span><span class="button-label">Login with Facebook</span></button>
<!-- Facebook logout button -->
<button class="button logout" type="button"><span class="button-icon facebook"><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></span><span class="button-label">Log out</span></button>
<!-- Display Google user profile data -->
<div id="userInfo"></div>
<!-- Display Facebook user profile data -->
<div id="userData"></div>
<!-- Goggle and Facebook script -->
<script src='https://apis.google.com/js/api:client.js'/>
<script>//<![CDATA[
gapi.load('auth2', function() {
gapi.auth2.init({
client_id: "YOUR_CLIENT_ID.apps.googleusercontent.com",
scope: "profile email"
}).then(function(auth2) {
attachSignin(document.querySelector('.signin'));
if (auth2.isSignedIn.get() == true) {
var profile = auth2.currentUser.get().getBasicProfile();
document.querySelector('#userInfo').innerHTML = '<div class="box_tin"><p>Google account info:</p><p><b>ID:</b> ' + profile.getId() + '</p><p><b>Name:</b> ' + profile.getName() + '</p><p><b>Email:</b> ' + profile.getEmail() + '</p><p><b>Image URL:</b> ' + profile.getImageUrl() + '</p></div>';
document.querySelector('.signin').style.display = 'none';
document.querySelector('.signout').style.display = 'inline-block';
}
function attachSignin(element) {
auth2.attachClickHandler(element, {},
function(googleUser) {
var profile = googleUser.getBasicProfile();
document.querySelector('#userInfo').innerHTML = '<div class="box_tin"><p>Google account info:</p><p><b>ID:</b> ' + profile.getId() + '</p><p><b>Name:</b> ' + profile.getName() + '</p><p><b>Email:</b> ' + profile.getEmail() + '</p><p><b>Image URL:</b> ' + profile.getImageUrl() + '</p></div>';
document.querySelector('.signin').style.display = 'none';
document.querySelector('.signout').style.display = 'inline-block';
});
}
});
});
document.querySelector('.signout').addEventListener('click', function () {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
document.querySelector('.signin').style.display = 'inline-block';
document.querySelector('.signout').style.display = 'none';
document.querySelector('#userInfo').innerHTML = '';
});
});
window.fbAsyncInit = function() {
FB.init({
appId: 'YOUR_APP_ID',
cookie: true,
xfbml: true,
version: 'v3.2'
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
document.querySelector('.login').style.display = 'none';
document.querySelector('.logout').style.display = 'inline-block';
getFbUserData();
}
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
document.querySelector('.login').addEventListener('click', function () {
FB.login(function(response) {
if (response.authResponse) {
getFbUserData();
}
}, {
scope: 'public_profile,email'
});
});
document.querySelector('.logout').addEventListener('click', function () {
FB.logout(function() {
document.querySelector('.login').style.display = 'inline-block';
document.querySelector('.logout').style.display = 'none';
document.querySelector('#userData').innerHTML = '';
});
});
function getFbUserData() {
FB.api('/me', {
fields: 'id,name,email,picture'
},
function(response) {
document.querySelector('.login').style.display = 'none';
document.querySelector('.logout').style.display = 'inline-block';
document.querySelector('#userData').innerHTML = '<div class="box_tin"><p>Facebook account info:</p><p><b>ID:</b> ' + response.id + '</p><p><b>Name:</b> ' + response.name + '</p><p><b>Email:</b> ' + response.email + '</p><p><b>Image URL:</b> ' + response.picture.data.url + '</p></div>';
});
}
//]]></script>
</body>
</html>
Post a Comment
Post a Comment