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

10 分

ionicアプリにfacebookログインを追加する方法はじめにこのセクションでは、facebookログインを使用してユーザー登録を行うアプリを作成する方法を説明します。 parse serverのコア機能 https //www back4app com/product/parse server をback4appを通じて。このチュートリアルに従った後、あなたはこれを行うことができるようになりますいつでも、このチュートリアルで構築された完全なionicプロジェクトにアクセスできます。私たちの githubリポジトリ https //github com/back4app/ionic email verification です。このクイックスタートを完了するには、次のものが必要です visual studio code https //code visualstudio com/download （またはお好きなweb ide）。 ionic framework https //ionicframework com/getting started/ back4appで作成されたアプリ。次の新しいparseアプリのチュートリアル https //www back4app com/docs/get started/new parse app をフォローして、back4appでparseアプリを作成する方法を学びます。アカウントを作成するための facebook https //www facebook com/login/?next=https%3a%2f%2fdevelopers facebook com%2f アカウント。 1 facebookの設定 facebook機能を使用するには、次のことを行う必要があります「 facebook developer https //developers facebook com/ 」のウェブサイトにアクセスし、アカウントを作成してログインします。「 my apps https //www facebook com/login php?next=https%3a%2f%2fdevelopers facebook com%2fapps%2f 」に移動し、「 \新しいアプリを追加\ 」をクリックします。左のパネルで、「 \設定\ 」をクリックし、「 \基本\ 」を選択します。このページであなたの \アプリid\ をメモしてください。「 \プライバシーポリシーのurl\ 」を追加します。「 \カテゴリ\ 」を選択します。下にスクロールして、「 \変更を保存\ 」をクリックします。 4\ 同じページの上部で、「 \オフ\ 」ボタンをクリックし、「確認」してアプリを公開します。 5\ 同じページを下にスクロールし、「 \プラットフォームを追加\ 」をクリックします。このチュートリアルでは、「 android 」を選択しましょう。あなたの \google play パッケージ名\ を追加します。私たちの場合は com back4app myapp です。あなたの \キーハッシュ\ を追加します（ \keytool exportcert alias androiddebugkey keystore / android/debug keystore | openssl sha1 binary | openssl base64\ を実行して自分のものを見つけます） \変更を保存\ 6\ 左のパネルで、「 \ダッシュボード\ 」に戻るためにスクロールダウンし、「 \facebook ログイン\ 」をクリックします。 2 facebookアプリをback4appにリンクするアプリダッシュボードに移動し、 back4appウェブサイト https //www back4app com/ をクリックします。 \サーバー設定\ 「facebookログイン」ブロックを見つけて、 \設定\ をクリックします。「facebookログイン」ブロックはこのようになります 3\ 前のステップでメモしたfacebook \アプリid\ を追加します。 3 セットアップこのチュートリアルでは、前のメール認証を伴うユーザー登録 https //www back4app com/docs/ionic/user registration email verification から始めます。 4 facebookログインまず、facebookのcordovaプラグインをインストールしましょう $ ionic cordova plugin add cordova plugin facebook4 variable app id="xxxxxxxx" variable app name="xxxxxxxx" $ npm install save @ionic native/facebook では、次に \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\ でアプリをテストしてください。にログインします。 back4appウェブサイト https //www back4app com/ 。アプリを見つけて、 \ダッシュボード\ > \コア\ > \ブラウザ\ > \ユーザー\ をクリックして、作成したユーザーを確認してください！完了しました！この段階で、back4appを通じてparse serverのコア機能を使用して、facebookでアプリにログイン、登録、ログアウトできます！