Khi bạn chọn đăng nhập bằng nút đăng nhập Google trong trang web bạn có thể thấy trong hộp thoại đăng nhập có đề cập đến đoạn: "Để tiếp tục, Google sẽ chia sẻ tên, địa chỉ email và ảnh hồ sơ của bạn..." điều đó có nghĩa là với bất kỳ tài khoản Google nào đã đăng nhập vào trang web của bạn thì bạn sẽ thu thập được dữ liệu như trên mà Google chia sẻ.
Mình phân tích rõ thêm một chút về cách thức đăng nhập thông qua nút đăng nhập Google mà bạn chèn vào trang web:
Giả sử bạn đang có một tài khoản Google và sau đây có một số trường hợp xảy ra bạn cần nắm rõ:
Trường hợp bạn đã đăng nhập trên một trình duyệt web ví dụ như Chorme chẳng hạn. Khi bạn truy cập trang web nào đó đã chèn nút đăng nhập và tất nhiên bạn phải đăng nhập thông qua nút đó để Google chia sẻ dữ liệu đăng nhập cho trang web đó và quyền đăng nhập hay không là tùy ở bạn.
Trường hợp bạn chưa đăng nhập trên trình duyệt nhưng lại đăng nhập thông qua nút đăng nhập của trang web thì đồng nghĩa bạn cũng đã đăng nhập luôn trên trình duyệt.
Trong trường hợp nếu trang web đó có chèn thêm nút đăng xuất và khi bạn sử dụng nút đó để đăng xuất khỏi trang web tức là thoát tài khoản khỏi trang web đó thì trang web sẽ không lấy được dữ liệu từ tài khoản đã đăng xuất.
Cuối cùng nếu bạn chọn đăng xuất tài khoản khỏi trình duyệt thì đồng nghĩa bạn cũng vừa đăng xuất khỏi trang web mà bạn đã đăng nhập trước đó.
Tại sao bạn nên sử dụng nút đăng nhập cho trang web của mình? Có một vài nguyên nhân sau đây:
- Bạn muốn thu thập dữ liệu từ tài khoản đăng nhập để hiển thị.
- Trang web của bạn về hỏi đáp trong đó sử dụng tài khoản Google để trả lời
- Trang web bạn dạng thống kê, phân tích cần số phiếu bầu từ tài khoản Google
- Hay đơn giản bạn muốn chèn nút đăng nhập ngay bên dưới khung nhận xét để khách truy cập đăng nhập.
- .v.v..
Cách chèn nút đăng nhập Google vào Blogger
Thật ra trang web Google đã hướng dẫn rồi chỉ cần bạn hiểu chút là có thể chèn được nút đăng nhập vào Blog, nhưng điều quan trọng nhất bạn cần có được đoạn mã mà Google nhận dạng có tên google-signin-client_id và để lấy được đoạn mã này bạn cần phải tạo một project trong đó có tên và thêm tên miền trang web của bạn vào project đó.
Bạn truy cập địa chỉ: https://developers.google.com/identity/sign-in/web/sign-in và tạo cho mình một project nếu chưa có, bạn click vào dòng CONFIGURE A PROJECT để bắt đầu tạo một project mới.
Khi bạn tạo xong, bạn sẽ được cung cấp google-signin-client_id mới như hình minh họa bên dưới:
Khi có được google-signin-client_id, bạn chèn đoạn script sau trước thẻ đóng </body>
<script src="https://apis.google.com/js/api:client.js"></script>
<script>//<![CDATA[
gapi.load('auth2', function() {
gapi.auth2.init({
client_id: "google-signin-client_id", // Thay bằng client_id vừa tạo mới
scope: "profile email"
}).then(function(auth2) {
attachSignin(document.querySelector('.g-signin'))
if (auth2.isSignedIn.get() == true) {
var profile = auth2.currentUser.get().getBasicProfile()
console.log(profile.getName())
console.log(profile.getEmail())
document.querySelector('.g-signout').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng xuất</span></div></div>'
} else {
document.querySelector('.g-signin').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng nhập</span></div></div>'
}
function attachSignin(element) {
auth2.attachClickHandler(element, {},
function(googleUser) {
var profile = googleUser.getBasicProfile()
console.log(profile.getName())
console.log(profile.getEmail())
document.querySelector('.g-signin').innerHTML=''
document.querySelector('.g-signout').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng xuất</span></div></div>'
})
}
})
})
document.querySelector('.g-signout').addEventListener('click', function() {
var auth2 = gapi.auth2.getAuthInstance()
auth2.signOut().then(function() {
document.querySelector('.g-signin').innerHTML='<div class="abcRioButton abcRioButtonBlue" tabindex="0"><div class="abcRioButtonContentWrapper"><div class="abcRioButtonIcon"><div class="abcRioButtonIconImage"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg></div></div><span class="abcRioButtonContents">Đăng nhập</span></div></div>'
document.querySelector('.g-signout').innerHTML=''
})
})
//]]></script>
Tiếp theo chèn thẻ nút đăng nhập và đăng xuất vào vị trí muốn hiển thị
<div class="g-signin"></div>
<div class="g-signout"></div>
Style cho nút đăng nhập và đăng xuất
.g-signin, .g-signout {
display: inline-block;
}
.abcRioButton {
-webkit-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow 0 2px 4px 0px rgba(0,0,0,.25): ;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
transition: background-color .218s,border-color .218s,box-shadow .218s;
-webkit-user-select: none;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
color: #262626;
cursor: pointer;
outline: none;
overflow: hidden;
position: relative;
text-align: center;
vertical-align: middle;
white-space: nowrap;
height: 36px;
width: 120px;
}
.abcRioButtonBlue {
background-color: #4285f4;
border: none;
color: #fff;
}
.abcRioButtonContentWrapper {
height: 100%;
width: 100%;
}
.abcRioButtonBlue .abcRioButtonContentWrapper {
border: 1px solid transparent;
}
.abcRioButtonIcon {
float: left;
}
.abcRioButtonBlue .abcRioButtonIcon {
background-color: #fff;
-webkit-border-radius: 1px;
border-radius: 1px;
}
.abcRioButtonBlue .abcRioButtonIcon {
padding: 8px;
}
.abcRioButtonIconImage {
width: 18px;
height: 18px;
}
.abcRioButtonSvg {
display: block;
height: auto;
width: auto;
min-width: auto;
}
.abcRioButtonContents {
font-family: Roboto,arial,sans-serif;
font-size: 13px;
line-height: 34px;
font-weight: 500;
letter-spacing: .21px;
margin-left: 6px;
margin-right: 6px;
vertical-align: top;
}
Trên đây là hướng dẫn chèn nút đăng nhập Google vào blogspot, nếu bạn muốn chèn vào blog của mình thì áp dụng theo bài này và tham khảo thêm trên mạng.
