时间戳

首页 > 解决方案 > 如何在我的网络应用程序中集成 github 登录（JavaScript）

javascript - 如何在我的网络应用程序中集成 github 登录（JavaScript）

问题描述

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

无法加载https://github.com/login/oauth/access_token?client_id=7...&client_secret=b...&code=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');
    }

});

我该如何纠正这个问题，以便我可以集成登录？

编辑：我不能使用像看门人这样的外部应用程序。这是一个测试网站，但最终将用于公司的网站。

标签： javascriptgithubcorsgithub-api

解决方案

您要问的是相当复杂的，大多数 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。

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

为此，您需要向该 URL 发送一个发布请求。

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

您将需要一台服务器（可以是本地的）来执行此操作之外的所有操作。

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

要发出发布请求，您需要您的client_id、您的client_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-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_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/查看获取用户信息的文档

推荐阅读