--- title: 리액트에서 페이스북 로그인 구현: 개발자 가이드 slug: docs-kr/react/working-with-users/react-facebook-login description: 리액트 앱에서 react-facebook-login을 활용해 페이스북 로그인을 구현하고 Parse로 사용자 인증을 연결하는 방법을 배워보세요. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-19T17:19:48.511Z --- # 리액트 페이스북 로그인 ## 소개 지난 튜토리얼에서는 `Parse.User` 클래스를 사용하여 앱에 사용자 로그인/로그아웃 기능을 추가했습니다. 이제 페이스북 로그인을 사용하여 페이스북에서 사용자 데이터를 가져오고, 로그인하거나 가입하거나 기존 사용자와 연결하는 방법을 배울 것입니다. 또한 이를 달성하기 위해 `react-facebook-login` 라이브러리를 설치하고 구성할 것입니다. `Parse.User.linkWith` 메서드는 각기 다른 제공자가 요청하는 올바른 매개변수를 전달하는 한, 모든 서드파티 인증 방법을 사용하여 사용자를 가입시키고 로그인시키는 역할을 합니다. 사용자 데이터를 새 또는 기존 `Parse.User`에 연결한 후, Parse는 귀하의 장치에 유효한 사용자 세션을 저장합니다. 이후 `current` 과 같은 메서드를 호출하면 일반 로그인과 마찬가지로 사용자 데이터를 성공적으로 검색할 수 있습니다. ## 전제 조건 :::hint{type="info"} 이 튜토리얼을 완료하려면 다음이 필요합니다: - React 앱이 생성되고 [Back4App에 연결됨](https://www.back4app.com/docs/react/quickstart). - 이전 가이드를 완료하여 [Parse.User 클래스와 Parse.User.logIn 메서드에 대한 더 나은 이해를 가질 수 있습니다.](https://www.back4app.com/docs/react/working-with-users/react-user-login) - 이 가이드에서 제공하는 화면 레이아웃을 테스트/사용하려면 [`Ant Design` 라이브러리를 설정해야 합니다.](https://ant.design/docs/react/introduce) ::: ## 목표 React 앱에서 Parse를 사용하여 Facebook 로그인을 통한 사용자 로그인 기능을 구축합니다. ## 1 - 의존성 설치 React에서 Facebook 로그인을 활성화하는 가장 인기 있는 방법은 `react-facebook-login`을 사용하는 것입니다. [공식 문서](https://github.com/keppelen/react-facebook-login/)를 따라 설정하세요. lib 구성 요소를 사용하려면 유효한 Facebook 앱 `appID`, 을 알려야 하므로, Facebook for Developers 대시보드에서 하나를 생성하세요. 그들의 [공식 가이드](https://developers.facebook.com/docs/development/create-an-app/). 그 후, 앱에 Facebook 로그인 기능을 추가하고 WWW 옵션을 선택하여 `https://localhost:3000`을 웹사이트 URL로 입력하세요. Facebook 로그인을 사용하려면 연결이 안전해야 하며, 개발 환경에서 로그인할 때도 마찬가지입니다. 따라서 로컬 인증서를 생성하고, 운영 체제에서 전체 권한을 부여하고, 파일을 프로젝트에 추가하여 React 앱에 HTTPS 액세스를 설정해야 합니다. 각 운영 체제마다 특성이 다를 수 있으므로, 이 가이드에서는 다루지 않습니다. 인증서를 생성한 후, `scripts` 세션에서 `package.json` 파일의 시작 명령을 다음과 같이 변경하세요: ```json 1 "start": "export HTTPS=true&&SSL_CRT_FILE=cert.pem&&SSL_KEY_FILE=key.pem react-scripts start", ``` Typescript를 사용하는 경우, `src` 폴더에 `react-facebook-login.d.ts`라는 새 파일을 생성하고, `react-facebook-login` 모듈 선언을 포함하여 스타일 없는 버전을 사용하세요: :::CodeblockTabs react-facebook-login.d.ts ```typescript 1 declare module 'react-facebook-login/dist/facebook-login-render-props'; ``` ::: ## 2 - 파스와 함께 페이스북 로그인 사용하기 이제 Facebook 로그인 인증 모달을 호출할 때 응답을 처리할 새로운 메서드를 `UserLogIn` 컴포넌트 안에 생성해 보겠습니다. 사용자가 Facebook으로 로그인하면 이 호출은 Facebook에서 사용자 데이터를 검색하고 `id`, `accessToken`, 그리고 프로필 `email`. 그런 다음, 이 함수는 `Parse.User.linkWith` 메서드와 이러한 자격 증명을 사용하여 Parse에 로그인하려고 시도합니다. 사용자가 이미 이 Facebook 인증을 사용하여 가입한 경우, `linkWith` 는 기존 계정을 사용하여 그를 로그인시킬 것입니다. :::CodeblockTabs JavaScript ```javascript 1 const handleFacebookLoginLoginResponse = async function(response) { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId = response.id; 10 const userEmail = response.email; 11 const userAccessToken = response.accessToken; 12 // Try to login on Parse using linkWith and these credentials 13 // Create a new Parse.User object 14 const userToLogin = new Parse.User(); 15 // Set username and email to match facebook profile email 16 userToLogin.set('username', userEmail); 17 userToLogin.set('email', userEmail); 18 try { 19 let loggedInUser = await userToLogin 20 .linkWith('facebook', { 21 authData: {id: userId, access_token: userAccessToken}, 22 }); 23 // logIn returns the corresponding ParseUser object 24 alert( 25 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 26 ); 27 // Update state variable holding current user 28 getCurrentUser(); 29 return true; 30 } catch (error) { 31 // Error can be caused by wrong parameters or lack of Internet connection 32 alert(`Error! ${error.message}`); 33 return false; 34 } 35 } catch (error) { 36 console.log("Error gathering Facebook user info, please try again!") 37 return false; 38 } 39 } 40 } ``` ```typescript 1 const handleFacebookLoginLoginResponse = async function(response: any): Promise { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId: string = response.id; 10 const userEmail: string = response.email; 11 const userAccessToken: string = response.accessToken; 12 // Try to login on Parse using linkWith and these credentials 13 // Create a new Parse.User object 14 const userToLogin: Parse.User = new Parse.User(); 15 // Set username and email to match facebook profile email 16 userToLogin.set('username', userEmail); 17 userToLogin.set('email', userEmail); 18 try { 19 let loggedInUser: Parse.User = await userToLogin 20 .linkWith('facebook', { 21 authData: {id: userId, access_token: userAccessToken}, 22 }); 23 // logIn returns the corresponding ParseUser object 24 alert( 25 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 26 ); 27 // Update state variable holding current user 28 getCurrentUser(); 29 return true; 30 } catch (error: any) { 31 // Error can be caused by wrong parameters or lack of Internet connection 32 alert(`Error! ${error.message}`); 33 return false; 34 } 35 } catch (error: any) { 36 console.log("Error gathering Facebook user info, please try again!") 37 return false; 38 } 39 } 40 } ``` ::: 그 후, `react-facebook-login` `FacebookLogin` 컴포넌트를 사용하여 Facebook 로그인 모달을 호출하고, 이를 JSX 코드에 추가해야 합니다. Facebook의 기본 스타일을 사용하거나 이 가이드에서 따르는 방법처럼 사용자 정의 스타일을 만들 수 있습니다. 다음은 전체 `UserLogin` 컴포넌트 코드입니다. `react-facebook-login` 버튼과 그것이 이전에 생성된 모달 응답 메서드와 어떻게 연결되어 있는지 주목하세요. :::CodeblockTabs JavaScript ```javascript 1 import React, { useState } from 'react'; 2 import Parse from 'parse/dist/parse.min.js'; 3 import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'; 4 import './App.css'; 5 import { Button, Divider, Input } from 'antd'; 6 7 export const UserLogin = () => { 8 // State variables 9 const [username, setUsername] = useState(''); 10 const [password, setPassword] = useState(''); 11 const [currentUser, setCurrentUser] = useState(null); 12 13 const doUserLogIn = async function () { 14 // Note that these values come from state variables that we've declared before 15 const usernameValue = username; 16 const passwordValue = password; 17 try { 18 const loggedInUser = await Parse.User.logIn(usernameValue, passwordValue); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get( 22 'username' 23 )} has successfully signed in!` 24 ); 25 // To verify that this is in fact the current user, `current` can be used 26 const currentUser = await Parse.User.current(); 27 console.log(loggedInUser === currentUser); 28 // Clear input fields 29 setUsername(''); 30 setPassword(''); 31 // Update state variable holding current user 32 getCurrentUser(); 33 return true; 34 } catch (error) { 35 // Error can be caused by wrong parameters or lack of Internet connection 36 alert(`Error! ${error.message}`); 37 return false; 38 } 39 }; 40 41 const doUserLogOut = async function () { 42 try { 43 await Parse.User.logOut(); 44 // To verify that current user is now empty, currentAsync can be used 45 const currentUser = await Parse.User.current(); 46 if (currentUser === null) { 47 alert('Success! No user is logged in anymore!'); 48 } 49 // Update state variable holding current user 50 getCurrentUser(); 51 return true; 52 } catch (error) { 53 alert(`Error! ${error.message}`); 54 return false; 55 } 56 }; 57 58 // Function that will return current user and also update current username 59 const getCurrentUser = async function () { 60 const currentUser = await Parse.User.current(); 61 // Update state variable holding current user 62 setCurrentUser(currentUser); 63 return currentUser; 64 }; 65 66 const handleFacebookLoginLoginResponse = async function (response) { 67 // Check if response has an error 68 if (response.error !== undefined) { 69 console.log(`Error: ${response.error}`); 70 return false; 71 } else { 72 try { 73 // Gather Facebook user info 74 const userId = response.id; 75 const userEmail = response.email; 76 const userAccessToken = response.accessToken; 77 // Try to login on Parse using linkWith and these credentials 78 // Create a new Parse.User object 79 const userToLogin = new Parse.User(); 80 // Set username and email to match facebook profile email 81 userToLogin.set('username', userEmail); 82 userToLogin.set('email', userEmail); 83 try { 84 let loggedInUser = await userToLogin.linkWith('facebook', { 85 authData: { id: userId, access_token: userAccessToken }, 86 }); 87 // logIn returns the corresponding ParseUser object 88 alert( 89 `Success! User ${loggedInUser.get( 90 'username' 91 )} has successfully signed in!` 92 ); 93 // Update state variable holding current user 94 getCurrentUser(); 95 return true; 96 } catch (error) { 97 // Error can be caused by wrong parameters or lack of Internet connection 98 alert(`Error! ${error.message}`); 99 return false; 100 } 101 } catch (error) { 102 console.log('Error gathering Facebook user info, please try again!'); 103 return false; 104 } 105 } 106 }; 107 108 return ( 109
110
111 Back4App Logo 118

