[React] 소셜로그인-FaceBook2 (code,accessToken얻기)

SDK 사용하지 않고 직접 페이스북에서 code, accessToken을 얻고 싶었다. 아래 두 사이트를 참고하여 코드를 작성했다.

페이스북은 정보가 너무 없어서 찾느라 고생했다.😵

 

https://developers.facebook.com/docs/facebook-login/guides/advanced/manual-flow

로그인 플로 직접 빌드 - Facebook 로그인 - 문서 - Meta for Developers

https://teserre.tistory.com/21

[PHP]페이스북 로그인 연동하기(curl 사용)

 

따로 js 파일을 만들어 .env에서 값을 빼내 사용할 값을 저장했다.(state는 랜덤한 값)

(FACEBOOK_AUTH_URL는 버튼 클릭시 함수 안에 indow.location.href = FACEBOOK_AUTH_URL; 값으로 사용된다.)

//FaceBook
export const FACEBOOK_CLIENT_ID = process.env.REACT_APP_FACEBOOK_CLIENT_ID;
export const FACEBOOK_CLIENT_SECRET =
  process.env.REACT_APP_FACEBOOK_CLIENT_SECRET;
export const FACEBOOK_REDIRECT_URI =
  process.env.REACT_APP_FACEBOOK_REDIRECT_URI;

export const FACEBOOK_AUTH_URL = `https://www.facebook.com/v16.0/dialog/oauth?
  client_id=${FACEBOOK_CLIENT_ID}&redirect_uri=${FACEBOOK_REDIRECT_URI}&state=${Math.random()
  .toString(36)
  .substring(3, 14)}&scope=public_profile,email`;

export const FACEBOOK_TOKEN_URL = `https://graph.facebook.com/v16.0/oauth/access_token`;

 

페이스북페이지에서 로그인후 redirect_url 로 넘어오는 페이지의 컴포넌트 파일에 작성한다.

code를 받고 다시 get을 통해 token url에 넘겨주어 access_token을 전달받는다.

export default function FaceBookeLogin() {
  const code = new URL(window.location.href).searchParams.get('code');

  console.log(code);

  const getToken = async () => {
    try {
      const datas = await axios.get(
        `${FACEBOOK_TOKEN_URL}?client_id=${FACEBOOK_CLIENT_ID}&redirect_uri=${FACEBOOK_REDIRECT_URI}&client_secret=${FACEBOOK_CLIENT_SECRET}&code=${code}`
      );
     
      const ACCESS_TOKEN = datas.data.access_token;

      localStorage.setItem('token', ACCESS_TOKEN);
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    getToken();
  }, []);

  return <div>Loading...</div>;
}