使用 OAuth 和 Auth0 进行身份验证后获取 Github repo 数据

Posted 2023-03-09

【中文标题】使用 OAuth 和 Auth0 进行身份验证后获取 Github repo 数据

【英文标题】：Get Github repo data after authenticating with OAuth and Auth0

【发布时间】：2018-01-23 08:52:30

【问题描述】：

我想做的是从一个小型应用程序中获取私有 repo 数据（问题数量）。

因为我不想在请求中公开我的personal github access_token，所以我搜索了另一个我认为是 OAuth 的解决方案。

所以我按照these 和these 的步骤设置了OAuth。

并将社交 github 设置中 Auth0 中的权限设置为 repo（授予 repos 的读/写访问权限）。

到目前为止一切正常，我可以使用我的 github 帐户进行身份验证。

但现在我不知道我必须使用哪个token 将我的request 发送到github API。

这是我到目前为止的相关代码：

const  handleAuthentication = () => 
  webAuth.parseHash((err, authResult) => 
    if (authResult && authResult.accessToken && authResult.idToken) 
      window.location.hash = '';
      setSession(authResult);

      //here the call to the relevant function
      getIssues('my-element', /*here i should pass the correct token*/); //tryed all tokens i found in authResult

     else if (err) 
      alert(
        `Error: $err.error . Check the console for further details.`
      );
    
  );


const getIssues = (element, token) => 
  const request = new XMLHttpRequest();
  request.open('GET', `https://api.github.com/repos/my_organization/element-$element/issues?access_token=$token`, true);

  request.onload = () => 
    if (request.status >= 200 && request.status < 400) 
      const data = JSON.parse(request.responseText);
      //use the data
     else 
      console.log('error');
    
  ;

  request.onerror = function(e) 
    console.log('connection error: ', e)
  ;

  request.send();

但这会导致 401（未经授权）响应。

我没有经常使用XMLHttpRequests，我敢肯定，我在这里遗漏了一些基本的东西。

现在我什至不确定 oAuth 是否是实现我想要的正确方法。

任何帮助将不胜感激。

编辑：

与此同时，我做了更多研究并发现 (here)，缺少一些步骤来获取正确的用户 access_token 以连接到 github api。

我会尝试完成这些步骤，如果可行，我会发布答案。

如果有人知道如何做到这一点，仍然会很感激一个明确的答案。

【问题讨论】：

可能问题出在用于创建 URL 的语法上。这一行有一个类似的问题 - (***.com/questions/45277612/…)

@Poonacha 使用与我个人 access_token 作品相同的语法，所以我不认为这是问题

【参考方案1】：

要获取 repo 的问题列表，请调用此 API 端点：

https://api.github.com/repos/$owner/$repository/issues

$owner 是组织名称（不是您的 github 用户名），$repo 是您要列出问题的存储库。

作为参考，文档在这里：https://developer.github.com/v3/issues/#list-issues-for-a-repository。然而，就像很多 OAuth 端点文档一样，这很神秘，因此需要数小时的修补。

有一个实时工作代码 sn-p，以便您可以查看示例代码，对其进行测试和调整：https://jsfiddle.net/son74dj2/

代码sn-p解释如下。

它使用https://oauth.io 服务及其 SDK（下面代码中的 OAuth 类），这不是必需的。然而，OAuth.io 使您能够仅使用前端（例如 javascript）来实现 OAuth 流程，因此实时工作代码 sn-p 可以自包含在一个 jsfiddle 中，可以轻松共享、调整、测试甚至只是剪切-并粘贴在您的网站上。

$('#github-button').on('click', function() 

    // Initialize with your OAuth.io app public key
    OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY');

    // Use popup for oauth
    OAuth.popup('github').then(provider => 

        const repository = 'YOUR REPOSITORY';

        const owner = 'REPOSITORY OWNER';

        provider.get(`/repos/$owner/$repository/issues`).then(data => 
            alert('Now you could see list of issues in the console!')
            console.log('Issue list:', data);
        )
    );
)

希望这有助于帮助您理解和测试端点，而无需花费数小时来弄清楚文档以及修改 url 和参数。

注意：您需要有权访问 repo，repo 所有者需要授予您权限。截图详情见原文：https://tome.oauth.io/providers/github/get-repository-issue-list