react 接入google第三方登录
时间: 2023-08-17 20:15:56 浏览: 83
要在React应用中接入Google第三方登录,你可以按照以下步骤进行操作:
1. 创建Google API凭据:
- 访问Google开发者控制台(https://console.developers.google.com)并登录。
- 创建一个新的项目或选择现有项目。
- 在项目概览页面,点击左侧导航栏中的“API和服务”>“凭据”。
- 点击“创建凭据”按钮,选择“OAuth 客户端 ID”选项。
- 配置OAuth客户端ID,将“授权回调URL”设置为你的应用的回调URL(例如:http://localhost:3000/callback)。
- 点击“创建”按钮,将生成的客户端ID和客户端秘钥保存下来。
2. 在React应用中安装依赖:
- 打开终端,进入你的React项目目录。
- 运行以下命令安装`react-google-login`库:
```
npm install react-google-login
```
3. 在React组件中使用Google登录:
- 在你的React组件中,导入`react-google-login`库:
```javascript
import { GoogleLogin } from 'react-google-login';
```
- 在组件中添加Google登录按钮并处理登录回调:
```javascript
const responseGoogle = (response) => {
console.log(response);
// 在这里处理登录成功后的逻辑
};
const GoogleLoginButton = () => {
return (
<GoogleLogin
clientId="YOUR_CLIENT_ID"
buttonText="使用Google登录"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
/>
);
};
```
- 将`YOUR_CLIENT_ID`替换为你在第1步中获得的Google API凭据的客户端ID。
4. 运行React应用:
- 在终端中运行以下命令启动React应用:
```
npm start
```
现在,你的React应用应该已经添加了Google第三方登录功能。当用户点击Google登录按钮并完成授权后,将触发`responseGoogle`回调函数,你可以在其中处理登录成功后的逻辑。