[feature] retrieve config.json profile data from github

[serapath]

1. Use ajax request to retrieve data
2. cache the data in localstorage (or indexDB)
3. use etag to check if data updates are available

[serapath]

Which data exactly to pull in?
We also have more data from github, see:

• https://github.com/Yugalitree/profiles/blob/master/config.json
  • also a twitter field should be included (it can be empty)
• https://github.com/serapath?tab=repositories (peoples main github profile)

[serapath]

EXAMPLE CODE (to fetch data):
https://codepen.io/serapath/pen/jYKYjQ?editors=0010

[kiecoo]

the v2 code to print all members' json
(1)codepen:https://codepen.io/kiecoo/pen/BJGpQx
(2)demo pics of output:https://drive.google.com/open?id=10r8muZ7YKu9yKa-sKcWHbpS9e06O6nKk

I found that whenever the api of github page can open successfully,the code of v2 can run successfully.
whenever the api of github page can't work, v2 would fail to run (when github page can't work,the page will show"API rate limit exceeded for 111.251.98.43.")

example of api of github:https://api.github.com/repos/amliu/profiles

[serapath]

So maybe the code needs to add a little check and if the result is rate limit exceeded

1. we should display something nice to explain it to the user to come back and check later
2. we should add a github signup logic, so that we increase the rate limit to 5000 per hour
3. we should cache the result for a few hours, so that when the page is refreshed and the few hours have not been passed, the result from last time should be displayed instead of making a new request to github. ...i think we should work on that. Let's do this "caching logic" next time :-)

otherwise - great work :-)

[kiecoo]

ok~ "caching logic" sounds great~ 👍

[kiecoo]

【local-Storage】message board
https://codepen.io/kiecoo/pen/wpLVEe?editors=1000

i am trying to combine this using way of local-storage into the code getAllProfilesFromGithub.js

[ninabreznik]

@kiecoo Do you have anywhere an example of all the data you will get from Github? I would like to know what fields to add to the profile.

So, we will have stuff from config.json and anything else?

[kiecoo]

(1) "the code" about what we can get from Github＆localStorage)
https://codepen.io/kiecoo/pen/QaJONZ?editors=0010
(2) "the list of 8 items" we can get from Github
https://goo.gl/NWgD5S

[kiecoo]

[finished] module of get-userprofiles-from-github

• npm https://www.npmjs.com/package/get-userprofiles-from-github

• github https://github.com/kiecoo/get-userprofiles-from-github

[ninabreznik]

Great! Will try it out tomorrow :)

[serapath]

So sooner or later somebody shoud put it all together and make a pull request to the wizardamigos profile repository.

There is this issue where i wrote some imaginary "demo code" that was meant to demonstrate how the code that combines all this work could look like.
#15

[kiecoo]

the link to the github page of module of get-userprofiles-from-github
https://kiecoo.github.io/get-userprofiles-from-github/

[serapath]

Great. I wanted to try but ran again into github api limits.

If you want you can try something a bit more challenging :-)
https://github.com/prose/gatekeeper#heroku-button

Once you deploy this program for free to run on heroku or maybe azure (there is another button in that readme too), you can use it to increase the request limit.

1. Go on github to your Settings -> Developer settings
2. Under OAuth Apps click the green Register a new application button
3. give it a name, put in the URL of your app and maybe a small description
4. put the same URL under Authorization callback URL

When you confirm all this you will get to a page where you get a ClientID and Client Secret
So now what you need is

1. to make a SignUp button
2. on click you need to open a new login window with the URL (details here)

• https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}

3. this will open github login page in a new window and when the user logs in to github successfully:

• => Github will load again your website, but with a code parameter in your URL

So what you need on your webpage is actually some kind of IF/ELSE logic in the very beginning of your app :-)

var code = window.location.href.match(/\?code=(.*)/)[1]

if (code) {
  minixhr(`https://YOUR_GATEKEEPER_HEROKU_URL/authenticate/${code}`, json => {
    var data = JSON.parse(json)
    console.log(data.token) // This TOKEN is the one you need to make requests to the github api
    // so that the user does not have the 60 requests per hour limitation
    // NOW START YOUR REAL APP and fetch all your data from github, etc...
  })
} else {
  // JUST SHOW LOGIN-BUTTON, don't execute all your other code yet
}

[serapath]

cool, maybe check this comment and try #9 (comment)

[kiecoo]

• I got a ClientID and Client Secret on github

• app on heroku I created was successfully deployed(already put OAUTH_CLIENT_ID and OAUTH_CLIENT_SECRET in heroku app).

---

1st part:【open github login page by using client_id】

I got stuck because I am not sure about below

• step 1.to make a SignUp button : does it mean to [1] create a botton like this or [2]create a new Heroku app(Heroku Button)

• step 2. on click you need to open a new login window with the URL

• step 3. open github login page
  does it mean this_github_login_page

---

could @serapath help to tell me more about how to do the step 2&3 (After searching on Google,I still have no idea how to write code to complete step 2&3 )

