Hướng Dẫn Tạo Ứng Dụng Web Chuyển Đổi URL Không Cần Máy Chủ: Tự Động Chuyển Hướng và Quảng Cáo

Giới thiệu

Trong thời đại số, việc chia sẻ link trên các nền tảng mạng xã hội đã trở thành một phần không thể thiếu trong việc quảng bá website. Tuy nhiên, nếu bạn chia sẻ quá nhiều, website của bạn có thể bị đánh giá là SPAM và gặp rắc rối. Vậy làm thế nào để giải quyết vấn đề này?

Giải Pháp Chuyển Đổi URL

Một trong những giải pháp hiệu quả là sử dụng GitHub Pages. Với domain dạng <username>.github.io, đây là một loại domain đáng tin cậy có thể giúp bạn chuyển hướng tới website của mình mà không cần sử dụng máy chủ phức tạp. Đặc biệt, điều này cũng giúp bạn tránh bị đánh dấu là SPAM trên mạng xã hội.

Lợi Ích Của Việc Sử Dụng URL Chuyển Đổi

Bài viết này sẽ giới thiệu một cách thực hiện đơn giản để chuyển đổi URL nhằm mục đích chia sẻ trên mạng xã hội và các mục đích khác mà bạn có thể sử dụng.

Demo

Hãy trải nghiệm với trang web chuyển đổi URL thông qua video hướng dẫn dưới đây.

Cấu Trúc URL

Do GitHub Pages không hỗ trợ máy chủ, quá trình chuyển đổi URL sẽ diễn ra tại phía client. Chúng ta sẽ sử dụng một ví dụ sau:

Giả sử bạn có URL: https://www.youtube.com/watch?v=kjdX-r9byWg và muốn chuyển hướng từ GitHub Page. URL chuyển hướng từ GitHub Page sẽ có dạng: https://piandhust.github.io/purl?redirect=aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1ramRYLXI5YnlXZw==.

Khi người dùng truy cập vào URL này, hệ thống sẽ giải mã tham số redirect và chuyển hướng đến URL đích sau một thời gian nhất định. Để che dấu URL đích, chúng ta sử dụng các thuật toán mã hóa, và việc giải mã sẽ diễn ra trong mã JavaScript.

Xây Dựng Website Chuyển Đổi URL

Để xây dựng trang chuyển đổi URL, chúng ta sẽ sử dụng mã sau:

html Copy

<body>
    <script>
        function convert () {
            var url = document.getElementById("input_text");
            url = url.value;
            urlEncode = btoa(url);

            var targetUrl = "https://piandhust.github.io/purl?redirect=" + urlEncode;
            document.getElementById("output_text").value = targetUrl;
        }
       
        function copyURL() {
          var copyText = document.getElementById("output_text");
          copyText.select();
          copyText.setSelectionRange(0, 99999);
          document.execCommand("copy");
          alert("Đã sao chép: " + copyText.value);
        }
      </script>
      <div style="font-family: Courier New; margin: 0px auto; width: 80%;">
        <label>Nhập URL cần chuyển đổi </label><br />
        <input id="input_text" type="text" />
        <button class="button" onclick="convert()">Chuyển Đổi</button>
        <br /><br /><br />
        <label>URL sau khi chuyển đổi:</label><br />
        <input id="output_text" readonly="readonly" type="text" />
        <button class="button" onclick="copyURL()">Sao Chép</button>
      </div>   
</body>

Hàm Giải Mã URL

Hàm giải mã URL sẽ nhận được tham số redirect và sử dụng hàm atob để giải mã. Nếu không có tham số này, người dùng sẽ được chuyển hướng về trang convert.html để thực hiện việc quay lại.

javascript Copy

var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);
var redirectUrlEncode = urlParams.get('redirect');

if(redirectUrlEncode === undefined || redirectUrlEncode === '' || redirectUrlEncode === null){
  window.location.href = 'https://piandhust.github.io/purl/convert.html';
}

var redirectUrl = atob(redirectUrlEncode);

Kết Luận

Sau khi hoàn tất, bạn chỉ cần đẩy project lên GitHub và tạo GitHub Page cho website của mình. Đừng quên theo dõi thêm nhiều công cụ hữu ích tại đây.
source: viblo