Use OAuth to Search a repository using Github

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:

jQuery - HTML element manipulation
- https://code.jquery.com/jquery-3.2.1.min.js
bootstrap, font-awesome - Look-and-feel of social buttons and icons
oauth-io javascript library - Simplifies OAuth usage by hiding the nuances in the OAuth implementation of various OAuth providers, e.g., LinkedIn, Twitter, etc. behind the ratified standard OAuth2 interface
- https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js

Step-by-step Guide

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

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

Using OAuth2 to Search a repository On Github

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