panoptes oauth init error

[rodrigommv1987]

Hi, I can't start the app, it throws this error:

Refused to display 'https://panoptes.zooniverse.org/users/sign_in' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

haven't touched a single line of code, just cloned the repo, did npm install, NODE_ENV=production and npm start.
node version is 6.1 and npm version is 3.10

thanks

[simoneduca]

Please upgrade your node version. Works with latest node v8.1.2.

[rodrigommv1987]

will try that, thanks

[rodrigommv1987]

sorry, but it's still happening.
I upgraded node to v8.2.1 and npm to 5.3.0, cloned and installed everything again to be sure

[simoneduca]

With application running and pointing to production, try to logout and login from the main zooniverse.org site. Then go back to SW and refresh the page. Hope that helps.

[eatyourgreens]

I'm afraid our production API doesn't allow connections from localhost so you can't use the production environment from an app that's running locally.

[eatyourgreens]

By the way, node 8 crashes for me:

Now using node v8.2.1 (npm v5.3.0)
asosxlap127:shakespeares_world odonnell$ npm start

> [email protected] start /Users/odonnell/zooniverse/shakespeares_world
> gulp dev

Environment set to staging


#
# Fatal error in ../deps/v8/src/api.cc, line 1200
# Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().
#

==== C stack trace ===============================

    0   node                                0x0000000100bf6d23 v8::base::debug::StackTrace::StackTrace() + 19
    1   node                                0x0000000100bf3ec9 V8_Fatal + 233
    2   node                                0x000000010014739a v8::Template::Set(v8::Local<v8::Name>, v8::Local<v8::Data>, v8::PropertyAttribute) + 330
    3   fse.node                            0x00000001022abbbb fse::FSEvents::Initialize(v8::Local<v8::Object>) + 197
    4   node                                0x0000000100a7c479 node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&) + 888
    5   node                                0x000000010017b0c2 v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) + 466
    6   node                                0x00000001001e6eef v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::FunctionTemplateInfo>, v8::internal::Handle<v8::internal::Object>, v8::internal::BuiltinArguments) + 911
    7   node                                0x00000001001e6449 v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) + 281
    8   ???                                 0x00003bb5c5f840bd 0x0 + 65651896500413
    9   ???                                 0x00003bb5c65f2074 0x0 + 65651903242356
Illegal instruction: 4

[eatyourgreens]

My bad, you can't authenticate to the Panoptes API from localhost, but public API requests should still work.

[rodrigommv1987]

I wasn't even logged in to zooniverse when I tried to run the app.
I've tried loggin in and out, but nothing happened.
It's weird, I tried the same a few months ago and it worked as expected.
I just need to run the app on localhost only, any hint on how to resolve this?

[simoneduca]

I'm sorry you're experiencing problems. After a clean install rm -rf node_modules/ && npm install, I'm not able to run v8.2.1 anymore, but v6.10.2 and v7.8.0 both worked. I'm running OSX Sierra 10.12.6.

[rodrigommv1987]

I've found this issue that may help:
zooniverse/panoptes#1664

it seems it's got something to do with the redirect_uri when creating the iframe and https, and shakespeare_world is mentioned in the issue. I'm really trying to understand this app works and solve this, but can you please take a look to that link and maybe you'll understand better what it is going on.

By the way, I edited the issue title, the problem isn't really in OAuth.sign_in(),it's in OAuth.init()

thanks

[simoneduca]

I don't think that issue is related. Would you mind sharing an update of the the behaviour you're currently experiencing? Thanks.

[rodrigommv1987]

Right now, if I execute npm start, what I see in the dev tools is this:

First of all, the panoptes-client oauth module throws an error when checking for a panoptes session with the message "Error: No redirect URI found".
Then, the iframe is created with this url: https://panoptes.zooniverse.org/oauth/authorize?response_type=token&client_id=2abed6ac014d4a8416a1f578de922600451a10c759dfeab6c9f0edbeb91c8f88&redirect_uri= but it's denied and the console shows this error: Refused to display 'https://panoptes.zooniverse.org/oauth/authorize?response_type=token&client_id=2abed6ac014d4a8416a1f578de922600451a10c759dfeab6c9f0edbeb91c8f88&redirect_uri=' in a frame because it set 'X-Frame-Options' to 'sameorigin'..

Another thing that I don't know if it's normal to happen is that app.module.js is executed twice, so angular.element.ready() is called twice, thus getting this console output: WARNING: Tried to load angular more than once..
I tried bypassing OAuth.init() and call startApp directly, but with no luck. I get this error: Uncaught Error: [ng:btstrpd] App already bootstrapped with this element 'document' because of app.module.js being executed twice.

That's all I know for now, thanks

[simoneduca]

Hi @rodrigommv1987, I thought the issue was with running the actual project in dev mode. The oauth error is expected behaviour. The reason being that you can't log in from a domain, .e.g. localhost that isn't allowed by the Panoptes API.

[rodrigommv1987]

how can I run the project in dev mode? I was trying to run it in localhost really.
I followed the readme instructions back in april and I was able to run it in localhost.

