React NativeでのGoogleサインインとParseユーザー統合方法

react nativeのgoogleでサインイン イントロダクション 前回のチュートリアルでは、アプリにユーザーログイン/ログアウト機能を追加しました。 parse user parse user クラスを使用しました。今回は、googleサインインを使用してgoogleからユーザーデータを取得し、ログイン、サインアップ、または既存のユーザーとリンクする方法を学びます。また、これを実現するために react native google signin react native google signin ライブラリをインストールして設定します。 「 parse user linkwith parse user linkwith 」メソッドは、各プロバイダーが要求する正しいパラメータを渡す限り、任意のサードパーティ認証方法を使用してユーザーをサインアップおよびログインさせる役割を担っています。新しいまたは既存の parse user parse user にユーザーデータをリンクした後、parseはデバイスに有効なユーザーセッションを保存します。今後、「 currentasync currentasync 」のようなメソッドを呼び出すと、通常のログインと同様にユーザーデータを正常に取得できます。 いつでも、スタイルと完全なコードを確認するために、私たちのgithubリポジトリを通じてこのプロジェクトにアクセスできます。 javascriptのサンプルリポジトリ typescriptのサンプルリポジトリ 前提条件 このチュートリアルを完了するには、次のものが必要です： 作成されたreact nativeアプリと back4appに接続された 前のガイドを完了して、 parse userクラスについての理解を深めてください 目標 react nativeアプリでparseを使用してgoogleサインイン機能を構築する。 1 依存関係のインストール react nativeでgoogleサインインを有効にする最も一般的な方法は、 react native google signin react native google signin を使用して処理することです。このライブラリの設定は、開発環境、ターゲットプラットフォーム、および好みに依存するため、 公式ドキュメント https //github com/react native google signin/google signin に従って設定してください。 その後、アプリのメインファイル（ app js app js または app tsx app tsx ）が正しく初期化され、 googlesignin googlesignin がこのように設定されていることを確認してください。 app tsx/app js 1 // other imports 2 import {googlesignin} from '@react native community/google signin'; 3&#x9; 4 // parse initialization configuration goes here 5 // 6&#x9; 7 // googlesignin initial configuration 8 // iosclientid is required for ios platform development and 9 // webclientid for android use only what is suitable to you 10 googlesignin configure({ 11 iosclientid 12 'google ios client id', 13 webclientid 14 'google android web client id', 15 }); 16&#x9; 17 // 2 parseを使用したgoogleサインイン では、次に userlogin userlogin コンポーネント内に新しいメソッドを作成し、 googlesignin signin googlesignin signin を呼び出してgoogleサインイン認証モーダルを表示します。ユーザーがgoogleでサインインすると、この呼び出しはgoogleからユーザーデータを取得し、後で使用するためにid、idtoken、およびgoogleメールを保存する必要があります。 javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 } catch (error) { 11 alert alert('error!', error code); 12 return false; 13 } 14 }; その後、新しい parse user linkwith parse user linkwith を使用して新しいユーザーを登録し、ログインできます。ユーザーがこのgoogle認証を使用してすでにサインアップしている場合、 parse user parse user の linkwith linkwith は既存のアカウントを使用してログインします。 javascript 1 const douserlogingoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const googleemail = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 };1 const douserlogingoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const googleemail string = userinfo user email; 10 // log in on parse using this google id token 11 const usertologin parse user = new parse user(); 12 // set username and email to match google email 13 usertologin set('username', googleemail); 14 usertologin set('email', googleemail); 15 return await user 16 linkwith('google', { 17 authdata {id googleuserid, id token googleidtoken}, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get('username')} has successfully signed in!`, 24 ); 25 // to verify that this is in fact the current user, currentasync can be used 26 const currentuser parse user = await parse user currentasync(); 27 console log(loggedinuser === currentuser); 28 // navigation navigate takes the user to the screen named after the one 29 // passed as parameter 30 navigation navigate('home'); 31 return true; 32 }) 33 catch(async (error object) => { 34 // error can be caused by wrong parameters or lack of internet connection 35 alert alert('error!', error message); 36 return false; 37 }); 38 } catch (error) { 39 alert alert('error!', error code); 40 return false; 41 } 42 }; この機能をあなたの usersignin usersignin コンポーネントに追加し、googleボタンの onpress onpress パラメータに割り当ててください。新しい機能をテストしてみてください。ユーザーは、登録および/またはサインインに成功した後、ホーム画面にリダイレクトされることに注意してください。 3 ユーザーサインインとセッション作成の確認 googleサインインが正常に機能したことを確認するには、parseダッシュボードを見て、新しい ユーザー ユーザー （google認証データが他のユーザーに属していない場合）を確認し、googleの authdata authdata パラメータを含んでいることを確認できます。 ダッシュボードで有効なセッションが作成され、その ユーザー ユーザー オブジェクトへのポインタが含まれていることも確認できます。 4 既存のユーザーをgoogleサインインにリンクする 別の linkwith linkwith の可能な使用法は、既存のユーザーを別の認証プロバイダー、今回はgoogleとリンクすることです。この関数を追加して linkwith linkwith を呼び出します。これは userlogin userlogin で行ったのと同じ方法です。あなたの hellouser hellouser コンポーネントまたは直接ホーム画面に追加します。ここでの唯一の違いは、空の parse user parse user からメソッドを呼び出すのではなく、ログインしたユーザーオブジェクトから使用することです。 javascript 1 const douserlinkgoogle = async function () { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo = await googlesignin signin(); 7 const googleidtoken = userinfo idtoken; 8 const googleuserid = userinfo user id; 9 const authdata = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 };1 const douserlinkgoogle = async function () promise\<boolean> { 2 try { 3 // check if your user can sign in using google on his phone 4 await googlesignin hasplayservices({showplayservicesupdatedialog true}); 5 // retrieve user data from google 6 const userinfo object = await googlesignin signin(); 7 const googleidtoken string = userinfo idtoken; 8 const googleuserid string = userinfo user id; 9 const authdata object = { 10 id googleuserid, 11 id token googleidtoken, 12 }; 13 let currentuser parse user = await parse user currentasync(); 14 // link user with his google credentials 15 return await currentuser 16 linkwith('google', { 17 authdata authdata, 18 }) 19 then(async (loggedinuser parse user) => { 20 // login returns the corresponding parseuser object 21 alert alert( 22 'success!', 23 `user ${loggedinuser get( 24 'username', 25 )} has successfully linked his google account!`, 26 ); 27 // to verify that this is in fact the current user, currentasync can be used 28 currentuser = await parse user currentasync(); 29 console log(loggedinuser === currentuser); 30 return true; 31 }) 32 catch(async (error object) => { 33 // error can be caused by wrong parameters or lack of internet connection 34 alert alert('error!', error message); 35 return false; 36 }); 37 } catch (error) { 38 alert alert('error!', error code); 39 return false; 40 } 41 }; この機能をホーム画面の onpress onpress パラメータに割り当てます。新しい機能をテストし、 parse user parse user オブジェクトの authdata authdata 値が新しい認証プロバイダーのデータで更新されることに注意してください。ユーザーが実際にあなたのparseサーバーダッシュボードで更新されたかどうかを確認してください。 結論 このガイドの最後に、googleサインインを使用してreact nativeでparseユーザーにログイン、サインアップ、または既存のユーザーをリンクする方法を学びました。 react native google signin react native google signin を使用しています。次のガイドでは、便利なユーザークエリを実行する方法を示します。