教你如何用 React 实现 Github OAuth 验证

源码: https://github.com/DawnyWu/react-github-oauth-demo166

首先到github注册自己的应用，得到client_id 和 client_secret

Github Oauth认证的简单过程为

用自己的client_id创建链接，用户访问链接，来到Github认证页面，在认证成功后的重定向链接中获得code参数
用步骤1中的code参数加上client_id，client_secret，请求Github,获得access_token
得到access_token，便可请求其它Github api,获得用户信息

实现细节

由于是单页应用，github认证页面我们选择在新的浏览器window中显示

创建一个按钮，用户点击后弹出新window，window访问Github认证链接

 <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事件

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,但是这里有一个问题:

通过POST来获得access_token的链接https://github.com/login/oauth/access_token12是不支持CORS的。这是出于安全方面的考虑。如果你在浏览器中请求它会报错误，详情和具体原因在这里17有所阐述。

这个问题的解决问题的办法是client通过访问后台接口来获得access_token,向Github请求access_token的工作由server完成

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，获得用户信息了

 GET https://api.github.com/user?access_token=XXXXXXXXXXXXXXXX

{
"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", ... }

转自：http://react-china.org/t/react-github-oauth/4986

教你如何用 React 实现 Github OAuth 验证

Github Oauth认证的简单过程为

实现细节

猜你喜欢