React NativeでのFacebookログインとParse連携手法

react native facebookログイン イントロダクション 前回のチュートリアルでは、アプリにユーザーログイン/ログアウト機能を parse user parse user クラスを使用して構築しました。今回は、facebookからユーザーデータを取得し、ログイン、サインアップ、または既存のユーザーとリンクするためにfacebook fbsdk loginを使用する方法を学びます。また、これを実現するために react native fbsdk react native fbsdk ライブラリをインストールして設定します。 parse user linkwith parse user linkwith メソッドは、各プロバイダーが要求する正しいパラメータを渡す限り、任意のサードパーティ認証方法を使用してユーザーをサインアップおよびログインさせる責任があります。新しいまたは既存の parse user parse user にユーザーデータをリンクした後、parseはデバイスに有効なユーザーセッションを保存します。 currentasync currentasync のようなメソッドへの将来の呼び出しは、通常のログインと同様にユーザーデータを正常に取得します。 いつでも、このチュートリアルで構築された完全なandroidプロジェクトに、私たちのgithubリポジトリでアクセスできます。 kotlinの例リポジトリ javaの例リポジトリ 前提条件 このチュートリアルを完了するには、次のものが必要です： 作成されたreact nativeアプリと back4appに接続された 前のガイドを完了して、次のことをよりよく理解できるようにしてください。 parse userクラス 目標 react nativeアプリでparseを使用してfacebook fbsdk loginを利用したユーザーログイン機能を構築する。 1 依存関係のインストール react nativeでfacebookログインを追加する最も一般的な方法は、 react native fbsdk react native fbsdk を使用して処理することです。このライブラリの設定は、開発環境、ターゲットプラットフォーム、および好みに依存するため、 公式ドキュメント https //github com/facebook/react native fbsdk に従って設定してください。 注意 ios向けに開発している場合は、プロジェクトがswiftファイルをサポートしていることを確認し、ブリッジヘッダーを含めてください。また、facebookアプリidをどこに追加するか、 info plist info plist ファイル内で、podsファイルが正しく生成されているかに注意してください。 2 parseを使用したfbsdkログイン では、次に userlogin userlogin コンポーネント内に新しいメソッドを作成し、facebookのfbsdk認証モーダルを呼び出します。 loginmanager loginwithpermissions loginmanager loginwithpermissions を使用して、ユーザーのメールアドレスにのみアクセスする権限を要求します。ユーザーがfacebookで正常にサインインした場合、次に accesstoken getcurrentaccesstoken accesstoken getcurrentaccesstoken を呼び出して、facebookからユーザーのアクセストークンを取得できます。その後、ユーザーの id id と email email を graphrequest graphrequest を通じて取得する必要があります。 graphrequestmanager graphrequestmanager javascript 1 const douserloginfacebook = async function () { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error, 16 emailresult, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid = emailresult id; 23 const facebookemail = emailresult email; 24 const authdata = { 25 id facebookid, 26 access token facebookaccesstoken, 27 }; 28 // log in or sign up on parse using this facebook credentials 29 let usertologin = new parse user(); 30 // set username and email to match provider email 31 usertologin set('username', facebookemail); 32 usertologin set('email', facebookemail); 33 return await usertologin 34 linkwith('facebook', { 35 authdata authdata, 36 }) 37 then(async (loggedinuser) => { 38 // login returns the corresponding parseuser object 39 alert alert( 40 'success!', 41 `user ${loggedinuser get( 42 'username', 43 )} has successfully signed in!`, 44 ); 45 // to verify that this is in fact the current user, currentasync can be used 46 const currentuser = await parse user currentasync(); 47 console log(loggedinuser === currentuser); 48 // navigation navigate takes the user to the screen named after the one 49 // passed as parameter 50 navigation navigate('home'); 51 return true; 52 }) 53 catch(async (error) => { 54 // error can be caused by wrong parameters or lack of internet connection 55 alert alert('error!', error message); 56 return false; 57 }); 58 } 59 }; 60&#x9; 61 // formats a fbsdk graphrequest to retrieve user email and id 62 const emailrequest = new graphrequest( 63 '/me', 64 { 65 accesstoken facebookaccesstoken, 66 parameters { 67 fields { 68 string 'email', 69 }, 70 }, 71 }, 72 responseemailcallback, 73 ); 74&#x9; 75 // start the graph request, which will call the callback after finished 76 new graphrequestmanager() addrequest(emailrequest) start(); 77&#x9; 78 return true; 79 }); 80 } 81 }, 82 (error) => { 83 console log('login fail with error ' + error); 84 return false; 85 }, 86 ); 87 } catch (error) { 88 alert alert('error!', error code); 89 return false; 90 } 91 };1 const douserloginfacebook = async function () promise\<boolean> { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult object) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data object) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error string, 16 emailresult object, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid string = emailresult id; 23 const facebookemail string = emailresult email; 24 const authdata object = { 25 id facebookid, 26 access token facebookaccesstoken, 27 }; 28 // log in or sign up on parse using this facebook credentials 29 let usertologin parse user = new parse user(); 30 // set username and email to match provider email 31 usertologin set('username', facebookemail); 32 usertologin set('email', facebookemail); 33 return await usertologin 34 linkwith('facebook', { 35 authdata authdata, 36 }) 37 then(async (loggedinuser parse user) => { 38 // login returns the corresponding parseuser object 39 alert alert( 40 'success!', 41 `user ${loggedinuser get( 42 'username', 43 )} has successfully signed in!`, 44 ); 45 // to verify that this is in fact the current user, currentasync can be used 46 const currentuser parse user = await parse user currentasync(); 47 console log(loggedinuser === currentuser); 48 // navigation navigate takes the user to the screen named after the one 49 // passed as parameter 50 navigation navigate('home'); 51 return true; 52 }) 53 catch(async (error object) => { 54 // error can be caused by wrong parameters or lack of internet connection 55 alert alert('error!', error message); 56 return false; 57 }); 58 } 59 }; 60&#x9; 61 // formats a fbsdk graphrequest to retrieve user email and id 62 const emailrequest = new graphrequest( 63 '/me', 64 { 65 accesstoken facebookaccesstoken, 66 parameters { 67 fields { 68 string 'email', 69 }, 70 }, 71 }, 72 responseemailcallback, 73 ); 74&#x9; 75 // start the graph request, which will call the callback after finished 76 new graphrequestmanager() addrequest(emailrequest) start(); 77&#x9; 78 return true; 79 }); 80 } 81 }, 82 (error string) => { 83 console log('login fail with error ' + error); 84 return false; 85 }, 86 ); 87 } catch (error object) { 88 alert alert('error!', error code); 89 return false; 90 } 91 }; 成功した後、 graphrequest graphrequest この関数は、新しい parse user linkwith parse user linkwith を使用して、新しい parse user parse user オブジェクトを作成し、これらの資格情報を使用して新しいユーザーを登録するか、以前のユーザーにログインします。facebookの認証データを適切に渡します。 この関数をあなたの usersignin usersignin コンポーネントに追加し、facebookボタンの onpress onpress パラメータに割り当てます。新しい関数をテストしてみてください。サインインに成功した後、ユーザーはホーム画面にリダイレクトされるのがわかります。 3 ユーザーサインインとセッション作成の確認 facebookサインインが成功したことを確認するには、parseダッシュボードを見て、新しい user user （あなたのfacebook認証データが他のユーザーに属していない場合）を確認し、facebookの authdata authdata パラメータを含んでいます。 ダッシュボードで有効なセッションが作成され、そこにその user user オブジェクトへのポインタが含まれていることも確認できます。 4 既存のユーザーをfbsdkログインにリンクする 別の linkwith linkwith の可能な使用法は、既存のユーザーを別の認証プロバイダー、今回はfacebookにリンクすることです。この関数を追加して、 linkwith linkwith を呼び出します。これは、 userlogin userlogin で行ったのと同じ方法です。あなたの hellouser hellouser コンポーネントまたは直接ホーム画面に追加します。ここでの唯一の違いは、空の parse user parse user からメソッドを呼び出すのではなく、ログインしているユーザーオブジェクトから使用することです。 javascript 1 const douserlinkfacebook = async function () { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error, 16 emailresult, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid = emailresult id; 23 const authdata = { 24 id facebookid, 25 access token facebookaccesstoken, 26 }; 27 let currentuser = await parse user currentasync(); 28 return await currentuser 29 linkwith('facebook', { 30 authdata authdata, 31 }) 32 then(async (loggedinuser) => { 33 // login returns the corresponding parseuser object 34 alert alert( 35 'success!', 36 `user ${loggedinuser get( 37 'username', 38 )} has successfully linked his facebook account!`, 39 ); 40 // to verify that this is in fact the current user, currentasync can be used 41 currentuser = await parse user currentasync(); 42 console log(loggedinuser === currentuser); 43 return true; 44 }) 45 catch(async (linkwitherror) => { 46 // error can be caused by wrong parameters or lack of internet connection 47 alert alert('error!', linkwitherror message); 48 return false; 49 }); 50 } 51 }; 52&#x9; 53 // formats a fbsdk graphrequest to retrieve user email and id 54 const emailrequest = new graphrequest( 55 '/me', 56 { 57 accesstoken facebookaccesstoken, 58 parameters { 59 fields { 60 string 'email', 61 }, 62 }, 63 }, 64 responseemailcallback, 65 ); 66&#x9; 67 // start the graph request, which will call the callback after finished 68 new graphrequestmanager() addrequest(emailrequest) start(); 69&#x9; 70 return true; 71 }); 72 } 73 }, 74 (error) => { 75 console log('login fail with error ' + error); 76 return false; 77 }, 78 ); 79 } catch (error) { 80 alert alert('error!', error code); 81 return false; 82 } 83 };1 const douserlinkfacebook = async function () promise\<boolean> { 2 try { 3 // login using the facebook login dialog asking form email permission 4 return await loginmanager loginwithpermissions(\['email']) then( 5 (loginresult object) => { 6 if (loginresult iscancelled) { 7 console log('login cancelled'); 8 return false; 9 } else { 10 // retrieve access token from fbsdk to be able to linkwith parse 11 accesstoken getcurrentaccesstoken() then((data object) => { 12 const facebookaccesstoken = data accesstoken; 13 // callback that will be called after fbsdk successfuly retrieves user email and id from fb 14 const responseemailcallback = async ( 15 error string, 16 emailresult object, 17 ) => { 18 if (error) { 19 console log('error fetching data ' + error tostring()); 20 } else { 21 // format authdata to provide correctly for facebook linkwith on parse 22 const facebookid string = emailresult id; 23 const authdata object = { 24 id facebookid, 25 access token facebookaccesstoken, 26 }; 27 let currentuser parse user = await parse user currentasync(); 28 return await currentuser 29 linkwith('facebook', { 30 authdata authdata, 31 }) 32 then(async (loggedinuser parse user) => { 33 // login returns the corresponding parseuser object 34 alert alert( 35 'success!', 36 `user ${loggedinuser get( 37 'username', 38 )} has successfully linked his facebook account!`, 39 ); 40 // to verify that this is in fact the current user, currentasync can be used 41 currentuser = await parse user currentasync(); 42 console log(loggedinuser === currentuser); 43 return true; 44 }) 45 catch(async (linkwitherror object) => { 46 // error can be caused by wrong parameters or lack of internet connection 47 alert alert('error!', linkwitherror message); 48 return false; 49 }); 50 } 51 }; 52&#x9; 53 // formats a fbsdk graphrequest to retrieve user email and id 54 const emailrequest = new graphrequest( 55 '/me', 56 { 57 accesstoken facebookaccesstoken, 58 parameters { 59 fields { 60 string 'email', 61 }, 62 }, 63 }, 64 responseemailcallback, 65 ); 66&#x9; 67 // start the graph request, which will call the callback after finished 68 new graphrequestmanager() addrequest(emailrequest) start(); 69&#x9; 70 return true; 71 }); 72 } 73 }, 74 (error string) => { 75 console log('login fail with error ' + error); 76 return false; 77 }, 78 ); 79 } catch (error object) { 80 alert alert('error!', error code); 81 return false; 82 } 83 }; この機能をホーム画面の facebook ボタン onpress onpress パラメータに割り当てます。新しい機能をテストし、 parse user parse user オブジェクトの authdata 値が新しい認証プロバイダーのデータで更新されることに注意してください。ユーザーが実際に parse サーバーダッシュボードで更新されたかどうかを確認してください。 結論 このガイドの最後に、facebook fbsdk loginを使用してreact nativeでparseユーザーにログインまたはサインアップする方法を学びました。 react native fbsdk react native fbsdk 。次のガイドでは、便利なユーザークエリを実行する方法を示します。