[React] SNS 소셜로그인 (Facebook)

개발자_범·2023년 4월 16일

WebView를 통한 facebook 소셜로그인이 정책상 2021년부터 로그인을 막아놓는 바람에
~~다시작업 하..~~

해결방법
Facebook sdk를 사용한 소셜로그인 개발

FACEBOOK SDK란?

Facebook SDK(software development kit)는 Facebook에서 제공하는 소프트웨어 개발 도구 모음으로, Facebook 플랫폼에 애플리케이션을 개발할 때 사용됩니다.

그래서 글쓴이가 했던 순서는 다음과 같다.
1. facebook developer 사이트 접속
2. 로그인 후 앱 등록
3. facebook 로그인 플랫폼추가
4. 공식문서에 나온 코드로 react 자바스크립트 소셜로그인 개발

이러하다.

그러면
첫번째부터

접속 후에 상단 오른쪽에 "내 앱" 클릭!

오른쪽 상단 "앱 만들기" 버튼으로 등록을 하면 된다. 글쓴이는 이미 있기에 등록은 따로 하지 않도록 하겠슴다. 앱에 들어가면 react에서 facebook로그인을 할 때 사용할 app_id가 있다.

그 다음 설정 -> 기본설정에 들어가서 맨 밑에 플랫폼 선택란에 Website가 있다. 선택!
그 다음 플랫폼 설정창에 유효한 OAuth 리디렉션 URI가 있는데 입력을 하자!

이제 설정은 끝났으니 개발에 들어가보면 된다.

코드는 우리의 갓 GPT형이 있기에 쉽게 할 줄 알았는데

class FacebookButton extends React.Component {
componentDidMount() {
  // Facebook SDK 초기화
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '591938726219696',
      cookie     : true,
      xfbml      : true,
      version    : 'v12.0' // SDK 버전 정보
    });
  };
  
  // Facebook SDK 로드
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
}

responseFacebook = (response) => {
  console.log(response);
  // 여기서 소셜미디어사로부터 전달받은 사용자 정보를 가공하거나 저장합니다.
}

render() {
  return (
    <FacebookLogin
      appId="591938726219696"
      autoLoad={false}
      fields="name,email,picture"
      callback={this.responseFacebook}
      render={renderProps => (
        <button onClick={renderProps.onClick}>Facebook으로 로그인</button>
      )}
    />
  )
}
}

다음과 같았다. 하지만 sdk 로드, sdk 초기화를 일일히 코드에 썼지만

react-facebook-login

이라는 라이브러리 설치를 통해서

class FacebookButton extends React.Component {
responseFacebook = (response) => {
console.log(response);
// 여기서 소셜미디어사로부터 전달받은 사용자 정보를 가공하거나 저장합니다.
}

render() {
return (
  <FacebookLogin
    appId="591938726219696"
    autoLoad={false}
    fields="name,email,picture"
    callback={this.responseFacebook}
    render={renderProps => (
      <button onClick={renderProps.onClick}>Facebook으로 로그인</button>
    )}
  />
)
}
}

이렇게 줄여주면 된다.
하지만 여기서 끝이 아니다. 현재 facebook login은 보안이유로 HTTP를 지원하지 않으며, HTTPS를 사용해야 한다. localhost에서 테스트를 하기 위해 개발용 SSL 인증서를 발급하였다.
쨔쟌!
실행을 한 다음