guumaster
5/31/2016 - 2:12 PM

Github OAuth Webflow

Github OAuth Webflow

server.js
content_copyfile_download
const restify = require('restify') 
const request = require('request-promise') 
 
const server = restify.createServer({ 
 name: process.env.APPNAME || 'MyApp', 
 port: process.env.PORT || 8080 
}) 
 
const CLIENT_ID = process.env.GH_CLIENT_ID
const CLIENT_SECRET = process.env.GH_CLIENT_SECRET
const URL = `https://github.com/login/oauth/access_token?client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}&code=` 
 
const codeExchanger = (req, res, next) => { 
 console.log(`Exchanging code ${req.body.code} for an access token`) 
 
 request({ 
 url: `${URL}${req.body.code}`, 
 method: 'POST', 
 json:true 
 }) 
 .then(data => { 
   console.log('Access token obtained') 
   res.send(200, data) 
 }) 
 .catch(next) 
} 
 
server.use(restify.bodyParser()) 
 
server.post('/exchanger', codeExchanger) 
 
server.get('.*', restify.serveStatic({ directory: './', default: 'index.html' })) 
 
server.listen(process.env.PORT || 8080)
index.html
content_copyfile_download
<html> 
 
 <head> 
 <script src="https://code.jquery.com/jquery-2.2.3.js"></script> 
 <script src="//npmcdn.com/github-api/dist/GitHub.bundle.min.js"></script> 
 </head> 
 <body> 
 Add your CLIENT_ID: <input type="text" id="clientId" /> 
 <br />
 <button id="go">Start</button> 
 <button id="code" class="hide">Exchange Code</button> 
 <br />
 Access Token: <span id="token"></span>
 
 <script> 
$(function() { 
 
 const startFlow = e => window.location = `https://github.com/login/oauth/authorize?client_id=${$('#clientId').val()}` 
 const exchangeCode = e => { 
 let [,code] = window.location.href.match(/code=([^&]+)/) 
 
 if (!code) return false 
 
 $.ajax({ 
    url: '/exchanger', 
    data: JSON.stringify({ code }), 
    json: true, 
    contentType: 'application/json; charset=utf-8', 
    method: 'POST', 
    dataType: 'json' 
  }) 
  .done(res => { 
    $('#token').empty().append(res)
  }) 
  .fail(err => { 
    console.log('err', err) 
  }) 
 } 
 
 $('#go').on('click', startFlow) 
 $('#code').on('click', exchangeCode) 
 
}) 
 </script> 
 </body> 
</html>
Github OAuth Webflow.md
content_copyfile_download
  • Rendered
  • Source

Deps

npm i -S restify request-promise

Usage

Launch the server with GH_CLIENT_ID=<YOUR_CLIENT_ID> GH_SECRET_ID=<YOUR_SECRET_ID> node server.js

Open http://localhost:8080/, add your GitHub app CLIENT_ID and click "Start" button, it'll go to github and back with a code. Then click on "change" button and get your access token.

TODO

  • Do it more nicely.