How to connect an app with Facebook and Twitter?

[Erkan]

How can I connect my app with Facebook and Twitter in such a way, that when Facebook button is clicked, if the user is not already logged in to Facebook from his/her phone/tablet, a log-in for Facebook must appear. If he/she is already logged-in, a custom text must appear, and he/she should only click post to share it in his/her profile/timeline. Same thing for Twitter, if already logged in a custom text should appear for tweeting, if not logged-in, first a log-in screen must appear and after logging-in, that custom text must appear for tweeting. So, it pretty much should work like those news (or other) websites where you have the icons of those social networking websites, and by clicking them you are able to immediately share the link and title of the next/post.

[Zdravko]

Hello Erkan,

I suppose it would be best to store the access token to the local storage or somewhere else on successful login and then check for its existence for any further login attempt or need of command authorization.
For more information please refer to our Facebook demo app which implements similar functionality.
Thanks.

Regards,
Zdravko
Telerik

 

 

[Erkan]

I already connected the app to Facebook using your sample app. The I have no idea how can I do it with Twitter, or what should I change. I only need to log the user in, if he/she is not already logged-in, and then tweet a constant text from his/her account.

[Zdravko]

Hello Erkan,

I think this plugin provides the functionalities you are looking for. You can import it following the instructions from here using the zip file from the plugin's repository.
I hope it helps.

Regards,
Zdravko
Telerik

 

 

[Zdravko]

Hi,

I just found another one which seems quite maintained. You can give it a try as well.

Regards,
Zdravko
Telerik

 

 

[Erkan]

Hello,

I just saw your posts. I already knew those plugins, and thought of using them with the app, but as long as I know those plugins require that you are already signed-in to your social network profiles in order for them to be visible for sharing. What I mean is, if you are already signed-in to your Twitter account, but you are not signed-in to your Facebook account and you press share using SocialSharing plugin, when the dialog will pop-up it will only show the Twitter logo for sharing, while you are currently signed-in only from Twitter. I want my solution to work even if you are not signed-in. Where it will open the sign-in page of the corresponding social network website, and after signing-in it will post the message. Something similar that you have done with Facebook in your sample-facebook-api sample app. If I am mistaken, please correct me. I would gladly use them if they even work if you are not signed-in, and ask you to sign-in and then post.

Best regards,
Erkan

[Tina Stancheva]

Hi Erkan,

Twitter adheres to the OAuth1.0a protocol (Facebook, Google and Live implement the OAuth 2.0 protocol). This basically requires the client app to sign a request and send it to Twitter, in order to obtain an access token and the token secret for the user. Only then the app can navigate the users to the Twitter login page successfully and allow them to log in to post tweets. This is why it is not an easy task to modify the sample facebook app we have to allow posting tweets in the same manner that it posts to the facebook wall. On top of that, you also need to consider the fact that Twitter does not encourage sending token requests through client-side JavaScript.

This is why I feel that the best approach in your case might be to reconsider using the SocialSharing-PhoneGap-Plugin. However, instead of using the general message sending methods, you can define your app to provide your users with two separate buttons - one to post in facebook and one in twitter. For that purpose you can use the SocialSharing plug-in methods for posting directly into the apps: shareViaTwitter() and shareViaFacebook(). Both methods will open the device built-in dialogs for sharing through facebook or twitter accordingly and in case the user is not logged, he/she will be prompted to do so. Please give this approach a try and let us know if it helps.

Regards,
Tina Stancheva
Telerik

 

 

[Erkan]

Hi Tina,

Now your answer was pretty clear and informative. Thank you very much. I just didn't know that Twitter sill uses OAuth 1.0, and I didn't know that SocialSharing plug-in can open the device built-in dialogs for logging-in to the social networking websites. I will give this a try, and get back to you. Thanks once more.

Regards,
Erkan

[Ariel]

Hello Tina,

Can you please help me how to login through twitter into my app??


Regards,
Nitish 

[Tina Stancheva]

Hi Nitish,

We don't have any samples demonstrating Twitter authentication. This is mostly due to the fact that there are security concerns when using a client-side JavaScript implementation to sign a request and send it to Twitter. Given that Twitter adheres to the OAuth1.0a protocol your app has to send a signed request to obtain the access token and the token secret for every user. However, Twitter do not encourage sending such a request through client-side JavaScript. There are multiple community threads on that topic. Still, there are a few options you can try - for instance you can have a look at the suggested approach here or use the oAuth library to sign the request. This blog post also suggests one possible approach for a Twitter login although it utilizes thе deprecated ChildBrowser, which you have to replace with an InAppBrowser.

