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

Question

我正在尝试编写一个使用 Github API 并托管在 github.io 上的小应用程序
我正在关注 web application flow documentation可以概括为:

应用程序网页使用客户端 id 参数和将用户链接回应用程序网页的重定向 url 参数将用户重定向到 github.com

一旦用户在 github 端通过身份验证，他们将被重定向到带有临时代码参数的应用程序网页，该参数可用于获取解锁 API

的访问 token 。

从临时代码中获取访问 token 的 POST 请求需要提交客户端 ID 和客户端 key

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

Answer 1

正如您所注意到的，要检索 access_token您必须使用您的客户端 key 请求 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 凭证对您的用户是隐藏的。但是您的前端代码很干净。