because I got stuck ,I searched on google to try more & found something like below (would I write some code like below? if this code is right way for our porject, I still get stuck and have no idea about how to continue the code to make out step 2&3 )

const scopes‭ = [‬
‭  '‬user‭',‬
‭  '‬repo‭',‬
‭];‬
const scope‭ = ‬scopes.join‭(',');‬

const GITHUB_AUTHORIZE_URI‭ = '‬https‭://‬github.com/login/oauth/authorize‭';‬
const REDIRECT_URI‭ = '‬‭ ‬https‭://‬kiecoo.github.io/get-userprofiles-from-github‭/‬‭ ‬‭';‬

const URI‭ = ‬encodeURI‭(‬`‭${‬GITHUB_AUTHORIZE_URI‭}‬‭?‬client_id‭=${‬env.GITHUB_CLIENT_ID‭}&‬scope‭=${‬scope‭}‬`‭);‬

---

2nd part 【fetch-token by using client_id & client_secret & code】

I couldn't understand using-client_id&client_secret&code-to-fetch-token
I read some more information about it,but I still have no idea bout how to write code about
(1)using "Redirect URI" to get the “code”
(2)using the "code" to fetch "Access Token" (what I searched is below,I am not sure if it is suitable for our project)

     var readline = require('readline');
var google = require('googleapis');
var OAuth2 = google.auth.OAuth2;
var CLIENT_ID = '256637951185-p1b226vo2mfem77mbuiccj74eefj3m2v.apps.googleusercontent.com',
    CLIENT_SECRET = 'YOUR CLIENT SECRET',
    REDIRECT_URL = 'urn:ietf:wg:oauth:2.0:oob',
    SCOPE = ['https://www.googleapis.com/auth/drive',
        'https://www.googleapis.com/auth/plus.me',
    ];  
var rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});
var auth = new OAuth2(CLIENT_ID, CLIENT_SECRET, REDIRECT_URL);
var url = auth.generateAuthUrl({scope: SCOPE});
var getAccessToken = function(code) {
    auth.getToken(code, function(err, tokens) {
        if (err) {
            console.log('Error while trying to retrieve access token', err);
            return;
        }   
        auth.credentials = tokens;
        console.log(tokens);
    }); 
};
console.log('Visit the url: ', url);
rl.question('Enter the code here:', getAccessToken);

[serapath]

step 1.to make a SignUp button : does it mean to [1] create a botton like this or [2]create a new Heroku app(Heroku Button)

No, because the button doesn't need any input fields, because a new window from github will open which has all the input fields and logic attached :-) ...so it's just a button to open that window

step 2. on click you need to open a new login window with the URL

yes

step 3. open github login page

yes, the new login window with the URL is the gitub login page

The code snippet you found is amazing :-)
Just copy/paste it into a javascript console in the developer tools or something like that

var GITHUB_CLIENT_ID = '19rj28jf2490j0wjeg'

var scopes = ['user', 'repo']
var scope = scopes.join(',')
var githubURL = 'https://github.com/login/oauth/authorize'
var redirect = 'https://kiecoo.github.io/get-userprofiles-from-github/'
var URL = encodeURI(`${githubURL}?client_id=${GITHUB_CLIENT_ID}&scope=${scope}`)

console.log(URL)

---

2nd part 【fetch-token by using client_id & client_secret & code】

This is actually about github API pages, that describes how to put together the URL like in the snippet above. This is what you need and that link just describes what are all the parameters about and what do they do ...so that you can make up a URL with the right scopes and auth tokens to get what you need :-)

very good job 👍 👍 👍 :-)

[kiecoo]

� @serapath @ninabreznik
I am thankful about the help of your two so much
I am so so so happy to see that the informaiton& code I found on Internet did help this project.

because of your detail telling how to code in detail, let me overcome many problems of coding
what you two wrote inspired me a lot, let me feel so fun to code.
I would try to continue this code & keep writing better code. :-)

[serapath]

i am still looking forward to when we finally put it all together and finish the wizardamigos.com/profiles page :-)

[kiecoo]

@serapath @ninabreznik
【Oauth-code 】
I searched to try to let myself understand Oauth more & tried to combine some code below

1. could you help to have a look if the code below(Oauth-code-v1) is in the right way to continue?
   if it is ,could you help me how I could continue / improve the code below?
   (I combined the code you gave me & the code I searched )

2. could Oauth-code also be tested if it's work in "Codepen" as before or should I use another software or online environment to be able to test code ?

---

Oauth-code-v1

var github_client_id=   ;
var github_secret_id=   ;


router.get('/github', function(req, res){
  var scopes = ['user', 'repo']
  var scope = scopes.join(',');
  var githubURL= 'https://github.com/login/oauth/authorize';
  var redirectURL = 'https://kiecoo.github.io/get-userprofiles-from-github/';

  var github_oauth_url = encodeURL(`${githubURL }?client_id=${ github_client_id }&scope=${scope}`);

  res.send(JSON.stringify({"redirect_url":github_oauth_url}));
});


