草庐IT

javascript - 如何使用 javascript 在 Phonegap 的推特上发布图片

coder 2024-05-10 原文

我目前正在使用 Phonegap 实现一个网络智能手机应用程序。在此应用程序上，用户可以在 Facebook 上发布他们用手机摄像头拍摄的图像。通过发送 base 64 编码图像，仅使用 javascript 已成功实现此功能。现在，我想使用 Twitter 实现相同的功能。

我发现了一些关于此的非常有趣的博客文章，并且我已经能够仅使用 javascript 更新用户状态...但是我也不能使用 update_with_media Twitter 网络服务发布图像。

也照这个post ，有人说不使用服务器端代码(例如 php 脚本)就不可能实现此操作。

所以我的问题是:是否可以仅通过 javascript 使用 update_with_media Twitter Web 服务？

我将我的代码发送给您，以便您大致了解当前的解决方案。我已将这篇文章作为工作基础:http://oodlestechnologies.com/blogs/Twitter-integration-on-PhoneGap-using-ChildBrowser-and-OAuth-for-iOS-and-Android-Platforms

这是我的 HTML 代码。 

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../cordova-2.5.0.js"></script>
        <script type="text/javascript" src="../js/childBrowser/childbrowser.js"></script>
        <script type="text/javascript" src="../js/helpers/jsOAuth-1.3.6.js"></script>
        <script type="text/javascript" src="../js/helpers/twitter.js"></script>
    </head>
    <body>
        <h4>Oodles Twitter App</h4>
        <table border="1">
            <tr>
                <th>Login using Twitter</th>
                <th>
                    <button id="loginBtn" onclick="Twitter.init();">Login</button>
                    <button id="logoutBtn" onclick="logOut();">Logout</button>
                </th>
            </tr>
            <tr id="tweetText">
                <td colspan="2"><textarea id="tweet"></textarea></td>
            </tr>
            <tr id="tweetBtn">
                <td colspan="2" align="right">
                    <button id="tweeter" onclick="Twitter.tweet();">Tweet</button>
                </td>
            </tr>
            <tr><td colspan="2"><div id="welcome">Please Login to use this app</div></td></tr>
        </table>
        <br/>
        <br/>
        <button onclick="javascript:location.reload();">Recharger la page</button>
    </body>
</html>

这是我的 twitter.js 代码:(重点在 post 方法中)

$(document).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady() {
    var root = this;
    cb = window.plugins.childBrowser;
    if (!localStorage.getItem(twitterKey)) {
        $("#loginBtn").show();
        $("#logoutBtn").hide();
        $("tweetBtn").hide();
        $("tweetText").hide();
    }
    else {
        $("#loginBtn").hide();
        $("#logoutBtn").show();
        $("tweetBtn").show();
        $("tweetText").show();
    }

    if (cb != null) {
        cb.onLocationChange = function(loc) {
            root.locChanged(loc);
        };
        cb.onClose = function() {
            root.onCloseBrowser()
        };
        cb.onOpenExternal = function() {
            root.onOpenExternal();
        };
    }
}

function onCloseBrowser() {
    console.log("onCloseBrowser!");
}

function locChanged(loc) {
    console.log("locChanged!");
}

function onOpenExternal() {
    console.log("onOpenExternal!");
}

// Consumer key : ...
// Consumer secret : ...

