Ionicアプリ開発：Facebookログイン機能を実装する方法

ionicアプリにfacebookログインを追加する方法 はじめに このセクションでは、facebookログインを使用してユーザー登録を行うアプリを作成する方法を説明します。 parse serverのコア機能 をback4appを通じて。 このチュートリアルに従った後、あなたはこれを行うことができるようになります いつでも、このチュートリアルで構築された完全なionicプロジェクトにアクセスできます。私たちの githubリポジトリ です。 このクイックスタートを完了するには、次のものが必要です visual studio code （またはお好きなweb ide）。 ionic framework back4appで作成されたアプリ。 次の 新しいparseアプリのチュートリアル をフォローして、back4appでparseアプリを作成する方法を学びます。 アカウントを作成するための facebook アカウント。 1 facebookの設定 facebook機能を使用するには、次のことを行う必要があります 「 facebook developer 」のウェブサイトにアクセスし、アカウントを作成してログインします。 「 my apps 」に移動し、「 新しいアプリを追加 新しいアプリを追加 」をクリックします。 左のパネルで、「 設定 設定 」をクリックし、「 基本 基本 」を選択します。このページで あなたの アプリid アプリid をメモしてください。 「 プライバシーポリシーのurl プライバシーポリシーのurl 」を追加します。 「 カテゴリ カテゴリ 」を選択します。 下にスクロールして、「 変更を保存 変更を保存 」をクリックします。 4\ 同じページの上部で、「 オフ オフ 」ボタンをクリックし、「 確認 」してアプリを公開します。 5\ 同じページを下にスクロールし、「 プラットフォームを追加 プラットフォームを追加 」をクリックします。 このチュートリアルでは、「 android 」を選択しましょう。 あなたの google play パッケージ名 google play パッケージ名 を追加します。私たちの場合は com back4app myapp です。 あなたの キー ハッシュ キー ハッシュ を追加します（ keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64 を実行して自分のものを見つけます） 変更を保存 変更を保存 6\ 左のパネルで、「 ダッシュボード ダッシュボード 」に戻るためにスクロールダウンし、「 facebook ログイン facebook ログイン 」をクリックします。 2 facebookアプリをback4appにリンクする アプリダッシュボードに移動し、 back4appウェブサイト をクリックします。 サーバー設定 サーバー設定 「facebookログイン」ブロックを見つけて、 設定 設定 をクリックします。「facebookログイン」ブロックはこのようになります 3\ 前のステップでメモしたfacebook アプリid アプリid を追加します。 3 セットアップ このチュートリアルでは、前の メール認証を伴うユーザー登録 https //www back4app com/docs/ionic/user registration email verification から始めます。 4 facebookログイン まず、facebookのcordovaプラグインをインストールしましょう では、次に facebooklogin() facebooklogin() メソッドを実装しましょう login ts 1 async facebooklogin() { 2 try { 3 // log in to facebook and request user data 4 let facebookresponse = await this facebook login(\['public profile', 'email']); 5 let facebookauthdata = { 6 id facebookresponse authresponse userid, 7 access token facebookresponse authresponse accesstoken, 8 }; 9 10 // request the user from parse 11 let tolinkuser = new parse user(); 12 let user = await tolinkuser linkwith('facebook', {authdata facebookauthdata}); 13 14 // if user did not exist, updates its data 15 if (!user existed()) { 16 let userdata = await this facebook api('me?fields=id,name,email,first name,picture width(720) height(720) as(picture)', \[]); 17 user set('username', userdata name); 18 user set('name', userdata name); 19 user set('email', userdata email); 20 await user save(); 21 } 22 23 this navctrl setroot('homepage'); 24 } catch (err) { 25 console log('error logging in', err); 26 27 this toastctrl create({ 28 message err message, 29 duration 2000 30 }) present(); 31 } 32 } 最後に、私たちの ログイン ログイン ページにボタンを追加し、先ほど作成したメソッドを呼び出すようにしましょう login html 1 2 3 log in with facebook 4 5 5 アプリをテストする facebookログインはブラウザで動作しないため、 ionic cordova run android ionic cordova run android でアプリをテストしてください。 にログインします。 back4appウェブサイト https //www back4app com/ 。 アプリを見つけて、 ダッシュボード ダッシュボード > コア コア > ブラウザ ブラウザ > ユーザー ユーザー をクリックして、作成したユーザーを確認してください！ 完了しました！ この段階で、back4appを通じてparse serverのコア機能を使用して、facebookでアプリにログイン、登録、ログアウトできます！