آموزش فیس بوک در برنامه نویسی آیونیک

3 سال پیش

آموزش فیس بوک در برنامه نویسی آیونیک

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش فیس بوک در برنامه نویسی آیونیک خواهیم پرداخت.

این افزونه برای اتصال به Facebook API استفاده می شود. قبل از شروع ادغام فیس بوک ، باید یک برنامه فیس بوک در اینجا ایجاد کنید. شما یک برنامه وب ایجاد خواهید کرد و سپس از صفحه شروع سریع رد می شوید. سپس، باید بستر وب سایت را در صفحه تنظیمات اضافه کنید. در حین توسعه می توانید از قطعه کد زیر برای URL سایت استفاده کنید.

http://localhost:8100/

پس از آن ، باید URI های هدایت OAuth معتبر را در صفحه تنظیمات / پیشرفته اضافه کنید. فقط دو URL زیر را کپی کنید.

https://www.facebook.com/connect/login_success.html
http: // localhost: 8100 / oauthcallback.html

نصب پلاگین Facebook

ما برای حل برخی از مواردی که اغلب هنگام استفاده از این افزونه ظاهر می شوند، تمام مراحل بالا را انجام دادیم. راه اندازی این افزونه دشوار است زیرا مراحل زیادی در این زمینه وجود دارد و اسناد و مدارک همه آنها را پوشش نمی دهد. همچنین برخی از مشکلات سازگاری با سایر افزونه های Cordova شناخته شده است، بنابراین ما از نسخه پلاگین تأیید شده Teleric در برنامه خود استفاده خواهیم کرد. ما با نصب بستر مرورگر در برنامه خود از خط فرمان شروع خواهیم کرد.

C: \ Users \ Username \ Desktop \ MyApp> ionic platform browser add browser

در مرحله بعد، آنچه باید انجام دهیم این است که عنصر ریشه را در بالای برچسب body در index.html اضافه کنیم.

index.html

<div id = "fb-root"></div>

اکنون ما افزونه Cordova Facebook را به برنامه خود اضافه خواهیم کرد. برای مطابقت با برنامه فیس بوکی که قبلاً ایجاد کرده اید ، باید APP_ID و APP_NAME را تغییر دهید.

C:\Users\Username\Desktop\MyApp>cordova -d plugin add 
   https://github.com/Telerik-Verified-Plugins/Facebook/ 
   --variable APP_ID = "123456789" --variable APP_NAME = "FbAppName"

حالا index.html را باز کنید و کد زیر را بعد از برچسب بدن خود اضافه کنید. باز هم باید مطمئن شوید که appId و نسخه با برنامه فیس بوکی که ایجاد کرده اید مطابقت دارند. با این کار بارگیری همزمان SDK فیس بوک بدون مسدود کردن بقیه برنامه ها تضمین می شود.

index.html

<script>
   window.fbAsyncInit = function() {
      FB.init({
         appId      : '123456789',
         xfbml      : true,
         version    : 'v2.4'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

سرویس انگولار

از آنجا که همه موارد را نصب کردیم ، باید خدماتی ایجاد کنیم که ارتباط ما با فیس بوک باشد. این کارها را می توان با کد کمتری در کنترلر انجام داد ، اما ما سعی می کنیم بهترین روش ها را دنبال کنیم ، بنابراین از سرویس Angular استفاده خواهیم کرد. کد زیر کل سرویس را نشان می دهد. بعداً توضیح خواهیم داد.

.service('Auth', function($q, $ionicLoading) {
   this.getLoginStatus = function() {
      var defer = $q.defer();
      
      FB.getLoginStatus(function(response) {
           if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in");
         }
      });

      return defer.promise;
   }
   this.loginFacebook = function() {
      var defer = $q.defer();

      FB.login(function(response) {
           if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in!");
         }
      });

      return defer.promise;
   }
   this.logoutFacebook = function() {
      var defer = $q.defer();

      FB.logout(function(response) {
         console.log('You are logged out!');
      });

      return defer.promise;
   }
   this.getFacebookApi = function() {
      var defer = $q.defer();

      FB.api("me/?fields = id,email", [], function(response) {
        
         if (response.error) {
            console.log(JSON.stringify(response.error));
         } else {
            console.log(JSON.stringify(response));
         }
      });

      return defer.promise;
   }
});

در سرویس فوق، ما در حال ایجاد چهار تابع هستیم. سه مورد اول خود توضیحی هستند. تابع چهارم برای اتصال به API نمودار Facebook استفاده می شود. شناسه و ایمیل کاربر فیس بوک را برمی گرداند.

ما در حال ایجاد اشیا promise برای مدیریت توابع JavaScript غیر همزمان هستیم. اکنون باید کنترل کننده خود را بنویسیم که این توابع را فراخوانی کند. برای درک بهتر هر عملکرد را جداگانه فراخوانی خواهیم کرد ، اما احتمالاً لازم است برخی از آنها را با هم مخلوط کنید تا جلوه مورد نظر را بدست آورید.

کد کنترل کننده

.controller('MyCtrl', function($scope, Auth, $ionicLoading) {
   
   $scope.checkLoginStatus = function() {
      getLoginUserStatus();
   }

   $scope.loginFacebook = function(userData) {
      loginFacebookUser();
   };

   $scope.facebookAPI = function() {
      getFacebookUserApi();
   }

   $scope.logoutFacebook = function() {
      logoutFacebookUser();
   };

   function loginFacebookUser() {
      return Auth.loginFacebook();
   }

   function logoutFacebookUser() {
      return Auth.logoutFacebook();
   }

   function getFacebookUserApi() {
      return Auth.getFacebookApi();
   }

   function getLoginUserStatus() {
      return Auth.getLoginStatus();
   }
})

احتمالاً از خود می پرسید که چرا ما سرویس Auth را مستقیماً از عبارات تابع (چهار تابع اول) برنگرداندیم. دلیل این امر این است که احتمالاً بعد از بازگشت تابع Auth می خواهید رفتار دیگری نیز به آن اضافه کنید. ممکن است برخی از داده ها را به پایگاه داده خود بفرستید ، مسیر را پس از ورود به سیستم تغییر دهید و غیره. این کار به راحتی با استفاده از روش ()JavaScript then انجام می شود تا تمام عملیات ناهمزمان به جای برگشت تماس انجام شود.

اکنون باید به کاربران اجازه دهیم با برنامه ارتباط برقرار کنند. HTML ما شامل چهار دکمه برای فراخوانی چهار عملکرد ایجاد شده است.

کد HTML

<button class = "button" ng-click = "loginFacebook()">LOG IN</button>
<button class = "button" ng-click = "logoutFacebook()">LOG OUT</button>
<button class = "button" ng-click = "checkLoginStatus()">CHECK</button>
<button class = "button" ng-click = "facebookAPI()">API</button>

وقتی کاربر روی دکمه LOG IN ضربه می زند، صفحه فیس بوک ظاهر می شود. پس از موفقیت در ورود به سیستم ، کاربر به برنامه هدایت می شود.

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

نویسنده مطلب erfan molaei

آموزش فیس بوک در برنامه نویسی آیونیک

آموزش فیس بوک در برنامه نویسی آیونیک

نصب پلاگین Facebook

index.html

index.html

سرویس انگولار

کد کنترل کننده

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

بدون دیدگاه

آموزش فیس بوک در برنامه نویسی آیونیک

نصب پلاگین Facebook

index.html

index.html

سرویس انگولار

کد کنترل کننده

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه