如何在我的web应用程序(JavaScript)中集成github登录



我想让用户使用github登录我的网络应用程序(之后我可以使用他们的姓名/电子邮件等(,就像你可以使用谷歌或脸书在stackoverflow中唱歌一样。我知道你必须将用户带到github登录,一旦他们验证了你的应用程序,你就可以从用户重定向到的页面的url中检索代码,并使用该代码进行POST请求以获得访问代码,你可以使用该代码访问github API。然而,当我对访问代码进行POST请求时,我得到了一个CORS错误:

加载失败https://github.com/login/oauth/access_token?client_id=7...&client_secret=b&代码=f…:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在"access control Allow Origin"标头。原点'http://localhost因此不允许访问。

响应的HTTP状态代码为404。

这是我的POST请求:

$.ajax (
{
url:"https://github.com/login/oauth/access_token?client_id=7...&client_secret=b...&code=" + authCode, // Extraction of authCode has no bugs

type:'POST',
dataType:'json',
success: function() {
alert('success');
},
error: function() {
alert('error');
}
});

如何更正此问题以便集成登录?

编辑:我不能使用像gatekeeper这样的外部应用程序。这是一个测试网站,但最终将用于一家公司的网站。

您的要求非常复杂,大多数OAuth应用程序甚至需要经验丰富的开发人员几天甚至几周的时间才能实现。然而,正如你所问的,我会尽力解释。

首先,你必须注册你的应用程序(https://github.com/settings/applications/new)。你需要知道你的应用程序在哪里。例如,我的应用程序位于https://JoelEllis.github.io/github-oauth-app/index.html然后你会得到一个客户端ID——把它保存在某个地方。它会是这样的。

接下来,你需要决定你的应用程序需要什么范围。我将使用read:user,但可用作用域的完整列表位于https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/.

现在,您已经获得了创建用户发送到的URL所需的大部分内容。我将使用window.location.href发送它们。您的URL将看起来像https://github.com/login/oauth/authorize?client_id=<client-id>&redirect_uri=<redirect_uri>&scope=<scope>。我的是https://github.com/login/oauth/authorize?client_id=8681b227337ec96cd168&redirect_uri=https://JoelEllis.github.io/github-oauth-app/index.html&scope=read:user

接下来,GitHub将使用一个名为code的参数(例如https://JoelEllis.github.io/github-oauth-app/index.html?code=3413cabd1c1a8ba9765f(将您重定向回redirect_uri。接下来,您需要将其转换为访问令牌。

要做到这一点,你需要向URL发送一个帖子请求。

不幸的是,如果没有客户端机密,这是无法实现的,在大多数情况下,浏览器中的CORB/CORS会阻止它。这意味着在浏览器中获取(或使用(访问令牌是一个糟糕的想法。客户的秘密永远不应该被泄露,因为它允许攻击者假装是你。

您需要一个服务器(可以是本地服务器(来完成这一点之外的所有工作。

您可以使用$_GET["code"]在php中读取查询字符串,并使用req.query.code在nodejs的express中读取查询串

要进行发布请求,您需要client_idclient_secret(来自获得客户端id的同一页面(以及GitHub提供的代码。您可以使用它们来创建要发布的URL。它看起来是这样的:https://github.com/login/oauth/access_token/?client_id=<clientid>&client_secret=<clientsecret>&code=<usercode>。这是我的:https://github.com/login/oauth/access_token/?client_id=8681b227337ec96cd168&client_secret=6aaf90fef31d8586da40f3eb90cbc478a1e8b948&code=ba82f2915511cea98ea8

要使用PHP发布,您可以使用

$url = 'https://github.com/login/oauth/access_token/';
$data = array('key1' => 'value1', 'key2' => 'value2');
'http' => array(
'header'  => "Content-type: application/x-www-form-urlencodedrnUser-Agent: MyApp",
'method'  => 'POST',
'content' => http_build_query($data)
)
$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);

使用nodejs:

var request = require('request')
request.post({
url: 'https://github.com/login/oauth/access_token/?client_id=847b5bc9c960a03d3435&client_secret=92a2e6ac30db45612c4ed6ee4fbca22a95370807&code=' + req.query.code,
headers: {
'User-Agent': 'request'
}
}, function (error, response, body) {
console.log('hi2');
console.log(body);
})

当你发布它时,它会返回类似access_token=7d914db556648258e54a37184c9b07d129ab0891&scope=read%3Auser&token_type=bearer的内容。只需将其添加到请求的末尾即可获得响应,例如curl https://api.github.com/user/email?+access_token=7d914db556648258e54a37184c9b07d129ab0891&scope=read%3Auser&token_type=bearer

完整文档可在https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/和https://developer.github.com/v3/.您可以在上查看获取用户信息的文档https://developer.github.com/v3/users/

相关内容

  • 没有找到相关文章

最新更新