github login redirects to a a flash of a white page but never logs in

[NonaSuomy]

github login redirects to a a flash of a white page but never logs in you can keep pressing the login button until it says do you want me to revoke the key too many attempts or something like that.

Did I setup something wrong?

github seems to show 1 user usage so far.

I manually added a github issue to this pages issue tracker and it showed up so it seems like some of it is working just can't login.

I double checked all my keys and repasted them back in with no change as well. Also retried to paste any other url nfo in still no luck.

The very first time I tried to login I got the user would like use your github blah and I click accept. After that all I got was the above.

Test here: https://nonasuomy.github.io/Hello-World/

[wireddown]

Hi! Thanks for enabling diagnostics :-)

When I used the browser console with your blog post, I saw this error message after I authenticated with GitHub:

1. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://nonasuomy.github.io') does not match the recipient window's origin ('https://nonasuomy.github.io').
2. (anonymous function) @ /public/html/gpgc_redirect/index.html?code=d23c5e5fc8836e6a82cc&state=11764097881417049484:10

Does it work if you update the url in your _config.yml to match your site's URL -- https instead of http?

I think that will clear this hurdle, but I also see you're using the ghpages-ghcomments authenticator, which might present another obstacle. Depending on your progress and diagnostics, you might also need to set up your own authenticator (step 2, even more details).

Please let me know what you uncover :-)

[NonaSuomy]

Hello! I tried to exhaust my searching on how to attempt figuring it out but alas no luck, I saw that option and an issue about a similar problem. Where you told the person to enable some JS script to dump stuff to the console and not close the window so I added that as well.

I however couldn't find where it would show the error in the debug console of what I was looking for, as I am not too savvy with the f12 console, tried chromium and firefox.

I made the change you suggested, let me know if it now works for you, for me it did not.

I prior completed the heroku app step and added the url is that what you are asking?

Thanks for your help!

[wireddown]

Browser console details

I however couldn't find where it would show the error in the debug console of what I was looking for, as I am not too savvy with the f12 console, tried chromium and firefox.

No worries! I saw in your commit history that you added some console.log() calls, so I guessed that you were also using the console. When I looked at your page, I used the F12 console in Chrome on both windows: the blog page and the smaller authentication window. I saw the error message in the console for the blog page.

Still not working, one more change

I made the change you suggested, let me know if it now works for you, for me it did not.

It does not work for me, either. When I looked at the console for the blog page, the error message no longer appeared. Instead, I only saw the console.log(event); print:

Because the error message is gone, the redirect page is correctly setting the targetOrigin when it sends the message event to the blog page. However, the message still has its origin as http://nonasuomy.github.io. Try updating your _gpgc.yml file to use https for the callback_url.

[NonaSuomy]

Seems that it now shows the https:

origin:"https://nonasuomy.github.io"

But alas now it loads the main blog page into the authentication window for some strange reason.

[wireddown]

Ok, believe it or not, this is good progress! :-D The message passing between the windows is working correctly. Now, we're hitting that second obstacle I mentioned.

Look at the contents of the address bar in the authentication window:

nonasuomy.github.io/?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application.&error_uri=https%3A%2F%2Fdeveloper.github.com%2Fv3%2Foauth%2F%23redirect-uri-mismatch&state=41038792681379701821

They key message is: The redirect_uri MUST match the registered callback URL for this application. The redirect_uri is specified as https://nonasuomy.github.io/public/html/gpgc_redirect/index.html in your gpgc.yml file, and the callback URL is specified as my ghpages-ghcomments application in your gpgc.yml file.

Please finish step 2 and update your gpgc.yml file to use your own GitHub application.

[NonaSuomy]

You're brilliant! 🎉

Seems it's working now.

Should I change that http homepage url to https?

I'll leave the debug stuff in until you are able to check it out, let me know if it's working for you as well now, or if there is anything else I am doing wrong.

Maybe reconsider changing this part of that help document Authorization callback URL -- use the URL to your site to Authorization callback URL -- use the https://<yourgithubpageshere>.github.io/public/html/gpgc_redirect/index.html to your site

