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

我想让用户使用github登录我的web应用程序（之后我可以使用他们的姓名/电子邮件等），就像你可以使用Google或Facebook在stackoverflow中唱歌一样。我知道您必须让用户登录github，一旦他们验证了您的应用程序，您就可以从用户重定向到的页面的url中检索代码，并使用该代码发出POST请求以获取访问代码，您可以使用该代码访问github API。但是，当我对访问代码发出POST请求时，我得到一个CORS错误：

未能加载…：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。因此，不允许访问源“”

响应的HTTP状态代码为404

这是我的发帖请求：

$.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应用程序甚至需要有经验的开发人员数天甚至数周才能实现。 不过，正如你所问的，我会尽力解释的

首先，你必须注册你的应用（）。 你需要知道你的应用程序在哪里。例如，我的在 然后你会得到一个客户ID——把它保存在某个地方

接下来，你需要决定你的应用程序需要什么范围。我将使用

read:user

，但可用作用域的完整列表位于

现在，您已经获得了创建要将用户发送到的URL所需的大部分内容。我将使用

window.location.href

发送它们。 您的URL看起来像

https://github.com/login/oauth/authorize?client_id=&redirect_uri=&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

的参数将您重定向回

redirect\u uri

，例如

https://JoelEllis.github.io/github-oauth-app/index.html?code=3413cabd1c1a8ba9765f

。 接下来，您需要将其转换为访问令牌

为此，您需要向URL发送post请求

不幸的是，如果没有客户机机密，这是无法做到的，在大多数情况下，浏览器中的CORB/CORS会阻止这一点。这意味着在浏览器中获取（或使用）访问令牌是一个坏主意。永远不要泄露客户机密，因为它允许攻击者假装是你

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

您可以在php中使用

$\u GET[“code”]

读取查询字符串，在nodejs的express中使用

req.query.code

要发出post请求，您需要您的

客户id

、您的

客户机密

（与您获得客户id的页面相同）以及GitHub提供的代码。您可以使用它们创建要发布的URL。它将如下所示：

https://github.com/login/oauth/access_token/?client_id=&client_secret=&code=

。这是我的：

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-urlencoded\r\nUser-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\u-token=7d914db556648258e54a37184c9b07d129ab0891&scope=read%3Auser&token\u-type=bearer

的内容。只需将其添加到请求的末尾即可获得响应，例如

curlhttps://api.github.com/user/email?

+

访问令牌=7d914db556648258e54a37184c9b07d129ab0891&scope=read%3Auser&token\u type=bearer

---

完整文档可在和中找到。您可以在

Access Control Allow Origin

上看到获取用户信息的文档是响应标题。它们必须由您希望从中获得权限的服务器提供。您不能将它们放在请求头中。他们是不允许的。我透露我的客户秘密只是为了演示的目的，请不要滥用它wink：示例URL是我制作的一个实际演示，它返回您需要在服务器上发布的URL。谢谢您的精彩回答！我做了你提到的所有事情，但是我在把代码转换成访问令牌的过程中遇到了麻烦。就像你说的，我遇到了一个CORS错误，我不知道如何绕过它。如果有帮助，我将使用localhost（在XAMPP服务器上）。我的发帖请求是最初的问题——我认为与你的相比，它看起来是正确的。谢谢@Inorieric您不能在浏览器中执行代码来访问令牌转换，您必须指定一个用户代理—这是我一直坚持的一点。；）在node.js服务器上，这将是

const request=require（'request'）；request.post（{url:'https://github.com/login/oauth/access_token/?client_id=847b5bc9c960a03d3435&client_secret=92a2e6ac30db45612c4ed6ee4fbca22a95370807&code=“+req.query.code，标题：{‘用户代理’：‘请求’}