源码: https://github.com/DawnyWu/react-github-oauth-demo166javascript
首先到github注册本身的应用，获得client_id 和 client_secrethtml
Github Oauth认证的简单过程为
- 用本身的client_id建立连接，用户访问连接，来到Github认证页面，在认证成功后的重定向连接中得到code参数
- 用步骤1中的code参数加上client_id，client_secret，请求Github,得到access_token
- 获得access_token，即可请求其它Github api,得到用户信息
实现细节
因为是单页应用，github认证页面咱们选择在新的浏览器window中显示java
建立一个按钮，用户点击后弹出新window，window访问Github认证连接react
<div className='btn btn-default' onClick={this.githubLogin.bind(this)}>Github</div>
// 打开新窗口，访问的连接中须要填入你的`client_id` let popWin = window.open(`https://github.com/login/oauth/authorize?client_id=${client_id}`, null, "width=600,height=400")
查看返回的连接中是否有code参数，若是有就关闭窗口，触发code事件ios
let intervalId = setInterval(checkCode, 1000); let checkCode = () => { try { let query = popWin.location.search.substring(1) code = querystring.parse(query).code if((typeof code)!=='undefined'){ clearInterval(intervalId) popWin.close() eventEmitter.emit('code', code); } } catch (err){} }
咱们获得了code,下面要进行步骤2，得到access_token,可是这里有一个问题:git
经过POST来得到access_token的连接https://github.com/login/oauth/access_token12是不支持CORS的。这是出于安全方面的考虑。若是你在浏览器中请求它会报错误，详情和具体缘由在这里17有所阐述。github
这个问题的解决问题的办法是client经过访问后台接口来得到access_token,向Github请求access_token的工做由server完成json
router.get('/githubToken', function (req, res) { var client_id = client_id // 你的client_id var client_secret = client_secret // 你的client_secret var code = req.query.code var access_token axios.post('https://github.com/login/oauth/access_token', {code: code, client_id: client_id, client_secret: client_secret}) .then(function (response) { access_token = querystring.parse(response.data).access_token res.json({ access_token: access_token }) }) })
获得access_token,即可以访问Github api，得到用户信息了axios
GET https://api.github.com/user?access_token=XXXXXXXXXXXXXXXX
转自：http://react-china.org/t/react-github-oauth/4986{
"login":"DawnyWu", "id":949508, "avatar_url":"https://avatars.githubusercontent.com/u/949508?v=3", "gravatar_id":"", "url":"https://api.github.com/users/DawnyWu", "html_url":"https://github.com/DawnyWu", ... }