Question

我正在尝试使用GraphCool实现GitHub登录。到目前为止：

步骤

我跑了：graphcool add-template auth/github
我取消注释了graphcool.yml和typs.graphql文件
我设置了一个GitHub OAuth应用
我将我的客户名称和密码添加到本地环境变量中。
我跑了graphcool deploy

结果

在功能下，我说loggedInUser和githubAuthentication。我似乎还有一个githubUserId添加到createUser

问题

从这里我被困住了。我不知道该怎么做。我不知道在哪里获取github代码。我之前通过他们的API和Firebase实现了与Github的OAuth。我有以下问题：

在Github中，我应该如何设置授权回调网址？是不是需要指向graphcool？
如何启动OAuth弹出窗口，以便批准我的应用程序？
如何获取displayName和photoUrl等Github用户数据。我可以在createUser运行时将该数据添加到新用户吗？

我已经修改了用户名密码模板，以便在过去创建包含其他字段的用户。我知道我必须修改模板中的类型和.ts文件。我似乎可以在 githubAuthentication.ts 文件中获取第29行周围的特定用户详细信息：

const graphcool = fromEvent(event)
const api = graphcool.api('simple/v1')
const { githubCode } = event.data
const githubToken: string = await getGithubToken(githubCode)
const githubUser = await getGithubUser(githubToken)
const user: User = await getGraphcoolUser(api, githubUser.id)
  .then(r => r.User)
let userId: string | null = null

Answer 1

我不知道在哪里获取github代码。

简答：以通常的方式获取Github代码。

长答案：

您可以按照本指南查看如何针对Github OAuth应用进行授权：https://developer.github.com/apps/building-integrations/setting-up-and-registering-oauth-apps/about-authorization-options-for-oauth-apps/

或者，按照模板README.md：

中的说明操作

获取测试代码

首先，您只需在Github上更新OAuth应用程序的配置   创建：


将主页网址设为http://localhost:8000/

将应用程序回调URL设置为http://localhost:8000/login.html

将login.html中的 CLIENT_ID 替换为OAuth应用的客户端ID

服务器login.html，例如使用python -m SimpleHTTPServer

在浏览器中打开https://localhost:8000/login.html，打开DevTools并使用您的Github帐户进行身份验证

复制DevTools控制台中打印的代码

这是index.html：

<html>

<body>
  <script>
    // Github client id
    const client_id = '__CLIENT_ID__'
    // Will extract code from current url
    const githubCode = window.location.search.substring(1).split('&')[0].split('code=')[1]
    if (githubCode) {
      // call Graphcool authenticateGithubUser mutation
      console.log(githubCode)
    }
    function getgithubCode() {
      window.location = `https://github.com/login/oauth/authorize?client_id=${client_id}&scope=user`
    }
  </script>
  <button onclick="getgithubCode();">Authenticate with Github</button>
</body>

</html>

Answer 2

github的文档令人困惑。如果你使用http-server启动服务器，端口必须是localhost：8080，所以你可以更改端口8000-> 8080

此服务器用于获取githubCode。在代码中，如果您的应用程序的客户端ID有效，您可以在控制台中找到githubCode。我可以获得githubCode，但在此之后，突变有错误。

Github使用Graphcool登录

步骤

结果

问题

2 个答案: