React용 소셜 로그인 라이브러리(React Social Login)

개요

자사 시스템으로 구글과 페이스북 등 SNS에 접속하는 경우가 이제는 많이 느껴진다.각 회사가 SDK를 준비했지만 회사마다 SDK를 가져와 논리를 짜는 것도 귀찮다.이런 상황에서 리액트에서 소셜 로그인용 프로그램 라이브러리를 찾았으니 소개해 드리겠습니다.

라이브러리 컨텐트

이번에 소개된 라이브러리는 React Social Login입니다.github의 페이지와 같이 페이스북, GiitHub, Google 등의 로그인을 지원합니다.삽입식 자체도 간단하게 실현할 수 있으며 준비된 구성 요소에 대해 공급업체와 AppId를 지정하면 기본적으로 설치가 완료된다.

샘플

github의 페이지 내용은 기본적으로 그대로 유지되며 Google 로그인의 경우 샘플이 설치됩니다.
우선 창고에서 준비한 반에서 신선도 유지 버튼에 사용할 부품을 준비하세요.
SocialButton.js

import React from "react";
import SocialLogin from "react-social-login";

class SocialButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.triggerLogin} {...this.props}>
        {this.props.children}
      </button>
    );
  }
}

export default SocialLogin(SocialButton);

그런 다음 실제 공급업체와 해당 공급업체가 받은 AppID를 지정합니다.다음은 Google의 예입니다.
GoogleAuthComponent.js

import React from "react";
import SocialButton from "../SocialButton";

export default function GoogleAuthComponent() {
  
  const handleSocialLogin = (user) => {
    console.log(user);
  };

  const handleSocialLoginFailure = (err) => {
    console.error(err);
  };

  return (
    <div>
      <SocialButton
        provider="google"
        appId={process.env.GOOGLE_LOGIN_APP_ID}
        onLoginSuccess={handleSocialLogin}
        onLoginFailure={handleSocialLoginFailure}
      >
        Googleログイン
      </SocialButton>
    </div>
  );
}

로그인에 성공하면user의 정보를 얻을 수 있으며, 이후의 후속 처리는 개별적으로 실시됩니다.