React 社交登录按钮 - Javascript

本文将介绍如何通过 React 和 Javascript 来实现一款社交登录按钮，并为您提供完整的代码片段。（以下示例代码基于 React Hook）

1. 安装前置依赖

在开始之前，我们需要确保在您的项目中已经安装了 React 和样式库 react-icons。（安装方式请自行查询npm）

# 安装React
$ npm install --save react react-dom

# 安装react-icons
$ npm install --save react-icons

2. 创建社交登录按钮组件

现在我们可以开始创建社交登录按钮组件了。在此，我们将创建两个组件，其中一个为 SocialButton 组件，另一个为 SocialLoginButton 组件。

import React from 'react';
import PropTypes from 'prop-types';
import { FaFacebook, FaGithubAlt, FaGoogle } from 'react-icons/fa';

const SocialButton = ({ provider, onClick }) => {
  const icon = provider === 'facebook' ? <FaFacebook /> : provider === 'github' ? <FaGithubAlt /> : provider === 'google' ? <FaGoogle /> : null;

  return (
    <button className="social-login-btn" onClick={onClick}>
      <div className="social-icon">{icon}</div>
      <div className="social-text">{provider}</div>
    </button>
  );
};

SocialButton.propTypes = {
  provider: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

const SocialLoginButton = () => {
  const onClickSocial = (provider) => {
    window.location = `/auth/${provider}`;
  };

  return (
    <div>
      <SocialButton provider="facebook" onClick={() => onClickSocial('facebook')} />
      <SocialButton provider="github" onClick={() => onClickSocial('github')} />
      <SocialButton provider="google" onClick={() => onClickSocial('google')} />
    </div>
  );
};

export default SocialLoginButton;

上述组件中，SocialButton 组件渲染了一个按钮，用于点击时进行社交登录操作，同时根据传入的 provider 来动态加载对应图标和文字。而 SocialLoginButton 组件则用于将三个社交登录按钮组合起来，进行页面呈现。

3. 添加样式

为了让我们的社交登录按钮看起来更美观，我们需要为其添加一些样式。在此，我们使用 SCSS 样式语言来实现样式的编写。

.social-login-btn {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: white;
  box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
  font-size: 14px;

  &:hover {
    background-color: #f5f5f5;
  }

  .social-icon {
    font-size: 18px;
    margin-right: 10px;
  }

  .social-text {
    text-transform: capitalize;
  }

  &.facebook {
    background-color: #385898;
    color: white;

    &:hover {
      background-color: #29487d;
    }
  }

  &.github {
    background-color: #333;
    color: white;

    &:hover {
      background-color: #222;
    }
  }

  &.google {
    background-color: #de5246;
    color: white;

    &:hover {
      background-color: #cb3e27;
    }
  }
}

上述样式中，我们定义了 social-login-btn 类名所需的样式，并且根据不同的 provider 给按钮添加不同的样式。

4. 引用组件

现在，我们已经创建了社交登录按钮组件并为其添加了样式，下面是如何在代码中引用此组件：

import React from 'react';
import SocialLoginButton from './SocialLoginButton';

const App = () => {
  return (
    <div className="app">
      <h1>Welcome to my App!</h1>
      <SocialLoginButton />
    </div>
  );
};

export default App;

从上述代码中可以看到，我们在 App 组件中使用 SocialLoginButton 组件，将三个社交登录按钮进行了嵌套，并显示在页面上。

5. 结语

恭喜，你已经成功创建了一款 React 社交登录按钮。厉害吧！可以使用此组件加速您的开发，或基于此组件进行更多功能的扩展。

完整示例代码：

import React from 'react';
import PropTypes from 'prop-types';
import { FaFacebook, FaGithubAlt, FaGoogle } from 'react-icons/fa';
import './SocialLoginButton.scss';

const SocialButton = ({ provider, onClick }) => {
  const icon = provider === 'facebook' ? <FaFacebook /> : provider === 'github' ? <FaGithubAlt /> : provider === 'google' ? <FaGoogle /> : null;

  return (
    <button className={`social-login-btn ${provider}`} onClick={onClick}>
      <div className="social-icon">{icon}</div>
      <div className="social-text">{provider}</div>
    </button>
  );
};

SocialButton.propTypes = {
  provider: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

const SocialLoginButton = () => {
  const onClickSocial = (provider) => {
    window.location = `/auth/${provider}`;
  };

  return (
    <div>
      <SocialButton provider="facebook" onClick={() => onClickSocial('facebook')} />
      <SocialButton provider="github" onClick={() => onClickSocial('github')} />
      <SocialButton provider="google" onClick={() => onClickSocial('google')} />
    </div>
  );
};

export default SocialLoginButton;