/ / / / สร้าง facebook authentication ด้วย angularjs อย่างง่าย : how to make facebook authen with angularjs

สร้าง facebook authentication ด้วย angularjs อย่างง่าย : how to make facebook authen with angularjs

, , Edit
ต้องยอมรับครับว่าหลาย ๆ เว็บการเข้าสู่ระบบหรือการสมัครสมาชิกใช้งานผ่าน facebook authen ซึ่งก็สามารถการันตียอมรับ user นั้นได้ในระดับหนึ่งคือผ่านการยืนยันตัวตนผ่านทางเฟสบุ๊คมาแล้วว่ามีอยู่จริง หากใช้ angularjs แล้วด้วยยิ่งจะทำให้การทำระบบนี้รวดเร็วมายิ่งในแง่ของการประมวลผลโดยอาศัยความสามารถของ angularjs นั่นเอง อนาคตอาจประยุคนำไปใช้ใน progressive web app ได้เลยทีเดียว เอาละลองมาดูกันว่าทำอย่างไรบ้าง มาดูจากตัวอย่างโค๊ตกันครับ


  • view 
    • index.html
      • <!DOCTYPE html>
      <html ng-app="facebookAngularjs">
      <head>
      <title>Facebook authentification with angularJS By Samark Chaisanguan</title>
      <script type="text/javascript" src="js/angular.min.js"></script>
      <script type="text/javascript" src="js/angular-route.min.js"></script>
      <script type="text/javascript" src="js/main.js"></script>
      <script type="text/javascript" src="js/config/moduleConfig.js"></script>
      <script type="text/javascript" src="js/factory/facebookFactory.js"></script>
      <script type="text/javascript" src="js/controllers/mainController.js"></script>
      <script type="text/javascript" src="js/services/serviceLocalStorage.js"></script>
      <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
      </head>
      <body>
      <div class="container" ng-view>
      </div>
      </body>
      </html>
      view raw index.html hosted with ❤ by GitHub
    • display.html
      • <div id="fb-root"></div>
      <fb:login-button show-faces="true" max-rows="1" size="large"></fb:login-button>
      {{ name }}
      <br>
      name: {{ list.item.name}}<br>
      lastName: {{ list.item.lastName}}
      <pre>
      {{ list | json}}
      </pre>
      <pre>
      {{ profile |json}}
      </pre>
      </div>
      view raw display.html hosted with ❤ by GitHub
  • js
    • main.js
      • (function() {
      "use strict";
      var facebookAngularjs = angular.module('facebookAngularjs', [
      'ngRoute',
      'mainController',
      'moduleConfig',
      ]);
      facebookAngularjs.config(function($routeProvider) {
      $routeProvider.when('/index', {
      templateUrl: 'display.html',
      controller: 'mainController'
      }).otherwise({
      redirectTo: '/index'
      });
      });
      }
      view raw main.js hosted with ❤ by GitHub
    • controllers
      • mainController.js
        • /** main controller */
        (function(){
        var mainController = angular.module('mainController', ['moduleConfig','facebookFactory','serviceLocalStorage']);
        mainController.controller('mainController', ['$scope', '$window', 'config','facebook','localStorage',
        function($scope, $window ,config,facebook,localStorage) {
        console.log(config);
        facebook.checkConnect().then(function(status){
        /** case already authen */
        console.log(status);
        console.log(facebook.getProfile());
        facebook.getProfile().then(function(data){
        $scope.profile = data;
        localStorage.set('profile',angular.toJson(data));
        });
        },function(err){
        console.log(error);
        });
        }]);
        }());
        view raw mainController.js hosted with ❤ by GitHub
    • config
      • moduleConfig.js
        • /** config constant */
        (function() {
        var moduleConfig = angular.module('moduleConfig', []);
        moduleConfig.constant('config', {
        local: {
        baseUrl: 'http://localhost',
        getprofile: '/get-profile',
        register: '/register',
        removeProfile: '/remove-profile',
        getall: 'get-all-profile',
        },
        alpha: {
        baseUrl: 'http://localhost',
        getprofile: '/get-profile',
        register: '/register',
        removeProfile: '/remove-profile',
        getall: 'get-all-profile',
        },
        staging: {
        baseUrl: 'http://localhost',
        getprofile: '/get-profile',
        register: '/register',
        removeProfile: '/remove-profile',
        getall: 'get-all-profile',
        },
        production: {
        baseUrl: 'http://localhost',
        getprofile: '/get-profile',
        register: '/register',
        removeProfile: '/remove-profile',
        getall: 'get-all-profile',
        },
        });
        /** config constant language */
        moduleConfig.constant('lang', {
        th: {
        message: {
        success: 'ทำรายการสำเร็จ',
        fail: 'ไม่สามารถทำรายการได้',
        },
        error: {
        404: 'ไม่พบหน้าที่คุณเรียก',
        500: 'เกิดข้อผิดพลาด',
        },
        display: {},
        alert: {},
        alert: {},
        },
        en: {
        message: {
        success: 'ทำรายการสำเร็จ',
        fail: 'ไม่สามารถทำรายการได้',
        },
        error: {
        404: 'ไม่พบหน้าที่คุณเรียก',
        500: 'เกิดข้อผิดพลาด',
        },
        display: {},
        alert: {},
        alert: {},
        },
        });
        /** config facebook constant */
        moduleConfig.constant('facebookConfig', {
        appId: '295136370824606',
        status: true,
        cookie: true,
        xfbml: true,
        version: 'v2.4'
        });
        }());
        view raw moduleConfig.js hosted with ❤ by GitHub
    • factory 
      • facebookFactory.js
        • /** facebook factory */
        var facebookFactory = angular.module('facebookFactory', ['moduleConfig']);
        facebookFactory.service('facebook', ['$window','facebookConfig', 'connect','getProfile',
        function($window,facebookConfig,connect,getProfile) {
        var init = function() {
        $window.fbAsyncInit = function() {
        FB.init({
        appId: facebookConfig.appId,
        status: facebookConfig.status,
        cookie: facebookConfig.cookie,
        xfbml: facebookConfig.xfbml,
        version: facebookConfig.version
        });
        };
        };
        init();
        this.checkConnect = function(){
        return connect.status();
        };
        this.getProfile = function() {
        return getProfile.profile();
        }
        }]);
        /** check status connect*/
        facebookFactory.factory('connect', function($q) {
        return {
        status: function() {
        var deferred = $q.defer();
        FB.Event.subscribe('auth.authResponseChange', function(res) {
        if (res.status === 'connected') {
        deferred.resolve(res);
        } else {
        deferred.reject('error');
        }
        });
        return deferred.promise;
        }
        };
        });
        /** get profile */
        facebookFactory.factory('getProfile', function($q) {
        return {
        profile: function() {
        var deferred = $q.defer();
        FB.api('/me', {
        fields: 'name,last_name,email'
        }, function(response) {
        console.log(response);
        if (!response || response.error) {
        deferred.reject('Error occured');
        } else {
        deferred.resolve(response);
        }
        });
        return deferred.promise;
        }
        };
        });
        view raw facebookFactory.js hosted with ❤ by GitHub
    • service
      • serviceLocalStorage.js
        • /** service local storage */
        (function() {
        var serviceLocalStorage = angular.module('serviceLocalStorage', []);
        serviceLocalStorage.service('localStorage', function() {
        this.set = function(key, value) {
        return localStorage.setItem(key, value);
        };
        this.get = function(key) {
        return localStorage.getItem(key);
        };
        this.del = function(key) {
        return localStorage.removeItem(key);
        }
        this.cls = function() {
        return localStorage.clear();
        }
        });
        }());
        view raw serviceLocalStorage.js hosted with ❤ by GitHub
Share on Google Plus

About maxcom

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 ความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ส่งความคิดเห็น ( Atom )