源碼: 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", ... }