As use the URL to your site to me seems like it is saying just put the subdomain.github.io name (https://mypage.github.io).

Another stumbling block I had was the section of the help guide:

repo_owner: __YOUR_GITHUB_USERNAME__
repo_name: __YOUR_GITHUB_REPOSITORY__
use_show_action: false
label_name: Blog post comments
label_color: 666666
github_application:
  client_id: __YOUR_GITHUB_APP_CLIENT_ID__
  code_authenticator: https://__YOUR_HEROKU_APP__.herokuapp.com/authenticate/
  callback_url: http://__URL_OF_GPGC_REDIRECT_PAGE__
enable_diagnostics: false

Maybe add a link back to your actual file of your site for a sample as I really felt like it should have just had the values fully entered for a sample, before I thought to check what you did on your actual site code in the repo. Didn't think I was going to make it out of that one alive.

and another one :)

Seems _includes/head.html <-- no longer exists, I had to put

<link rel="stylesheet" href="{{ site.baseurl }}/public/css/gpgc_styles.css">

in https://github.com/NonaSuomy/nonasuomy.github.io/blob/master/_layouts/default.html#L30

This will fail as well because it doesn't exist. git add _includes/head.html

This as well before I knew what I was doing:

Give your Heroku environment your own XXXX and YYYY GitHub application credentials:
heroku config:set OAUTH_CLIENT_ID=XXXX
heroku config:set OAUTH_CLIENT_SECRET=YYYY

I see it says below that the Oauth_Client_ID but when I first read that line. I was like what do they mean xxxx yyyy? Should maybe say something about oauth keys in the sentence even though it's implied to look below.

2. Create an instance of Gatekeeper

These instructions use Heroku, but you can use a different provider (like Azure) or you can use your own server (see Custom GitHub Application for more details).

I thought this meant I didn't have to use Heroku and that I could use a feature of github applications to do the same thing as heroku was doing, but after much reading I just said ?? and said heroku it is...

1. Create a GitHub developer application

Go to your GitHub settings page
Select the Applications item on the left
In the Developer applications panel, select Register new application
Fill in the form:
Application name -- anything is ok, consider using your site's title
Homepage URL -- use the URL to your site
Application description -- anything is ok, consider using "Comments for [your site's title]"
Authorization callback URL -- use the URL to your site
Add an application image -- consider using your site's favicon.ico

Consider just having a code box below that with sample values of how you did your site.

One thing not in this guide that should be, just got errors trying to add the prior posts with comment sections. I think I got an error then it hit me was that I needed to add the issue tracker to github pages site as it's not enabled by default, maybe some steps on where to find that.

_layouts/post.html

Add an include tag at the bottom (or wherever you want comments to appear):

{% include gpgc_comments.html post_title=page.title %}

add a sample link back to the line where you put it in the code base .md for indecisive people that don't understand what it is they are doing.

Where <personal_access_token> is your GitHub personal API access token. Your token must have the public_repo scope so that the hooks can create labels and issues in your repository.

I had to read this over many times, maybe show where this is and when you get there the group of all the settings that it is in, as it's kind of confusing when you get there.

Add a screenshot or information about what happens when you actually login as the permissions thing kinda flustered me at first.

In the troubleshooting section add a link to the issue tracker where they can ask a question 👍

Add nfo about those options for turning on the debug mode and 3 Javascript lines to debug with the console.

Thank you for all your help and with compiling the ability to make the process of these issue comments more streamlined 😄

[wireddown]

Woo! Party time 🎆

Should I change that http homepage url to https?

It can't hurt :-)

I'll leave the debug stuff in until you are able to check it out, let me know if it's working for you as well now, or if there is anything else I am doing wrong.

It works! I was able to login and post a comment. Double check that all references to your site use 'https'. If I visit http://nonasuomy.github.io/Hello-World/ (no s), then the message passing between windows breaks again. This seems like a defect in ghpages-ghcomments that could be fixed in my JavaScript.

Thanks, too, for so much helpful and actionable feedback on the setup instructions :-) As I work on incorporating your feedback, I'll make new issues on this project so they can be individually tracked.

[NonaSuomy]

Ah interesting, I see that as well, when you manually specify to http. Not sure how to prevent people from manually going to http:// instead of https:// so I will have to wait for your javascript fix. Please let me know if you have a moment to find a solution for that.

Welcome, I just thought, I could help others get it up and going faster if they have the same follies of my ways. 😸

Thank you for all your help! 👍