使用 Github OAuth 时无需服务器的客户端身份验证答案

【问题标题】：Client-side authentication without server when using Github OAuth使用 Github OAuth 时无需服务器的客户端身份验证
【发布时间】：2020-09-07 16:14:40
【问题描述】：

我正在尝试编写一个使用 Github API 并托管在 github.io 上的小应用程序

我关注的web application flow documentation可以概括为：

应用程序网页使用客户端 id 参数和将用户链接回应用程序网页的重定向 url 参数将用户重定向到 github.com
一旦用户在 github 端通过身份验证，他们将被重定向到应用程序网页，其中包含一个临时代码参数，可用于获取解锁 API 的访问令牌
从临时代码中获取访问令牌的 POST 请求需要同时提交客户端 ID 和客户端密码

如果应用程序只是客户端（静态页面主机除外），我应该如何处理客户端密码？它不能嵌入到应用程序中，或者用户可以找到它。是否必须使用服务器来调解身份验证过程？

【问题讨论】：

标签： oauth

【解决方案1】：

如您所见，要检索 access_token，您必须使用您的客户端密码请求 API。你只是不能在你的前端代码中隐藏你的客户端秘密，因为它应该是秘密的。这意味着access_token 的检索将在您的后端进行。

您可以做的一件事是使用代号为 Pizzly 的开源 OAuth 管理器。您将它托管在 Heroku 或 Digital Ocean 实例上，并让它处理 OAuth-dance。

在您的前端，您将如何将用户连接到 GitHub 并检索 access_token：

const App = () => {

  // Initialize Pizzly
  const pizzly = new Pizzly({ host: PIZZLY_HOSTNAME, publishableKey: PIZZLY_PUBLISHABLE_KEY })

  // Use the GitHub API
  const github = pizzly.integration('github')

  // The connect method lets us authenticate a user
  // to our GitHub OAuth application
  const connect = () => {
    github
      .connect()
      .then(({ authId, payload }) => {
        console.log(authId, payload.accessToken)
      })
      .catch(console.error)
  }

  // ...
};

export default App;

要向 GitHub API 发出请求，您可以使用 payload.accessToken 或继续使用 Pizzly。这是how to use Pizzly with GitHub (in React)的完整指南。

这样，您的 API 凭据对您的用户仍然是隐藏的。但是你的前端代码是干净的。

【讨论】：