router.get('/github/callback', function(req, res){
    
   //get access_token by code
    var code = req.query.code;
    var token_option = {
        url:"https://github.com/login/oauth/access_token",
        method:"POST",
        form:{
            code: code,
            client_id: github_client_id,
            client_secret: github_secret_id
        }};
  request(token_option, function(err, response, body){
      if(err){
          res.send(response);
      }
      //using Regular Expression 
      var regex = /\=([a-zA-Z0-9]+)\&([a-zA-Z])+\=([a-zA-Z0-9]+)/;
      var result = body.match(regex);
      var token = result[1];
      console.log(body);

      //get user_data by access_token 
      var info_option = {
          url:"https://api.github.com/user",
          method:"GET",
          headers:{
              "User": "Amigos",
              "Authorization":"token "+ token
          }
      }
      request(info_option, function(err, response, body){
         if(err){
             res.send(err);
         }
         res.send(body);
      });
  });
});

[kiecoo]

【Button-Oauth】

I meet 2 problems

Q1. Button-Oauth( separate-into-html& css) works successfully. I tried to paste all the same code to fit into js then it failed

• Button-Oauth ( separate-into-html& css) :success
• Button-Oauth ( fit-into-JS) :fail

Q2. should I add function toggle(){......} into Button-Oauth ?
(if it is, I don't know how to write function toggle(){......} )

---

final one
【combine】Oauth-code & Button-Oauth
Q3. how could I combine the Oauth-code(above) & this Button-Oauth?

[serapath]

1. You don't need the Oauth-code-v1

2. I forked your codepen you linked above and changed it

• see: https://codepen.io/serapath/pen/vdwXbQ?editors=0011
• ...currently i use the code from the atlassian company from a demo they made...

You now need to only replace one thing, the GITHUB_CLIENT_ID with the one you configured in github in your settings.

If everything goes right and you can log in, the github page should redirect you to your github page you configured adding THE CODE at the end of the current URL :-)

Try to make that work first, then we continue.

[kiecoo]

@serapath

so cool XD
it so exciting to see it works & popups the page finally~

---

【Oauth-button-success】 it could connect to the github page

• https://codepen.io/kiecoo/pen/xYoOjK

• I am not sure if the-page which popups is the right page we want.

[kiecoo]

the module of get-userprofiles-from-github ( output ) seems fail to run.

---

I leave the one day not to run get-userprofiles-from-github� . I let it not to exceed the limit but it still couldn't run successfully. I have no idea about how to run it successfully.
(I remember that it could run when you &Nina help me build the npm & repo of this module last time in camp)

link: repo of get-userprofiles-from-github

[kiecoo]

@serapath
if we solve the problems of each module we met now, what would be the next step that you suggest?
( is the next step to start combing-all-the-module like #15 or else?

[kiecoo]

hosting a github gatekeeper server for free on heroku

I am not sure if this-photo-which-I-did is similar with what-you said?

[serapath]

nice

I am not sure if the-page which popups is the right page we want.

yes it is the right page, but it also says: Authorizing will redirect to https://github.com
You should instead configure your github page as a redirect, and not just github.com
...so that after the user allows it and signs in successfully, the browser goes automatically back to your page :-)

So this page: https://kiecoo.github.io/get-userprofiles-from-github/ should first display the "signup button" and then the redirect should be again to your page https://kiecoo.github.io/get-userprofiles-from-github/ ...but then you are signed in ...or at least you get from github a special code, which you can then use with heroku...

[serapath]

I am not sure if this-photo-which-I-did is similar with what-you said?

yes, that looks good.

is the next step to start combing-all-the-module like#15 or else?

yes, we will come there, but let's first finish or fix the github signup so that we dont have the api limit problem anymore :-)

...after that steps, it gets easy again.

[kiecoo]

@serapath

about [ instead configure the github page as a redirect, and not just github.com]

I am afraid I got wrong meaning of what you wrote . could you help me to check if the-photo-we-expect-to-be is right? if it's right,I could change it at the night of tomorrow.

---

<no.1>in the photo is according to

this page: https://kiecoo.github.io/get-userprofiles-from-github/ should first display the "signup button" and then the redirect should be again to your page

<no.2>of photo according to

it is the right page, but it also says: Authorizing will redirect to https://github.com
You should instead configure your github page as a redirect, and not just github.com

[serapath]

wow, you are really good in documenting all this stuff :-)
Yes, the <No.2> in the picture is exactly what i meant.

This address needs to change from https://github.com to your app which is exactly what you listed in the picture under <No.1>. You got it right :-)

You can change that on github where you configured the secret token key stuff for your app. There should be a form

[kiecoo]

@serapath

about [ instead configure the github page as a redirect, and not just github.com]

problem: could see this photo-to-show

in github Authorization callback URL: I wrote https://github.com/kiecoo/get-userprofiles-from-github
But the pup-up screen (<No.2>in the photo) shows “https://github.com/”