4

I am trying to get started with the Javascript SDK. I am developing on a web server on my local machine. I get a channelUrl-related error when calling SE.init.

My code:

SE.init({
    clientId: 12345,
    key: 'my key',
    channelUrl: 'http://localhost:8000/blank',
    complete: function (data) { console.log(data) }
})

I receive the error message:

Uncaught channelUrl must be under the current domain

The minified source seems to indicate that the channelUrl parameter should match window.location.host, which in my case is localhost:8000.

I have also unsuccessfully tried localhost:8000/blank and localhost:8000.

What value should I use for the channelUrl parameter?

Improve this question
0

1 Answer 1

Reset to default
7
+50

Your value for channelUrl is nominally correct. If I set up my XAMPP server, via httpd.conf to use port 8000, then this HTML page works perfectly fine for me:

<!DOCTYPE html>
<html><head>
    <title>StackApps SDK auth test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head><body>

<p>See the console.</p>

<script type='text/javascript' src='https://api.stackexchange.com/js/2.0/all.js'></script>
<script type="text/javascript">
    SE.init ( {
        clientId:   1543,
        key:        '{USE YOUR OWN KEY}',
        channelUrl: 'http://localhost:8000/test/blank.htm',
        complete:   function (data) { console.log ("Init: ", data); }
    } );
</script>
</body></html>

-- where blank.htm is a completely empty file and I access the page with this URL: http://localhost:8000/test/StckApps_SDK_auth_test.htm

The console shows:

Init: Object { version="11633"}

So, something you are not showing us is the problem. (Redirects? Using file:// protocol? Typos? Other?)

However, there is an apparent bug in the SDK. It apparently does not account for ports when you try to do the next step (SE.authenticate()).

Consider this page:

<!DOCTYPE html>
<html><head>
    <title>StackApps SDK auth test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head><body>

<p>See the console.</p>
<p><button id="authBtn">Get authorized.</button></p>

<script type='text/javascript' src='https://api.stackexchange.com/js/2.0/all.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready (jQueryMain);

    function jQueryMain () {
        $("#authBtn").click ( function () {
            SE.authenticate ( {
                success:    function (data) { console.log ("Auth success: ", data); },
                error:      function (data) { console.log ("Auth error: ", data); },
                scope:      ['read_inbox'],
                networkUsers: true
            } );
        } );
    }
</script>
<script type="text/javascript">
    SE.init ( {
        clientId:   1543,
        key:        '{USE YOUR OWN KEY}',
        channelUrl: 'http://localhost:8000/test/blank.htm',
        complete:   function (data) { console.log ("Init: ", data); }
    } );
</script>
</body></html>

When I click on the Get authorized. button, a popup appears with a valid access token in the URL. But this information never gets back to the calling page!
The Firefox Error Console reports:

Security Error: Content at http://localhost/ may not load data from http://localhost:8000/test/StckApps_SDK_auth_test.htm.

Note the port mismatch in what the SDK tries to use? This looks like a bug.

If I change the page, edit my app settings, and reset XAMPP to use localhost without any port specified (except 80 in httpd.conf), then the page works perfectly and I get a response like:

Auth success: Object { accessToken="72L6...2W6cH(kQ))", expirationDate=Date, networkUsers=[23]}

in the Firebug console.

So, even if you get the first part working, you do not want to use a non-default port with the SDK, anyway, until the SDK bug is fixed.

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged .