如何实现 HybridAuth VIA ajax 调用？答案

【问题标题】：How to implement HybridAuth VIA ajax call?如何实现 HybridAuth VIA ajax 调用？
【发布时间】：2015-07-24 03:02:30
【问题描述】：

我正在尝试为 modx 站点设置 SSO 登录，并决定尝试使用 HybridAuth 和 Ajax 进行此操作，但我遇到了一个错误，我不知道如何处理，这就是我所拥有的：

调用jQuery的几个按钮：

<button 
    name="googlelogin" 
    type="button" 
    id="googlelogin" 
    class="btn btn-primary googlelogin hybridauthlogin" 
    data-provider="Google" 
    data-redirect="" 
    data-action="/hybridauth.php">Login with Google+
</button>


<button 
    name="facebooklogin" 
    type="button" 
    id="facebooklogin" 
    class="btn btn-primary facebooklogin hybridauthlogin" 
    data-provider="Facebook" 
    data-redirect="" 
    data-action="/hybridauth.php">Login with Facebook
</button>

jQuery：

$(document).ready(function() {

    $('.hybridauthlogin').on('click', function() {

        var action = $(this).attr('data-action');
        var redirect = $(this).attr('data-redirect');
        var provider = $(this).attr('data-provider');

        var postdata = {"action": action, "redirect": redirect, "provider": provider };

        $.ajax({
            type: "POST",
            url: action,
            dataType  : "JSON",
            cache : false,
            data: postdata,

            success: function(data){
                console.log("success status posting data" + data);
                if(data.status == 'success'){

                    console.log("success status posting data");

                }else if(data.status == 'error'){

                    console.log("error status posting data");

                }

            },

            error: function(jqxhr,textStatus,errorThrown){

                console.log("FATAL: error posting data");

                console.log(textStatus);
                console.log(errorThrown);

            }

        });

    });

});

还有一个非常简单的 php 处理器，可以加载 modx 和 HyBridAuth：

<?php
// start a new session (required for Hybridauth)
session_start();

define('MODX_API_MODE', true);

require_once('index.php');

$modx = new modX();

$modx->initialize('web');


// change the following paths if necessary
$config   = dirname(__FILE__) . '/assets/components/hybridauth/config.php';

require_once( dirname(__FILE__) . '/assets/components/hybridauth/Hybrid/Auth.php' );

$hybridauth = new Hybrid_Auth( $config );

$google = $hybridauth->authenticate( "Google" );

$output = array(
    'status' => 'success',
    'message' => 'This is the success message',
);

$output = $modx->toJSON($output);

header('Content-type: application/json');

print $output;

所以它实际上还没有创建一个 modx 会话，如果在不使用 ajax 的情况下调用它，它将进行身份验证，但是一旦我添加了 ajax 部分，我就会得到一个控制台错误：

XMLHttpRequest cannot load https://accounts.google.com/o/oauth2/auth?client_id=xxx-xxx…ails.read+https%3A%2F%2Fwww.google.com%2Fm8%2Ffeeds%2F&access_type=offline. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.domain.com' is therefore not allowed access.

这看起来很简单，[ajax?] 在某处添加了一个标题[不是处理器的倒数第二行，它是在错误之后添加的]。什么可以添加标题&我该如何解决？

【问题讨论】：

为什么不使用modx.com/extras/package/hybridauth？
后面有几个 hybridauth 版本，不是 ajax，它修改了用户的上下文密钥，不支持新的 twitter API，而且它似乎与 facebook 有问题
好吧。 XMLHttpRequest 错误表明您请求的域与您发送请求的域不同。

标签： php jquery ajax modx hybridauth

【解决方案1】：

由于身份验证需要将用户重定向到提供程序，因此它不适用于 AJAX 调用。后端脚本将在 Redirect 函数中 die()。您看到的标头可能是重定向标头。

对于替代解决方案，请检查此方法：https://stackoverflow.com/a/29891358/1816603

【讨论】：