[simoneduca]

I'm sorry for the confusion. I will update the README once I understand what's going on.

[simoneduca]

@rodrigommv1987 CORS auth errors are expected and don't have anything to do with being able to run the app. Are you getting the same error (the C stack trace) that @eatyourgreens mentioned above? If so, can you follow these steps and see if it helps. Thanks.

[eatyourgreens]

Here's the view HTML when I run the app locally. Looks like it's loading the content of index.html into the page body, instead of the main template.

<div ui-view="" class="ng-scope">



    <base href="/" class="ng-scope">
    <meta charset="utf-8" class="ng-scope">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" class="ng-scope">
    <title ng-bind="pageTitle" class="ng-binding ng-scope"></title>
    <meta name="description" ng-bind="pageDescription" content="Transcribe handwritten documents by Shakespeare's contemporaries and help us understand his life and times. Along the way you'll find words that have yet to be recorded in the authoritative Oxford English Dictionary, and which will eventually be added to this important resource." class="ng-binding ng-scope">
    <meta name="viewport" content="width=device-width" class="ng-scope">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700" rel="stylesheet" type="text/css" class="ng-scope">
    <link rel="stylesheet" href="css/main.css" class="ng-scope">
    <meta name="msapplication-TileColor" content="#00aba9" class="ng-scope">
    <meta name="msapplication-TileImage" content="/mstile-144x144.png?v=vMMPr5Q0pN" class="ng-scope">
    <meta name="theme-color" content="#ffffff" class="ng-scope">




    <!-- uiView: --><div ui-view="" class="ng-scope"></div>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js" class="ng-scope"></script>
    <script src="https://cdn.polyfill.io/v2/polyfill.js?unknown=polyfill&amp;features=default,es6,Promise&amp;flags=gated" class="ng-scope"></script>
    <script src="js/main.js" class="ng-scope"></script>

    <!-- @@analytics -->




</div>

[simoneduca]

Interesting, my compiled html isn't like that. I know that'd cause problems.
From my console source

Are you you've upgraded to latest Angularjs (1.6.6)?

[eatyourgreens]

I posted the DOM generated by the javascript. View source will just give you the downloaded HTML file, before the javascript runs.

Yes, I'm on Angular 1.6.6. This is a fresh install of SW using the updates in #334

[simoneduca]

Sorry I wasn't sure what you posted. Turns out I had the correct pic before editing the previous comment. This is my generated HTML:

[eatyourgreens]

The generated HTML I posted was the contents of <div ui-view class="ng-scope">. It isn't expanded in your screenshot, but I assume the contents are different for you? I don't know Angular at all, but I think that's where the main layout template is supposed to be inserted.

[eatyourgreens]

By the way, have you checked your global npm packages to see if one of those is overriding the packages specified in package.json? That's one possible explanation for why we see different things.

[simoneduca]

Ah, didn't think of that. Let me check. This is the expanded view

[eatyourgreens]

Can you figure out what's going wrong from the code that I posted?

[simoneduca]

I think so. Looking at your screenshot it looks like Angular is injecting the code in the wrong place. That could happen for several reasons: html tag not closed properly, incorrect templateUrl value. But we have the same code, so I think checking my global packages is what I'll do next.

[simoneduca]

Not very illuminating, unfortunately.

[eatyourgreens]

I tried rolling back to the npm packages listed on master, but still get the same behaviour (plus stack traces from fsevents.)

[VVH]

How's this coming along @eatyourgreens and @simoneduca? @rodrigommv1987 I hope you don't mind my asking, but what is it you would like to do with the site? I ask as a humanities person on the project who is interested in the ways is being re/used in classrooms or to further research of any kind.

[eatyourgreens]

@VVH SW still refuses to build and publish properly for me, so any attempt to update shakespearesworld.org would break the site at the moment.

I don't know how to debug an Angular app, so I'm afraid I'm unable to help beyond providing screenshots and error messages that I get.

[simoneduca]

As far as I can see I don't have any other global packages that could make me able to run the app, unlike @eatyourgreens or @rodrigommv1987. I don't know what to suggest.

[eatyourgreens]

@simoneduca I've tried

rm -rf node_modules/
npm cache clean
npm install
NODE_ENV=production npm start

but I'm still seeing Angular inject the contents of index.html into the page, instead of the main layout template.

[eatyourgreens]

If it helps to debug this, I see network requests for /layout/base.html and /home/home.html when I try to open the home page locally. Both of those URLs resolve to the index.html file.

[simoneduca]

Apparently that's Angular behaviour out-of-the-box. My best guess is that something has changed in the way the way those templates are cached. However, I can't see any breaking changes in the logs of that plugin, that could have affected SW after upgrading.

[eatyourgreens]

Does dir.subdirs in views.js work when you run SW locally? It doesn't seem to do anything when I run the gulp tasks.

[eatyourgreens]

I've been able to fix this by pinning node-dir to 0.1.16 in package.json. I think 0.1.17 broke everything. See fshost/node-dir#50

[eatyourgreens]

I've added that change to #334.

[eatyourgreens]

Fixed by #334