In any case, all these solutions are not really recommended as Twitter provide APIs for log in through mobile apps only for Android and iOS. This means that it is better if you can use native code to login  which in the context of Cordova means you need a plugin. Unfortunately I am not aware of a plugin targeting iOS and Android that can specifically log you in through Twitter but you can check all Cordova twitter-related plugins here. Additionally, you can have a look at the oAuth.io plugin for Cordova to see if their offering can work for you.

Also, if you can further elaborate on the scenario you need to implement we can try to find other options for you. It would help us to know the use case for such a log in option as well as your requirements for it. For instance, should it use an already existing account signed in through the native Twitter app. Please let me know and we will gladly advise you further.

Regards,
Tina Stancheva
Telerik

 

 

[Ariel]

Hey Tina,

        I read your comment but I didn't get the solution. I am using telerik icenium to build hybrid app but I can't be able to implement login with twitter. So please help.

Thanks & Regards,
Nitish 
       

[Tina Stancheva]

Hello Nitish,

Can you please elaborate on your requirements. I understand you need to implement an authentication through Twitter but would you like to do that through JavaScript or would you prefer a native implementation. Also, do you have any recommendations for the twitter authentication - for instance if you want your users to be authenticated through the account used in their Twitter native application, then you would definitely need a native solution.

Regards,
Tina Stancheva
Telerik

 

 

[Ariel]

Hey Tina,

     Thanks for reply, I am building hybrid app in telerik appbuilder and I am trying to login with twitter in my app through javascript. I have  Attached my sample code. Please review that and tell me something that we can do.

Thanks & Regards,
Nitish 

[Tina Stancheva]

Hi Nitish,

Thank you for attaching your code. I will need more time to look into it and provide you with a solution. I will update this thread as soon as possible with more information.

Regards,
Tina Stancheva
Telerik

 

 

[Tina Stancheva]

Hi guys,

First I'd like to apologize for the delay in attaching a sample app demonstrating how to implement a Twitter authentication.

You can currently use the InAppBrowser and the jsOAuth library to execute the Twitter sign-in workflow described here. The attached project demonstrates:

• How to obtain a request token
• How to redirect the user to authenticate after receiving a request token
• How to convert the request token to an access token
• How to determine the identity of the user by verifying their credentials
• How to get the timeline of the user based on their credentials
• How to tweet

Please note that this workflow is designed to work in web applications and it still might be better to use the iOS or Android native APIs in a plugin to sign in twitter through hybrid mobile applications. In any case, you can definitely give the app a try.

Regards,
Tina Stancheva
Telerik

 

 

[Anil]

Hi Tina,

    I worked with your code (Twitter Application) but I am getting this error while logging In https://api.twitter.com/oauth/request_token 404 (Not Found) in ionic framework . 

Please send the screen shots of sample demo which you have implemented

 Regards

Anil Kumar B

9885535007

[Tina Stancheva]

Hello Anil,

I am not sure what screen shots you'd like to see. My last post contains as attachment  an AppBuilder project that demonstrates how to utilize the the InAppBrowser API and the jsOAuth library to execute the Twitter sign-in workflow.

I tested it again on an Android and iOS devices and it works as expected on my side. If you're having issues with the version of the project I attached, let me know on what devices and what steps I can follow to replicate the issues. 

Regards,
Tina Stancheva
Telerik

 

 

[Carlos]

I know this is an older thread, but we ran into an issue with the Windows IDE and the online environment where the OAuth.io plugin does not work int he simulator, only on an actual device.  Is there a specific reason why? We were initially confused, because even the project from Telerik did not work in the simulator. Typically there is a check in some of the project where there is a check for the Simulator.  But not in the OAuth.io project.

 Could this work in the simulator?

[Dimitrina]

Hi Carlos,

On your question, I am afraid the OAuth.io plugin is not supposed to work in the Simulator. 
Please note that while testing the core plugins works fine inside the AppBuilder companion app or the Simulator, testing the Telerik verified or custom plugins will not, this is not supported. 

To test it, you need to deploy your app directly on a device using the Build or Build and Deploy options.You can also refer to the topic on Running Apps on Devices.

I hope this helps.

Regards,
Dimitrina
Telerik

 

 

[Mithun]

gfdgdfgd