我遇到一个场景,该场景需要在React 应用中实现“使用Github登录”功能。虽然这听起来很简单,但在尝试做这件事时,你可能会遇到一些麻烦。因此,本文的目的是提供一个指南,帮助你在你的应用程序中实现这样的功能。让我们现在就开始吧!
步骤1:在Github上创建OAuth应用
按照此处提供的步骤登录到你的Github帐户并创建OAuth应用。注意:对于本例,在创建OAuth应用时,如果你在本地运行应用,可以将主页URL设置为http://localhost:3000/,将授权回调URL设置为http://localhost:3000/login。在根目录下创建一个 .env
文件,并设置这些变量:
REACT_APP_CLIENT_ID=你的Client ID REACT_APP_CLIENT_SECRET=你的Client Secret REACT_APP_REDIRECT_URI=http://localhost:3000/login 复制代码
步骤2:创建React应用
继续使用你的首选来创建你的react应用程序,在这个例子中,我们将使用Create-React-App。如果你使用这种模式,你必须删除index.css、App.css、App.test.js和serviceWorker.js等文件。编辑index.js,确保它看起来像这样