javascript - 通过小部件设置第 3 方 cookie，以便我稍后可以识别用户

Question

我正在尝试从用户添加到其网站的小部件中设置第 3 方 cookie。该小部件位于 user-site.com 上，托管代码位于 admin-site.com 上。我的目标是为它们设置一个 cookie，以便小部件能够在安装小部件的任何网站上识别它们。我不想使用弹出窗口并让他们通过我的网站登录。我只想通过小部件为它们设置一个 cookie，然后能够识别它们。

• 需要 2 行代码才能使小部件出现； 1 个 .js 文件和 1 行 html。

将小部件添加到 user-site.com 后，会出现两个文本字段； 1 代表您的姓名，1 代表您的电子邮件。然后您单击按钮提交。然后，我返回用户的 user_id 并尝试通过小部件设置 cookie。这不起作用...

user-site.com 需要在其 html 中添加 2 行代码才能显示小部件

<script src="http://example.com/widget.js" type="text/javascript" async="true"></script>
<div id="widget-container" class="8AORPIY0"></div>

widget.js

// Create the input fields and submit button
var login_name = '<input type="text" name="name" />';
var login_email = '<input type="email" name="email" />';
var login_button = '<input type="button" value="Login" />';
var add_fields_to_html_snippet = login_name + login_email + login_button;

$('#widget-container').html(add_fields_to_html_snippet);

$.ajax({
    url : "http://example.com/widget_update.php",
    type: "GET",
    data: { name:name, email:email },
    dataType:"jsonp",
    jsonp:"mycallbackupdate",
    success:function(data) { // The server side sends back the users id which will become the value of the 3rd party cookie

        // This is the value *user_id returned from server side
        var value = data.user_id;
        // I'm trying to set a cookie but it doesn't work
        document.cookie = 'cookie1=' + user_id + '; expires=Fri, 3 Aug 2016 20:47:11 UTC; path=/'

        }           
    });

如何通过嵌入的小部件成功为用户设置 cookie？我希望能够识别来自使用此小部件的任何网站的用户。

更新

我也尝试过从服务器端设置 cookie:

$_COOKIE['user_id'] = $user_id;
$expire = time() + 60 * 60 * 24 * 365;
setcookie('cookie1', $_COOKIE['user_id'], $expire);

但是，我无法从 widget.js 获取 cookie1 的值。我尝试使用以下方法获取 cookie 值:

alert(document.cookie.indexOf("cookie1")); // This doesn't return the same value I set the cookie to from the HTTP header

但是，这不会返回与我在 HTTP header 中设置 cookie 相同的值。如何在 widget.js 中调用相同的值？

Answer 1

JavaScript 始终在其嵌入的 HTML 文档的上下文中运行，因此您无法使用 JavaScript 设置第三方 cookie。

使用 JSONP 响应上的 HTTP header 设置 cookie(请记住，许多浏览器配置为完全阻止第三方 cookie)。