HybridAuth 不适用于 ajax

Posted 2023-03-04

【中文标题】HybridAuth 不适用于 ajax

【英文标题】：HybridAuth not working with ajax

【发布时间】：2015-07-04 01:13:14

【问题描述】：

我正在尝试使用 ajax 实现 HybridAuth。

代码：

php：（会被ajax调用）

<?php
header('Content-type: application/json');
$provider = $_GET["provider"];
$config = '../libaries/hybridauth/config.php';
require_once( "../libaries/hybridauth/Hybrid/Auth.php" );
try 
    $hybridAuth = new Hybrid_Auth($config);

    $adapter = $hybridAuth->authenticate($provider);    
    $userProfile = json_encode($adapter->getUserProfile());
    echo $_GET['callback'] . '(' . "$userProfile" . ')';
 catch (Exception $e) 
    echo "Ooophs, we got an error: " . $e;

?>

javascript：

socialRegister: function () 
    var self = this;
    var val = 'provider=' + self.get("provider");
    return $.ajax(
        type: "GET",
        url: path.urlRoot + 'ext/socialRegisterAndAuthentication.inc.php',
        dataType: "jsonp",
        data: val
    );

但我总是收到以下错误：

XMLHttpRequest 无法加载 https://api.twitter.com/oauth/authenticate?oauth_token=123。请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost' 因此不允许访问。

我知道，这意味着 Twitter 服务器不允许我的来源。有解决方法吗？是否可以使用 ajax 进行“单页”注册？ （希望是的 - 在 quora.com 上它可以工作；））

推特设置：

最好的 费边

【参考方案1】：

首先 - HybridAuth 和 ajax 直接不起作用。但我现在有一个令人满意的解决方案，我想与你分享。所以我是这样做的：

JavaScript：

twitterRegister: function () 
            var self = this;
            self.popupWindow = window.socialPopupWindow = window.open(
                    path.urlRoot + 'ext/socialRegisterAndAUthentication.inc.php?provider=Twitter',
                    "hybridauth_social_sing_on",
                    "location=0,status=0,scrollbars=0,width=800,height=500"
                    );
            var winTimer = setInterval(function ()
            
                if (self.popupWindow.closed !== false)
                
                    // !== is required for compatibility with Opera
                    clearInterval(winTimer);

                    //Now twitter register from
                    require(["model/register"], function (registerModel) 
                        var registerM = new registerModel();                      
                        var ajaxRequest = registerM.socialRegister();
                        $.when(ajaxRequest).done(function (response) 
                            console.log(response);
                            self.slideOutRegister("Twitter");
                            self.twitterObject = response;
                            $('#reg_user').val(response.firstName);
                        );
                        $.when(ajaxRequest).fail(function () 
                            self.slideOutRegister("Email");
                        );
                    );
                
            , 200);

        ,

说明：此函数打开一个新的弹出窗口。将提示用户授权该应用程序。 setInterval 捕获关闭事件（完成时由窗口本身触发）。

socialRegisterAndAUthentication.inc.php：

<?php

session_start();
header('Content-type: text/html');
$provider = $_GET["provider"];
$config = '../libaries/hybridauth/config.php';
require_once( "../libaries/hybridauth/Hybrid/Auth.php" );
try 
    $hybridAuth = new Hybrid_Auth($config);
    $adapter = $hybridAuth->authenticate($provider);
    $_SESSION["userProfile"] = json_encode($adapter->getUserProfile());
    echo "<script type='text/javascript'>";
    echo "window.close();";
    echo "</script>";
 catch (Exception $e) 
    echo "Ooophs, we got an error: ";

?>

说明：授权完成后关闭窗口（来自 HybridAuth 的文档）。数据存储在会话中，以便我以后可以通过 ajax 检索它。

getSocialData.inc.php

<?php
session_start();
header('Content-type: application/json');
echo $_GET['callback'] . '(' . "$_SESSION["userProfile"]" . ')';
?>

说明：返回存储的userProfile。

总结：

使用 javascript 打开一个弹出窗口并让用户授权该应用程序。将数据存储在 Session 变量中。捕捉弹出窗口的关闭事件。然后进行 ajax 调用以检索存储的数据（会话）。