// GLOBAL VARS
var oauth; // It Holds the oAuth data request
var requestParams; // Specific param related to request
var options = {consumerKey: '...', consumerSecret: '...', callbackUrl: "http://www.google.fr"};
var twitterKey = "twtrKey"; // This key is used for storing Information related   
var Twitter = {
    init: function() {
        // Apps storedAccessData , Apps Data in Raw format
        var storedAccessData, rawData = localStorage.getItem(twitterKey);
        // here we are going to check whether the data about user is already with us.
        if (localStorage.getItem(twitterKey) !== null) {
            // when App already knows data
            storedAccessData = JSON.parse(rawData); //JSON parsing
            //options.accessTokenKey = storedAccessData.accessTokenKey; // data will be saved when user first time signin
            options.accessTokenSecret = storedAccessData.accessTokenSecret; // data will be saved when user first first signin

            // javascript OAuth take care of everything for app we need to provide just the options
            oauth = OAuth(options);
            oauth.get('https://api.twitter.com/1/account/verify_credentials.json?skip_status=true',
                    function(data) {
                        var entry = JSON.parse(data.text);
                        console.log("USERNAME: " + entry.screen_name);
                    }
            );
        }
        else {
            // we have no data for save user
            oauth = OAuth(options);
            oauth.get('https://api.twitter.com/oauth/request_token',
                    function(data) {
                        requestParams = data.text;
                        cb.showWebPage('https://api.twitter.com/oauth/authorize?' + data.text); // This opens the Twitter authorization / sign in page
                        cb.onLocationChange = function(loc) {
                            Twitter.success(loc);
                        }; // Here will will track the change in URL of ChildBrowser
                    },
                    function(data) {
                        console.log("ERROR: " + JSON.stringify(data));
                    }
            );
        }
    },
    /*
     When ChildBrowser's URL changes we will track it here.
     We will also be acknowledged was the request is a successful or unsuccessful
     */
    success: function(loc) {

        // Here the URL of supplied callback will Load

        /*
         Here Plugin will check whether the callback Url matches with the given Url
         */
        if (loc.indexOf("http://www.google.fr") >= 0) {

            // Parse the returned URL
            var index, verifier = '';
            var params = loc.substr(loc.indexOf('?') + 1);

            params = params.split('&');
            for (var i = 0; i < params.length; i++) {
                var y = params[i].split('=');
                if (y[0] === 'oauth_verifier') {
                    verifier = y[1];
                }
            }

            // Here we are going to change token for request with token for access

            /*
             Once user has authorised us then we have to change the token for request with token of access
             here we will give data to localStorage.
             */
            oauth.get('https://api.twitter.com/oauth/access_token?oauth_verifier=' + verifier + '&' + requestParams,
                    function(data) {
                        var accessParams = {};
                        var qvars_tmp = data.text.split('&');
                        for (var i = 0; i < qvars_tmp.length; i++) {
                            var y = qvars_tmp[i].split('=');
                            accessParams[y[0]] = decodeURIComponent(y[1]);
                        }

                        $('#oauthStatus').html('<span style="color:green;">Success!</span>');
                        $('#stage-auth').hide();
                        $('#stage-data').show();
                        oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);

                        // Saving token of access in Local_Storage
                        var accessData = {};
                        accessData.accessTokenKey = accessParams.oauth_token;
                        accessData.accessTokenSecret = accessParams.oauth_token_secret;

                        // Configuring Apps LOCAL_STORAGE
                        console.log("TWITTER: Storing token key/secret in localStorage");
                        localStorage.setItem(twitterKey, JSON.stringify(accessData));

                        oauth.get('https://api.twitter.com/1/account/verify_credentials.json?skip_status=true',
                                function(data) {
                                    var entry = JSON.parse(data.text);
                                    console.log("TWITTER USER: " + entry.screen_name);
                                    $("#welcome").show();
                                    document.getElementById("welcome").innerHTML = "welcome " + entry.screen_name;
                                    successfulLogin();
                                    // Just for eg.
                                    app.init();
                                },
                                function(data) {
                                    console.log("ERROR: " + data);
                                }
                        );

                        // Now we have to close the child browser because everthing goes on track.

                        window.plugins.childBrowser.close();
                    },
                    function(data) {
                        console.log(data);


                    }
            );
        }
        else {
            // Just Empty
        }
    },
    tweet: function() {
        var storedAccessData, rawData = localStorage.getItem(twitterKey);

        storedAccessData = JSON.parse(rawData); // Paring Json 
        options.accessTokenKey = storedAccessData.accessTokenKey; // it will be saved on first signin
        options.accessTokenSecret = storedAccessData.accessTokenSecret; // it will be save on first login

        // javascript OAuth will care of else for app we need to send only the options
        oauth = OAuth(options);
        oauth.get('https://api.twitter.com/1/account/verify_credentials.json?skip_status=true',
                function(data) {
                    var entry = JSON.parse(data.text);
                    Twitter.post();
                }
        );
    },
    /*
     We now have the data to tweet
     */
    post: function() {
        alert('Post !');
        var theTweet = $("#tweet").val(); // You can change it with what else you likes.

        oauth.post('https://upload.twitter.com/1/statuses/update_with_media.json',
                {
                    'status': theTweet,
                    'media': //HERE IS THE PROBLEM, WHAT TO DO HERE ?
                }, "multipart/form-data",
                function(data)
                {
                    alert('Data 1 !');
                    console.log('------Data1 : ' + data);
                    var entry = JSON.parse(data.text);
                    console.log(entry);
                    done();
                },
                function(data) {
                    //var json_result = JSON.parse(data);
                    //alert(json_result.text.error);
                    var entry = JSON.stringify(data);
                    console.log('------Data2 : ' + entry);
                }
        );
    }

}

