Using OAuth2 to Search a repository On Github

If API is already deprecated, please report it by using this button

Goal

We wanted to find the easiest way to use OAuth to search for a Github repository using Javascript. Here is how we did it with OAuth.io.

Code Snippet

We have created a javascript snippet. Once you log in with your Github account it will get the list of all repositories with 'oauth-io' mentions in it. Feel free to tweak it to get different repositories.

https://jsfiddle.net/yk1zpLbu/

Code Explanation:

HTML

<a id="github-button" class="btn btn-block btn-social btn-vimeo">
  <i class="fa"></i> Get repositories
</a>

CSS

None

JavaScript

$('#github-button').on('click', function() {
    // Initialize with your OAuth.io app public key
    OAuth.initialize('txp2rKYpuKZXaaYC5kB-m13KnVE');
  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('github').then(provider => {
    console.log('provider:', provider);

    provider.get('/search/repositories?q=oauth-io').then(data => {
      console.log('Repositories:', data);
    });
    });
})

External Requirements

This Javascript code has external requirements:

Step-by-step Guide

Here is a summary of the steps to create this social button to search Github repositories using OAuth2.

  1. Create a Github account, if you do not have one
  2. Create an app on Github using this simple step-by-step guide
  3. Copy your Github app client id and client secret
  4. Signup for OAuth.io account
  5. Link your Github app with OAuth.io by pasting your Github app client id and client secret into OAuth.io
  6. Copy the OAuth javascript snippet (https://jsfiddle.net/yk1zpLbu/) on to your web page

Live example code for using OAuth to Search a repository via Github