{'React on Back4App'}

119

{'User Login'}

120
121 {currentUser === null && ( 122
123

{'User Login'}

124 125
126 setUsername(event.target.value)} 129 placeholder="Username" 130 size="large" 131 className="form_input" 132 /> 133 setPassword(event.target.value)} 136 placeholder="Password" 137 size="large" 138 type="password" 139 className="form_input" 140 /> 141
142
143 153
154 155
156 ( 161
162 163
164 )} 165 /> 166
167 168
169
170 171
172
173

Don't have an account? Sign up

174
175 )} 176 {currentUser !== null && ( 177
178

{'User Screen'}

179 180

{`Hello ${currentUser.get('username')}!`}

181
182 192
193
194 )} 195
196 ); 197 }; ``` ```typescript 1 import React, { useState, FC, ReactElement } from 'react'; 2 import './App.css'; 3 import { Button, Divider, Input } from 'antd'; 4 import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'; 5 const Parse = require('parse/dist/parse.min.js'); 6 7 export const UserLogin: FC<{}> = (): ReactElement => { 8 // State variables 9 const [username, setUsername] = useState(''); 10 const [password, setPassword] = useState(''); 11 const [currentUser, setCurrentUser] = useState(null); 12 13 const doUserLogIn = async function (): Promise { 14 // Note that these values come from state variables that we've declared before 15 const usernameValue: string = username; 16 const passwordValue: string = password; 17 try { 18 const loggedInUser: Parse.User = await Parse.User.logIn(usernameValue, passwordValue); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 22 ); 23 // To verify that this is in fact the current user, `current` can be used 24 const currentUser: Parse.User = await Parse.User.current(); 25 console.log(loggedInUser === currentUser); 26 // Clear input fields 27 setUsername(''); 28 setPassword(''); 29 // Update state variable holding current user 30 getCurrentUser(); 31 return true; 32 } catch (error: any) { 33 // Error can be caused by wrong parameters or lack of Internet connection 34 alert(`Error! ${error.message}`); 35 return false; 36 } 37 }; 38 39 const doUserLogOut = async function (): Promise { 40 try { 41 await Parse.User.logOut(); 42 // To verify that current user is now empty, currentAsync can be used 43 const currentUser: Parse.User = await Parse.User.current(); 44 if (currentUser === null) { 45 alert('Success! No user is logged in anymore!'); 46 } 47 // Update state variable holding current user 48 getCurrentUser(); 49 return true; 50 } catch (error: any) { 51 alert(`Error! ${error.message}`); 52 return false; 53 } 54 }; 55 56 // Function that will return current user and also update current username 57 const getCurrentUser = async function (): Promise { 58 const currentUser: (Parse.User | null) = await Parse.User.current(); 59 // Update state variable holding current user 60 setCurrentUser(currentUser); 61 return currentUser; 62 } 63 64 const handleFacebookLoginLoginResponse = async function(response: any): Promise { 65 // Check if response has an error 66 if (response.error !== undefined) { 67 console.log(`Error: ${response.error}`); 68 return false; 69 } else { 70 try { 71 // Gather Facebook user info 72 const userId: string = response.id; 73 const userEmail: string = response.email; 74 const userAccessToken: string = response.accessToken; 75 // Try to login on Parse using linkWith and these credentials 76 // Create a new Parse.User object 77 const userToLogin: Parse.User = new Parse.User(); 78 // Set username and email to match facebook profile email 79 userToLogin.set('username', userEmail); 80 userToLogin.set('email', userEmail); 81 try { 82 let loggedInUser: Parse.User = await userToLogin 83 .linkWith('facebook', { 84 authData: {id: userId, access_token: userAccessToken}, 85 }); 86 // logIn returns the corresponding ParseUser object 87 alert( 88 `Success! User ${loggedInUser.get('username')} has successfully signed in!`, 89 ); 90 // Update state variable holding current user 91 getCurrentUser(); 92 return true; 93 } catch (error: any) { 94 // Error can be caused by wrong parameters or lack of Internet connection 95 alert(`Error! ${error.message}`); 96 return false; 97 } 98 } catch (error: any) { 99 console.log("Error gathering Facebook user info, please try again!") 100 return false; 101 } 102 } 103 } 104 105 return ( 106
107
108 Back4App Logo 115

