API Instagram và nhập ảnh mà không cần xác thực phía máy chủ

Question

Tôi hơi bối rối về một chức năng nhất định mà tôi muốn triển khai vào trang web bằng cách sử dụng Instagram API. Tôi muốn truy cập nguồn cấp dữ liệu của riêng mình dựa trên ID người dùng của tôi từ API Instagram và hiển thị chúng trên trang web của tôi. Người ta nói rằng có một cách để thực hiện xác thực OAuth phía máy khách nhưng tôi hơi bối rối về cách tôi sẽ thực hiện việc này. Tôi khá ổn với JavaScript và nếu ai đó có thể chỉ cho tôi đúng hướng tôi chắc chắn tôi có thể tìm ra nó.

Bất kỳ phương pháp hay nhất nào đều tuyệt vời.

Cảm ơn bạn trước,

JN

Answer 1

Bạn đang hỏi làm thế nào để sử dụng Client-Side (Implicit) xác thực cho Instagram.

Dưới đây là một vài thư viện JS làm cho nó:

1. https://github.com/Instagram/instagram-javascript-sdk
2. https://github.com/potomak/jquery-instagram

Answer 2

này được bugging tôi cho các lứa tuổi, nhưng tôi nghĩ rằng tôi đã đưa ra một cách đơn giản để chỉ cần có được hình ảnh của riêng tôi trên trang web của tôi, sử dụng ý tưởng từ plugin "jquery-instagram", nhưng bỏ nó xuống.

1. Hãy đến với #tag và thêm nó vào tất cả ảnh bạn muốn hiển thị trên trang web của mình, đảm bảo nó không phải là thứ mà mọi người sẽ sử dụng. (Thực hiện theo cách này để ngăn chặn việc xác thực bất cứ điều gì).

2. Đăng ký ứng dụng của bạn ở đây: http://instagr.am/developer/register/ (Chỉ cần sử dụng đăng nhập Instagram của bạn)

3. Sử dụng đoạn mã sau (với jQuery), trong đó "tag" là thẻ bạn sử dụng, "id" là khách hàng ứng dụng bạn đã đăng ký id và "photoCount" là số lượng ảnh tối đa bạn muốn truy xuất.

   $.ajax({ 
       type: "GET", 
       dataType: "jsonp", 
       cache: false, 
       url: "https://api.instagram.com/v1/tags/" + tag + "/media/recent?client_id=" + id, 
       success: function(response) { 
       var length = response.data != 'undefined' ? response.data.length : 0; 
       var limit = photoCount != null && photoCount < length ? photoCount : length; 
       if(limit > 0) { 
        for(var i = 0; i < limit; i++) { 
        $('<img>', { 
         src: response.data[i].images.standard_resolution.url 
        }).appendTo($("#photos")); 
        } 
       } 
       } 
   });