Phần quan trọng nhất khi khởi tạo nút đăng nhập tùy chỉnh với Google bạn phải tạo được đoạn mã google-signin-client_id còn với Facebook bạn phải tạo được ứng dụng có chứa tên miền trang web và lấy được appId.
Cách tạo và cơ chế hoạt động của nút đăng nhập Google và Facebook tùy chỉnh
Chúng ta sẽ chèn button đăng nhập Google bao gồm nút đăng xuất và tương tự Facebook cũng vậy, sau đó chúng ta sẽ viết script xử lý sự kiện khi tác động vào button gọi hộp thoại đăng nhập, và khi đã đăng nhập bằng tài khoản Google hoặc Facebook hiển thị thông tin của tài khoản bao gồm: ID, Tên, đại chỉ email và link ảnh đại diện.
Tiếp theo khi một tài khoản đã đăng nhập nếu truy cập lại trang script sẽ xử lý hiển thị thông tin của tài khoản, bên cạnh đó cũng hiển thị nút đăng xuất để tài khoản đăng xuất bất cứ lúc nào.
Demo
Đoạn mẫu tham khảo:
Copy
<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>
Subscribe Our Newsletter
0 Response to "Tạo nút đăng nhập bằng facebook, google cho blogger"
Đăng nhận xét