Xây dựng nút đăng nhập Google và Facebook tùy chỉnh

Ở bài trước mình có giới thiệu cách chèn nút đăng nhập Google vào Blogger, trong bài này mình tiếp tục hướng dẫn chèn nút đăng nhập Google và Facebook nhưng có tùy chỉnh không theo mẫu có sẵn. Phần này cả Google và Facebook và rất nhiều trang web đều có hướng dẫn do đó các bạn có thể dựa vào những trang đó tự build nút đăng nhập tùy chỉnh hoặc tham khảo thêm bài này của mình.

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>

Nội dung chính

Chuyên mục

Xây dựng nút đăng nhập Google và Facebook tùy chỉnh

Tác giả

Bài đăng phổ biến

Những phương pháp hay nhất giúp tối ưu Windows 10

Hướng dẫn thiết kế Bố cục các tiện ích (widget) trong Blogspot

Các bài đăng gần đây

Chuyên mục

Xây dựng nút đăng nhập Google và Facebook tùy chỉnh

Bài cùng chuyên mục

Tác giả

Bài đăng phổ biến

Những phương pháp hay nhất giúp tối ưu Windows 10

Hướng dẫn thiết kế Bố cục các tiện ích (widget) trong Blogspot

Các bài đăng gần đây