function done() {
    alert("OKKK !");
    $("#tweet").val('');
}


function successfulLogin() {
    $("#loginBtn").hide();
    $("#logoutBtn,#tweet,#tweeter,#tweetBtn,#tweetText").show();

}

function logOut() {
    //localStorage.clear();
    window.localStorage.removeItem(twitterKey);
    document.getElementById("welcome").innerHTML = "Please Login to use this app";
    $("#loginBtn").show();
    $("#logoutBtn,#tweet,#tweeter,#tweetText,#tweetBtn").hide();

}

经过多次测试(发送 base64 图像，发送 blob，发送二进制文件，...)这是我从 Twitter 返回的消息:

{\"errors\":[{\"message\":\"Internal error\",\"code\":131}]}","xml":"","requestHeaders":{"Content-Type":"multipart/form-data"},"responseHeaders":{"date":"Fri, 19 Apr 2013 15:45:28 GMT","content-encoding":"deflate","strict-transport-security":"max-age=631138519","status":"500 Internal Server Error","server":"tfe","content-type":"application/json; charset=utf-8","version":"HTTP/1.1"}}

“解决方案”(通过发送 blob)已发布在 Twitter 开发论坛上但对我不起作用:dev.twitter.com/discussions/6969

有人想实现相同的功能或有解决方案吗？谢谢!

------ 已编辑:

我只想使用 Javascript，我不想实现任何服务器端解决方案(没有 PHP、C#、Java...)。

最佳答案

根据文档，Twitter 需要 multipart/form-data enctype，这意味着 base64 字符串将不起作用。

Unlike POST statuses/update, this method expects raw multipart data. Your POST request's Content-Type should be set to multipart/form-data with the media[] parameter ~ https://dev.twitter.com/docs/api/1/post/statuses/update_with_media

但是，您可以托管一个采用 base64 的端点，将其转换为真实文件，然后将请求转发到 Twitter。例如(未经测试):

<?php

$base64 = $_POST['image'];
$data = base64_decode( $base64 );

// Make name unique to avoid conflicts.
$temp_file = uniqid() . $_POST['name'];

// Save the file to a temp location.
file_put_contents( $temp_file, $data );

$temp_info = pathinfo( $temp_file );
$temp_type = $temp_info['extension'];
$temp_name = basename( $temp_file, '.' . $temp_type );

// OAuth library recommended by Twitter: https://github.com/themattharris/tmhOAuth
// See original: https://github.com/themattharris/tmhOAuth-examples/blob/master/images.php

require 'tmhOAuth.php';
require 'tmhUtilities.php';

$tmhOAuth = new tmhOAuth( array(
    'consumer_key'    => $_POST['consumer_key'],
    'consumer_secret' => $_POST['consumer_secret'],
    'user_token'      => $_POST['user_token'],
    'user_secret'     => $_POST['user_secret'],
));

// note the type and filename are set here as well
// Edit: Not sure if the `type` and `filename` params are necessary.
$params = array( 'media[]' => "@{$temp_file};type={$temp_type};filename={$temp_name}" );

$code = $tmhOAuth->request( 'POST', $tmhOAuth->url( '1/status/update_with_media' ),
    $params,
    true, // use auth
    true  // multipart
);

// Remove temp file.
unlink( $temp_file );

if ( $code == 200 ) {
    tmhUtilities::pr( json_decode( $tmhOAuth->response['response'] ) );
}
tmhUtilities::pr( htmlentities( $tmhOAuth->response['response'] ) );

?>

你可以这样调用它:

    $.ajax({
        // You'll want to use https to protect the oauth info.
        url: "https://mysite.com/proxy.php",
        type: "POST",
        data: {
            image: "base64 data...",
            name: "foo.png",
            consumer_key: options.consumerKey,
            consumer_secret: options.consumerSecret,
            user_token: options.accessTokenKey,
            user_secret: options.accessTokenSecret
        },
        success: function( data ) {
            console.log( data );
        }
    });

关于javascript - 如何使用 javascript 在 Phonegap 的推特上发布图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16141558/

javascriptPhonegap3439datacordovatwitter

有关javascript - 如何使用 javascript 在 Phonegap 的推特上发布图片的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