{'React on Back4App'}

116

{'User Login'}

117
118 {currentUser === null && ( 119
120

{'User Login'}

121 122
123 setUsername(event.target.value)} 126 placeholder="Username" 127 size="large" 128 className="form_input" 129 /> 130 setPassword(event.target.value)} 133 placeholder="Password" 134 size="large" 135 type="password" 136 className="form_input" 137 /> 138
139
140 150
151 152
153 void}) => ( 158
159 160
161 )} 162 /> 163
164 165
166
167 168
169
170

Don't have an account? Sign up

171
172 )} 173 {currentUser !== null && ( 174
175

{'User Screen'}

176 177

{`Hello ${currentUser.get('username')}!`}

178
179 189
190
191 )} 192
193 ); 194 }; ``` ::: 이 구성 요소의 레이아웃을 완전히 렌더링하려면 `App.css` 파일에 이러한 클래스를 추가하세요. :::CodeblockTabs App.css ```css 1 @import '~antd/dist/antd.css'; 2 3 .App { 4 text-align: center; 5 } 6 7 html { 8 box-sizing: border-box; 9 outline: none; 10 overflow: auto; 11 } 12 13 *, 14 *:before, 15 *:after { 16 margin: 0; 17 padding: 0; 18 box-sizing: inherit; 19 } 20 21 h1, 22 h2, 23 h3, 24 h4, 25 h5, 26 h6 { 27 margin: 0; 28 font-weight: bold; 29 } 30 31 p { 32 margin: 0; 33 } 34 35 body { 36 margin: 0; 37 background-color: #fff; 38 } 39 40 .container { 41 width: 100%; 42 max-width: 900px; 43 margin: auto; 44 padding: 20px 0; 45 text-align: left; 46 } 47 48 .header { 49 align-items: center; 50 padding: 25px 0; 51 background-color: #208AEC; 52 } 53 54 .header_logo { 55 height: 55px; 56 margin-bottom: 20px; 57 object-fit: contain; 58 } 59 60 .header_text_bold { 61 margin-bottom: 3px; 62 color: rgba(255, 255, 255, 0.9); 63 font-size: 16px; 64 font-weight: bold; 65 } 66 67 .header_text { 68 color: rgba(255, 255, 255, 0.9); 69 font-size: 15px; 70 } 71 72 .heading { 73 font-size: 22px; 74 } 75 76 .flex { 77 display: flex; 78 } 79 80 .flex_between { 81 display: flex; 82 justify-content: space-between; 83 } 84 85 .flex_child { 86 flex: 0 0 45%; 87 } 88 89 .heading_button { 90 margin-left: 12px; 91 } 92 93 .list_item { 94 padding-bottom: 15px; 95 margin-bottom: 15px; 96 border-bottom: 1px solid rgba(0, 0, 0, 0.06); 97 text-align: left; 98 } 99 100 .list_item_title { 101 color: rgba(0, 0, 0, 0.87); 102 font-size: 17px; 103 } 104 105 .list_item_description { 106 color: rgba(0, 0, 0, 0.5); 107 font-size: 15px; 108 } 109 110 .form_input { 111 margin-bottom: 20px; 112 } 113 114 .login-social { 115 display: flex; 116 justify-content: center; 117 margin-bottom: 30px; 118 } 119 120 .login-social-item { 121 width: 54px; 122 height: 54px; 123 border-radius: 54px; 124 padding: 12px; 125 margin: 0 12px; 126 border: 1px solid #e6e6e6; 127 box-shadow: 0 2px 4px #d6d6d6; 128 } 129 130 .login-social-item--facebook { 131 padding: 4px; 132 background-color: #3C5B9B; 133 } 134 135 .login-social-item__image { 136 width: 100%; 137 } 138 139 .form__hint { 140 color: rgba(0, 0, 0, 0.5); 141 font-size: 16px; 142 text-align: center; 143 } ``` ::: 새로운 기능을 테스트해 보세요. Facebook에 로그인할 수 있었고 Parse `linkWith` 호출이 성공적이었다면, 다음과 같은 성공 메시지를 볼 수 있어야 합니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/ju89eb7Laa8HBiuWLN4ml_image.png) ## 3 - 사용자 로그인 확인 및 세션 생성 Facebook 로그인이 작동했는지 확인하려면, Parse 대시보드를 확인하고 새로운 `사용자` (당신의 Facebook 인증 데이터가 다른 사용자에 속하지 않는 경우)와 함께 Facebook `authData` 매개변수를 확인할 수 있습니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/Fz64NIvC6JXLdq5BEZeZe_image.png) 대시보드에서 유효한 세션이 생성되었음을 확인할 수 있으며, 해당 `사용자` 객체에 대한 포인터가 포함되어 있습니다. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/OpSekb5DCXz2CI3Enp-qR_image.png) ## 4 - 기존 사용자를 Facebook 로그인에 연결하기 또 다른 `linkWith` 가능한 사용법은 기존 사용자를 다른 인증 제공자, 이 경우에는 Facebook과 연결하는 것입니다. 다음 기능을 추가하여 `linkWith`를 호출합니다. 이는 `UserLogIn` 구성 요소에 로그인하는 것과 동일한 방식입니다. 여기서 유일한 차이점은 빈 `Parse.User`,에서 메서드를 호출하는 대신 현재 로그인된 사용자 객체에서 사용한다는 것입니다. :::CodeblockTabs JavaScript ```javascript 1 const handleFacebookLoginLinkResponse = async function(response) { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId = response.id; 10 const userAccessToken = response.accessToken; 11 // Try to link current Parse user using linkWith and these credentials 12 // Get current user 13 const userToLink = await Parse.User.current(); 14 try { 15 let loggedInUser = await userToLink 16 .linkWith('facebook', { 17 authData: {id: userId, access_token: userAccessToken}, 18 }); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get( 22 'username', 23 )} has successfully linked his Facebook account!`, 24 ); 25 // Update state variable holding current user 26 getCurrentUser(); 27 return true; 28 } catch (error) { 29 // Error can be caused by wrong parameters or lack of Internet connection 30 alert(`Error! ${error.message}`); 31 return false; 32 } 33 } catch (error) { 34 console.log("Error gathering Facebook user info, please try again!") 35 return false; 36 } 37 } 38 } ``` ```typescript 1 const handleFacebookLoginLinkResponse = async function(response: any): Promise { 2 // Check if response has an error 3 if (response.error !== undefined) { 4 console.log(`Error: ${response.error}`); 5 return false; 6 } else { 7 try { 8 // Gather Facebook user info 9 const userId: string = response.id; 10 const userAccessToken: string = response.accessToken; 11 // Try to link current Parse user using linkWith and these credentials 12 // Get current user 13 const userToLink: Parse.User = await Parse.User.current(); 14 try { 15 let loggedInUser: Parse.User = await userToLink 16 .linkWith('facebook', { 17 authData: {id: userId, access_token: userAccessToken}, 18 }); 19 // logIn returns the corresponding ParseUser object 20 alert( 21 `Success! User ${loggedInUser.get( 22 'username', 23 )} has successfully linked his Facebook account!`, 24 ); 25 // Update state variable holding current user 26 getCurrentUser(); 27 return true; 28 } catch (error: any) { 29 // Error can be caused by wrong parameters or lack of Internet connection 30 alert(`Error! ${error.message}`); 31 return false; 32 } 33 } catch (error: any) { 34 console.log("Error gathering Facebook user info, please try again!") 35 return false; 36 } 37 } 38 } ``` ::: 이 기능을 홈 화면의 다른 `react-facebook-login` 구성 요소에 할당하세요. 이 구성 요소는 앱에 현재 사용자가 로그인했을 때만 표시됩니다. 새로운 기능을 테스트하고, `Parse.User` 객체 `authData` 값이 새로운 인증 제공자 데이터로 업데이트될 것임을 주의하세요. 사용자가 실제로 Parse 서버 대시보드에서 업데이트되었는지 확인하세요. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/6r0_4qP2ScDfW6IJyWL8E_image.png) ## 결론 이 가이드의 끝에서, Facebook 로그인을 사용하여 React에서 Parse 사용자에게 로그인, 가입 또는 기존 사용자를 연결하는 방법을 배웠습니다. 다음 가이드에서는 Apple 로그인 사용 방법을 보여드리겠습니다.