0

I'm using twitteroauth.php to add login functionality to my website using twitter api.

It works fine. But i want to implement the same using jQuery and AJAX so that page won't get refreshed on return.

Following is my piece of code

<?php
require("twitter/twitteroauth.php");
require 'config/twconfig.php';
session_start();

$twitteroauth = new TwitterOAuth(YOUR_CONSUMER_KEY, YOUR_CONSUMER_SECRET);
// Requesting authentication tokens, the parameter is the URL we will be redirected to
$request_token = $twitteroauth->getRequestToken('http://list.2lessons.com/fbtwLogin/getTwitterData.php');

// Saving them into the session

$_SESSION['oauth_token'] = $request_token['oauth_token'];
$_SESSION['oauth_token_secret'] = $request_token['oauth_token_secret'];

// If everything goes well..
if ($twitteroauth->http_code == 200) {
    // Let's generate the URL and redirect
    $url = $twitteroauth->getAuthorizeURL($request_token['oauth_token']);
    header('Location: ' . $url);
} else {
    // It's a bad idea to kill the script, but we've got to know when there's an error.
    die('Something wrong happened.');
}
?>

2 Answers 2

2

I was searching for something similar to Facebook JS SDK for Twitter login. Facebook JS SDK does not refresh the page when logging in. I have made my own using JS Popup window. It's actually not using AJAX.

a. You need a link to trigger popup window:

< a href="#" onclick="window.open('http://localhost.com/twitter_login.php', 'Twitter', 'width=640,height=480');">Login to Twitter< /a>

b. PHP script for Twitter login (The code you've submitted above) and callback (Where user lands after login).

Callback should look like:

<?php 
// In php part you should store information about login (AccessToken, User info, and anything else you want) into DB

?>
<html>
<head><title></title></head>
<body>
<!-- In html part I let user know that he/she has been logged in. In my case, Twitter icons -->
<script type="text/javascript">
        if(window.opener && !window.opener.closed) {
            window.opener.refreshTwitterIcons(); // function is called in parent window from which user has triggered the popup
        }
        window.close(); // Closing the popup
    </script>
</body>
</html>
4
  • Yes this is a good suggestion. But how to return to the parent window(which activated the popup) from the popup Mar 26, 2013 at 9:32
  • What do you mean by "return"? In the example above function refreshTwitterIcons() is called from the parent. window.opener generally returns a parent window of a popup. If you want to just return to parent as a previous view, just use window.close(). My suggestion is similar to Facobook login procedure. You just click a "Login" button, popup window is then opened, you enter your login data and allow the app. Then the page inside the popup is redirected back to the callback and popup window is closed (using window.close()). Hope it's clear now :)
    – peter.o
    Mar 27, 2013 at 13:57
  • I just did this the exact same way, but it felt a little hacky. I feel a little better now, but it still seems like there should be a better way. window.opener seems to be getting lost on some browsers, perhaps because of the redirect, i'm not sure.
    – Gisheri
    Sep 4, 2014 at 16:31
  • Yes, it's more than a bit hacky, but it working :) Maybe there is another/better way to achieve it. Nowadays :) Back then there was nothing. I'm not working on the project anymore, so I cannot tell. We tested the login process on Chrome, FF, IE and Safari. (w3schools.com/jsref/prop_win_opener.asp)
    – peter.o
    Sep 5, 2014 at 7:31
0

It's quite easy by using jQuery's $.ajax() function, where you basically post your data to your PHP code.

The only thing that needs a change is the header section - you might want to return a JSON encoded message - like "OK" or "Error Message", so you can react upon that.

$.ajax({
    url: "your_file.php",
    type: 'post',
    dataType: 'json',
    success: function(data, status, xhr) {
        if (data.msg == 'OK') {
            // all ok, user logged in
        } else {
            // display error
            console.log(data.msg);
        }
    }
});

And the PHP part:

<?php
require("twitter/twitteroauth.php");
require 'config/twconfig.php';
session_start();

$twitteroauth = new TwitterOAuth(YOUR_CONSUMER_KEY, YOUR_CONSUMER_SECRET);
// Requesting authentication tokens, the parameter is the URL we will be redirected to
$request_token = $twitteroauth->getRequestToken('http://list.2lessons.com/fbtwLogin/getTwitterData.php');

// Saving them into the session

$_SESSION['oauth_token'] = $request_token['oauth_token'];
$_SESSION['oauth_token_secret'] = $request_token['oauth_token_secret'];

// If everything goes well..
if ($twitteroauth->http_code == 200) {
    // Let's generate the URL and redirect
    $url = $twitteroauth->getAuthorizeURL($request_token['oauth_token']);
    echo json_encod(array('msg' => 'OK'));
} else {
    // It's a bad idea to kill the script, but we've got to know when there's an error.
    echo json_encod(array('msg' => 'Something wrong happened.'));
}
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.