Search code examples
cordovaionic-frameworktwitter-fabrictwitter-digits

Integrate twitter digits with a cordova/phonegap app?


Digit released its Web SDK not too long ago, however I'm having some issues integrating it with my phonegap/cordova app.

I have tried using the inappbrowser plugin but since digits uses the postMessage api to transfer data between windows and it seems like apache will never support this with cordova/phonegap (or at least they are taking forever - https://issues.apache.org/jira/browse/CB-4897) this doesnt seem to work so well.

I know the digits team is probably working on solution to integrate with a phonegap/cordova app but currently there are none and theres no indication when one will come out.

Is there a solution out there to integrate phonegap/cordova with twitter digits?


Solution

  • I have worked hard and researched many different things, most of which have lead me to a deadend.

    TJ VanToll has posted a great work around to the postMessage API with the inappbrowser plugin, however this doesnt seem to work so well with my android (I haven't tried iphone). TJ's solution has inspired my solution to oAuth with digits-cordova.

    You can find my solution at https://github.com/yangli1990/digits-cordova.git

    Or simply use bower to install it

    keep in mind this solution will be obsolete if the fabrics team come up with a more native way to integrate digits with cordova/phonegap apps.

    bower install digits-cordova
    cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git
    
    /* Optional cordova plugins */
    cordova plugin add com.simonmacdonald.telephonenumber
    cordova plugin add com.rjfun.cordova.sms
    

    this library works well because you can also optionally allow your app to autofill phone number and location and also intercept SMS to auto proceed.

    In your html make sure you have the appropriate javascript links

    <!-- optional -->
    <script type="text/javascript" src="bower_components/telephonenumber.js"></script>
    <script type="text/javascript" src="bower_components/SMS.js"></script>
    
    <!-- required -->
    <script type="text/javascript" src="bower_components/inappbrowser.js"></script>
    <script type="text/javascript" src="bower_components/digitsCordova.js"></script>
    

    In your app.js

    function openDigits(){
      var digits = new DigitsCordova('gmoaaZhEG88hMQUdpWHnF1IAz'); //Replace with your own consumerKey
        digits.open()
            .successCallback(function(loginResponse){
                var oAuthHeaders = loginResponse.oauth_echo_headers;
                var verifyData = {
                    authHeader: oAuthHeaders['X-Verify-Credentials-Authorization'],
                    apiUrl: oAuthHeaders['X-Auth-Service-Provider']
                };
    
                $.post('/verify', verifyData)
                    .done(function(){ window.reload(); });
            }).failCallback(function(error){
                //error
            }).errorCallback(function(error){
                //error
            })
    }
    
    openDigits();
    

    You can read about the api at the github page, there are some options you can choose to either turn on or off autofill and smsIntercept.