React NativeでのParseを使ったAppleサインイン実装ガイド

react nativeのappleでサインイン イントロダクション 前回のチュートリアルでは、アプリにユーザーログイン/ログアウト機能を追加しました。次は、apple sign inを使用してappleからユーザーデータを取得し、ログイン、サインアップ、または既存のユーザーとリンクする方法を学びます。また、これを実現するために react native apple authentication react native apple authentication ライブラリをインストールして設定します。 「 parse user linkwith parse user linkwith 」メソッドは、各プロバイダーが要求する正しいパラメータを渡す限り、任意のサードパーティ認証メソッドを使用してユーザーをサインアップおよびログインさせる役割を担っています。新しいまたは既存の parse user parse user にユーザーデータをリンクした後、parseはデバイスに有効なユーザーセッションを保存します。今後、「 currentasync currentasync 」のようなメソッドを呼び出すと、通常のログインと同様にユーザーデータを正常に取得できます。 いつでも、このチュートリアルで構築した完全なandroidプロジェクトにアクセスできます。私たちのgithubリポジトリでご覧ください https //github com/templates back4app/android parse sdk kotlin https //github com/templates back4app/android parse sdk java 前提条件 このチュートリアルを完了するには、次のものが必要です： 作成されたreact nativeアプリと https //www back4app com/docs/react native/parse sdk/react native sdk 前のガイドを完了して、 https //www back4app com/docs/react native/parse sdk/working with users/react native login についての理解を深めてください。 目標 react nativeアプリのparseでappleサインインを使用してユーザーログイン機能を構築すること。 1 依存関係のインストール react nativeでappleサインインを有効にする最も一般的な方法は、 react native apple authentication react native apple authentication を使用して処理することです。このライブラリの設定は、開発環境、ターゲットプラットフォーム、および好みに依存するため、 https //github com/invertase/react native apple authentication に従って設定してください。 android向けに開発している場合は、 https //github com/auth0/jwt decode ライブラリをインストールして、appleのjwtトークンをデコードする必要があります。 注意 xcode環境の初期設定、アプリid、キー、apple developerポータルでのサービスidの作成に関する指示を十分に従ってください。 2 parseを使用したappleサインイン では、appleサインイン認証モーダルを呼び出す新しいメソッドを userlogin userlogin コンポーネント内に作成しましょう。 react native apple authentication react native apple authentication ライブラリには、ユーザープラットフォームに基づいてこの呼び出しを処理するための2つの別々のモジュールがありますので、 appleauth performrequest appleauth performrequest をiosで使用し、 appleauthandroid signin appleauthandroid signin をandroidで使用する必要があります。ユーザーがappleでサインインすると、この呼び出しはappleからユーザーデータを取得し、 id id , token token 、および後で使用するためのappleのメールを保存する必要があります。 javascript 1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response = {}; 4 let appleid = ''; 5 let appletoken = ''; 6 let appleemail = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'your service id', 22 // return url added to your apple dev console 23 redirecturi 'your redirect url', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata = { 37 id appleid, 38 token appletoken, 39 }; 40 } catch (error) { 41 // error can be caused by wrong parameters or lack of internet connection 42 alert alert('error!', error); 43 return false; 44 } 45 };1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response object = {}; 4 let appleid string = ''; 5 let appletoken string = ''; 6 let appleemail string = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'your service id', 22 // return url added to your apple dev console 23 redirecturi 'your service url', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken object = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata object = { 37 id appleid, 38 token appletoken, 39 }; 40 } catch (error any) { 41 // error can be caused by wrong parameters or lack of internet connection 42 alert alert('error!', error); 43 return false; 44 } 45 }; androidの場合、appleから返されるトークンをデコードする必要があることに注意してください。なぜなら、ライブラリ react native apple authentication react native apple authentication は認証のためにapple sign inウェブapiを使用するからです。この方法を使用する際にはデータアクセスに制限があるため、ユーザーidとメールを取得するための一般的な回避策は、このデコードプロセスを通じて行うことです。これは公式のparseガイドで述べられています https //docs parseplatform org/parse server/guide/#apple authdata で。 その後、新しい parse user linkwith parse user linkwith を使用して新しいユーザーを登録し、ログインできます。ユーザーがこのapple認証を使用してすでにサインアップしている場合、 linkwith linkwith は既存のアカウントを使用してログインします。 javascript 1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response = {}; 4 let appleid = ''; 5 let appletoken = ''; 6 let appleemail = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'your service io', 22 // return url added to your apple dev console 23 redirecturi 'your service url', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata = { 37 id appleid, 38 token appletoken, 39 }; 40 // log in or sign up on parse using this apple credentials 41 let usertologin = new parse user(); 42 // set username and email to match provider email 43 usertologin set('username', appleemail); 44 usertologin set('email', appleemail); 45 return await usertologin 46 linkwith('apple', { 47 authdata authdata, 48 }) 49 then(async (loggedinuser) => { 50 // login returns the corresponding parseuser object 51 alert alert( 52 'success!', 53 `user ${loggedinuser get('username')} has successfully signed in!`, 54 ); 55 // to verify that this is in fact the current user, currentasync can be used 56 const currentuser = await parse user currentasync(); 57 console log(loggedinuser === currentuser); 58 // navigation navigate takes the user to the screen named after the one 59 // passed as parameter 60 navigation navigate('home'); 61 return true; 62 }) 63 catch(async (error) => { 64 // error can be caused by wrong parameters or lack of internet connection 65 alert alert('error!', error message); 66 return false; 67 }); 68 } catch (error) { 69 // error can be caused by wrong parameters or lack of internet connection 70 alert alert('error!', error); 71 return false; 72 } 73 };1 const douserloginapple = async function () promise\<boolean> { 2 try { 3 let response object = {}; 4 let appleid string = ''; 5 let appletoken string = ''; 6 let appleemail string = ''; 7 if (platform os === 'ios') { 8 // performs login request requesting user email 9 response = await appleauth performrequest({ 10 requestedoperation appleauth operation login, 11 requestedscopes \[appleauth scope email], 12 }); 13 // on ios, user id and email are easily retrieved from request 14 appleid = response user; 15 appletoken = response identitytoken; 16 appleemail = response email; 17 } else if (platform os === 'android') { 18 // configure the request 19 appleauthandroid configure({ 20 // the service id you registered with apple 21 clientid 'com back4app userguide', 22 // return url added to your apple dev console 23 redirecturi 'https //tuhl software/back4appuserguide/', 24 responsetype appleauthandroid responsetype all, 25 scope appleauthandroid scope all, 26 }); 27 response = await appleauthandroid signin(); 28 // decode user id and email from token returned from apple, 29 // this is a common workaround for apple sign in via web api 30 const decodedidtoken object = jwt decode(response id token); 31 appleid = decodedidtoken sub; 32 appletoken = response id token; 33 appleemail = decodedidtoken email; 34 } 35 // format authdata to provide correctly for apple linkwith on parse 36 const authdata object = { 37 id appleid, 38 token appletoken, 39 }; 40 // log in or sign up on parse using this apple credentials 41 let usertologin parse user = new parse user(); 42 // set username and email to match provider email 43 usertologin set('username', appleemail); 44 usertologin set('email', appleemail); 45 return await usertologin 46 linkwith('apple', { 47 authdata authdata, 48 }) 49 then(async (loggedinuser parse user) => { 50 // login returns the corresponding parseuser object 51 alert alert( 52 'success!', 53 `user ${loggedinuser get('username')} has successfully signed in!`, 54 ); 55 // to verify that this is in fact the current user, currentasync can be used 56 const currentuser parse user = await parse user currentasync(); 57 console log(loggedinuser === currentuser); 58 // navigation navigate takes the user to the screen named after the one 59 // passed as parameter 60 navigation navigate('home'); 61 return true; 62 }) 63 catch(async (error object) => { 64 // error can be caused by wrong parameters or lack of internet connection 65 alert alert('error!', error message); 66 return false; 67 }); 68 } catch (error any) { 69 // error can be caused by wrong parameters or lack of internet connection 70 alert alert('error!', error); 71 return false; 72 } 73 }; この機能をあなたの usersignin usersignin コンポーネントに追加し、appleボタンの onpress onpress パラメータに割り当ててください。新しい機能をテストしてみてください。ユーザーは、登録またはサインインに成功した後、ホーム画面にリダイレクトされることに注意してください。 3 ユーザーサインインとセッション作成の確認 appleサインインが機能したことを確認するには、parseダッシュボードを見て、新しい ユーザー ユーザー （apple認証データが他のユーザーに属していない場合）を確認し、appleの authdata authdata パラメータを含んでいることを確認できます。 ダッシュボードで有効なセッションが作成され、その ユーザー ユーザー オブジェクトへのポインタを含んでいることも確認できます。 4 既存のユーザーをappleサインインにリンクする 別の linkwith linkwith の可能な使用法は、既存のユーザーを別の認証プロバイダー、今回はappleとリンクすることです。この関数を追加して、 linkwith linkwith を呼び出します。これは、 userlogin userlogin で行ったのと同じ方法です。あなたの hellouser hellouser コンポーネントまたは直接ホーム画面に追加します。ここでの唯一の違いは、空の parse user parse user からメソッドを呼び出すのではなく、ログインしたユーザーオブジェクトから使用することです。 javascript 1 const douserlinkapple = async function (){ 2 try { 3 let response = {}; 4 let appleid = ''; 5 let appletoken = ''; 6 if (platform os === 'ios') { 7 // performs login request requesting user email 8 response = await appleauth performrequest({ 9 requestedoperation appleauth operation login, 10 requestedscopes \[appleauth scope email], 11 }); 12 // on ios, user id and email are easily retrieved from request 13 appleid = response user; 14 appletoken = response identitytoken; 15 } else if (platform os === 'android') { 16 // configure the request 17 appleauthandroid configure({ 18 // the service id you registered with apple 19 clientid 'your service id', 20 // return url added to your apple dev console 21 redirecturi 'your redirect url', 22 responsetype appleauthandroid responsetype all, 23 scope appleauthandroid scope all, 24 }); 25 response = await appleauthandroid signin(); 26 // decode user id and email from token returned from apple, 27 // this is a common workaround for apple sign in via web api 28 const decodedidtoken = jwt decode(response id token); 29 appleid = decodedidtoken sub; 30 appletoken = response id token; 31 } 32 // format authdata to provide correctly for apple linkwith on parse 33 const authdata = { 34 id appleid, 35 token appletoken, 36 }; 37 let currentuser = await parse user currentasync(); 38 // link user with his apple credentials 39 return await currentuser 40 linkwith('apple', { 41 authdata authdata, 42 }) 43 then(async (loggedinuser) => { 44 // login returns the corresponding parseuser object 45 alert alert( 46 'success!', 47 `user ${loggedinuser get( 48 'username', 49 )} has successfully linked his apple account!`, 50 ); 51 // to verify that this is in fact the current user, currentasync can be used 52 currentuser = await parse user currentasync(); 53 console log(loggedinuser === currentuser); 54 return true; 55 }) 56 catch(async (error) => { 57 // error can be caused by wrong parameters or lack of internet connection 58 alert alert('error!', error message); 59 return false; 60 }); 61 } catch (error) { 62 // error can be caused by wrong parameters or lack of internet connection 63 alert alert('error!', error); 64 return false; 65 } 66 };1 const douserlinkapple = async function () promise\<boolean> { 2 try { 3 let response object = {}; 4 let appleid string = ''; 5 let appletoken string = ''; 6 if (platform os === 'ios') { 7 // performs login request requesting user email 8 response = await appleauth performrequest({ 9 requestedoperation appleauth operation login, 10 requestedscopes \[appleauth scope email], 11 }); 12 // on ios, user id and email are easily retrieved from request 13 appleid = response user; 14 appletoken = response identitytoken; 15 } else if (platform os === 'android') { 16 // configure the request 17 appleauthandroid configure({ 18 // the service id you registered with apple 19 clientid 'your service id', 20 // return url added to your apple dev console 21 redirecturi 'your service url', 22 responsetype appleauthandroid responsetype all, 23 scope appleauthandroid scope all, 24 }); 25 response = await appleauthandroid signin(); 26 // decode user id and email from token returned from apple, 27 // this is a common workaround for apple sign in via web api 28 const decodedidtoken object = jwt decode(response id token); 29 appleid = decodedidtoken sub; 30 appletoken = response id token; 31 } 32 // format authdata to provide correctly for apple linkwith on parse 33 const authdata object = { 34 id appleid, 35 token appletoken, 36 }; 37 let currentuser parse user = await parse user currentasync(); 38 // link user with his apple credentials 39 return await currentuser 40 linkwith('apple', { 41 authdata authdata, 42 }) 43 then(async (loggedinuser parse user) => { 44 // login returns the corresponding parseuser object 45 alert alert( 46 'success!', 47 `user ${loggedinuser get( 48 'username', 49 )} has successfully linked his apple account!`, 50 ); 51 // to verify that this is in fact the current user, currentasync can be used 52 currentuser = await parse user currentasync(); 53 console log(loggedinuser === currentuser); 54 return true; 55 }) 56 catch(async (error object) => { 57 // error can be caused by wrong parameters or lack of internet connection 58 alert alert('error!', error message); 59 return false; 60 }); 61 } catch (error any) { 62 // error can be caused by wrong parameters or lack of internet connection 63 alert alert('error!', error); 64 return false; 65 } 66 }; この機能をappleボタンに割り当てます onpress onpress パラメータをホーム画面に設定します。新しい機能をテストし、 parse user parse user オブジェクトの authdata authdata 値が新しい認証プロバイダーのデータで更新されることに注意してください。ユーザーが実際にparseサーバーダッシュボードで更新されたかどうかを確認してください。 結論 このガイドの最後に、appleサインインを使用してreact nativeでparseユーザーにログイン、サインアップ、または既存のユーザーをリンクする方法を学びました react native apple authentication react native apple authentication 。次のガイドでは、便利なユーザークエリを実行する方法を示します。