Ionic开发入门教程_9

Facebook整合

　　到了本系列的最后一章了，与其说是翻译，不如说是逼着自己从头到尾做一系列的解释和说明。因为这边教程本身就很容易看懂，甚至都没有翻译的必要，但既然要做这个翻译工作了，就善始善终吧~
　　原文链接：http://ccoenraets.github.io/ionic-tutorial/ionic-facebook-integration.html
　　

---

第九章 Facebook整合

　　在这一章节中，你将整合Facebook到你的应用中去。你允许用户使用Facebook登录，访问他们的权限，然后分享他们喜欢的一些缓存信息。

　　在这个教程里，你将使用 OpenFB来实现整合。OpenFB是一个微型库来连接你的JavaScript应用程序与Facebook。它对基于浏览器或者Cordova/PhoneGap应用都试用。它也不会有任何依赖性：你不需要在Cordova运行Facebook的插件，也不需要Facebook的SDK。更多的信息，可以从这里获取。
　　

---

步骤1：创建一个Facebook应用

1. 登录至Facebook

2. 访问 https://developers.facebook.com/apps, 然后点击 Add New App

3. 选择 www 作为平台

4. 为你的App输入一个唯一的名字，然后点击 Create New Facebook App ID

5. 指定一个分类，然后点击Create App ID

6. 在菜单点击My Apps，然后选中你刚创建的App

7. 在左侧导航点击Settings

8. 点击Advanced Tab

9. 在OAuth Settings部分，在URL验证框中，添加如下的URL链接：

   • http://localhost:8100/oauthcallback.html (访问ionic服务)
   • https://www.facebook.com/connect/login_success.html (从Cordova访问)

10. Click Save Changes

---

步骤2：初始化OpenFB

1. Add the OpenFB files to your application

   • 从ionic-tutorial/resources复制openfb.js和ngopenfb.js 到conference/www/js。
   • 从ionic-tutorial/resources复制oauthcallback.html和logoutcallback.html到conference/www。

   • 在conference/www/index.html,添加包括openfb.js和ngopenfb.js的script标签 (在app.js之前)：

     <script src="js/openfb.js"></script>
     <script src="js/ngopenfb.js"></script>

         **ngOpenFB**只是一个Angular包装的**OpenFB**库。它能使你像使用Angular服务一样使用，而不是作为全局变量，而且使用契约替代了回调。
     

2. 打开conference/www/js/app.js, 把ngOpenFB作为依赖添加到starter模块中：

   angular.module('starter', ['ionic', 'starter.controllers', 'ngOpenFB'])

3. 在run()方法的声明中，注入ngFB:

   .run(function ($ionicPlatform, ngFB) {

4. 在run()方法的第一行中初始化OpenFB。使用你Facebook应用中的App_ID来替换YOUR_FB_APP_ID.

   ngFB.init({appId: 'YOUR_FB_APP_ID'});

---

步骤3：添加Facebook登录

1. 打开conference/www/templates目录下的login.html页面。在已经存在的Log In按钮后，添加一个Login with Facebook按钮。

   <label class="item">
       <button class="button button-block button-positive" ng-click="fbLogin()">
       Login with Facebook
       </button>
   </label>

   注意：使用了ng-click调用的`fbLogin()`方法，你需要在下一步中定义`fbLogin()`方法。
   

2. 打开conference/www/js/controllers.js文件，然后添加ngOpenFB作为starter.controllers模块的依赖性：

   angular.module('starter.controllers', ['starter.services', 'ngOpenFB'])

3. 在AppCtrl中注入ngFB:

   .controller('AppCtrl', function ($scope, $ionicModal, $timeout, ngFB) {

4. 在AppCtrl控制器中，添加fblogin方法(就在doLogin之后):

   $scope.fbLogin = function () {
       ngFB.login({scope: 'email,read_stream,publish_actions'}).then(
           function (response) {
               if (response.status === 'connected') {
                   console.log('Facebook login succeeded');
                   $scope.closeLogin();
               } else {
                   alert('Facebook login failed');
               }
           });
   };

5. 测试应用

   • 确保你的本地Ionic服务一直在运行。如果有在运行，只是关闭了浏览器，可以通过如下链接：http://localhost:8100 来重新加载。若没有运行，请打开命令行，导航到ionic-tutorial目录下输入：

   ionic serve

   • 在应用中，打开侧边菜单选择Login。

   • 点击Login with Facebook button

   • 在Facebook登录页面，输入你的凭证信息登录，向应用授权。

   • 打开浏览器控制台，你捡回看到Facebook登录成功信息。

     下一次登录时，将不会再要求输入凭证，因为你已经有了一个有效的令牌。为了再次测试登录过程，干脆退出Facebook。**OpenFB**需要要注销和撤销权限，超出了本教程的讨论的范围。
     

---

步骤4: 展示用户信息

1、 创建一个展示用户信息的模版。在conference/www/templates目录中，创建一个新的文件，命名为profile.html，然后按如下内容进行实现：

<ion-view view-title="Profile">
    <ion-content class="has-header">
        <div class="list card">
            <div class="item">
                <h2>{{user.name}}</h2>
                <p>{{user.city}}</p>
            </div>
            <div class="item item-body">
                <img src="http://graph.facebook.com/{{user.id}}/picture?width=270&height=270"/>
            </div>
        </div>
    </ion-content>
</ion-view>

2、为用户信息视图创建控制器，打开controllers.js，添加如下的控制器：

.controller('ProfileCtrl', function ($scope, ngFB) {
    ngFB.api({
        path: '/me',
        params: {fields: 'id,name'}
    }).then(
        function (user) {
            $scope.user = user;
        },
        function (error) {
            alert('Facebook error: ' + error.error_description);
        });
});

3、为用户信息视图创建一个路由，打开app.js，然后添加如下路由：

.state('app.profile', {
    url: "/profile",
    views: {
        'menuContent': {
            templateUrl: "templates/profile.html",
            controller: "ProfileCtrl"
        }
    }
})

4、打开www/templates/menu.html，然后添加如下的菜单项：

<ion-item menu-close href="#/app/profile">
    Profile
</ion-item>

5、测试应用：

• 确保你的本地Ionic服务一直在运行。如果有在运行，只是关闭了浏览器，可以通过如下链接：http://localhost:8100 来重新加载。若没有运行，请打开命令行，导航到ionic-tutorial目录下输入：

ionic serve

• 打开侧边菜单，选择Login

• 使用Facebook进行登录

• 打开侧边菜单，然后选择Profile

---

步骤5: 发布你的线上

1、打开controllers.js,在SessionCtrl中注入ngFB：

.controller('SessionCtrl', function ($scope, $stateParams, Session, ngFB) {

2、在SessionCtrl控制器中添加一个share()方法：

$scope.share = function (event) {
    ngFB.api({
        method: 'POST',
        path: '/me/feed',
        params: {
            message: "I'll be attending: '" + $scope.session.title + "' by " +
            $scope.session.speaker
        }
    }).then(
        function () {
            alert('The session was shared on Facebook');
        },
        function () {
            alert('An error occurred while sharing this session on Facebook');
        });
};

3、在templates 目录中打开session.html，然后添加为Share按钮添加一个ng-click方法：

<a class="tab-item" ng-click="share()">
    <i class="icon ion-share"></i>
    Share
</a>

4、测试应用：

• 确保你的本地Ionic服务一直在运行。如果有在运行，只是关闭了浏览器，可以通过如下链接：http://localhost:8100 来重新加载。若没有运行，请打开命令行，导航到ionic-tutorial目录下输入：

ionic serve

• 打开侧边菜单，选择Login

• 使用Facebook登录

• 打开侧边菜单，选择Sessions，然后选择列表中的一个session

• 点击Share按钮

• 在Facebook上查看你的分享

---

步骤6: 在设备上测试Facebook整合(可选)

1、在Cordova中添加OpenFB使用的InAppBrowser插件，在命令行中，导航至ionic-tutorial/conference目录，然后输入：

cordova plugins add org.apache.cordova.inappbrowser

2、按照第八章中的步骤，编译一个指定平台下的应用：

ionic build ios

或者

ionic build android

如果添加插件后编译失败，尝试移除并重新添加平台。例如：

ionic platform remove ios
ionic platform add ios
ionic build ios

3、在IOS或者Android设备或模拟器上，运行并测试你的应用。

---

　　好了，至此，本系列入门教程终于翻译完毕了，鬼知道我经历了什么。
　　翻译这个系列的文章，感慨如下：
　　

• 真正前沿的技术文章及分享，都是或者大多都是英文的，所以英文很重要！！！重要！！要！
• 国外的技术大佬，技术真的很牛，但实操性更好，跟随他们的教程，可以从前至后完整实现一个项目

• Ionic框架很有前途，值得好好玩味

  　虽然这个系列的翻译完成，但自己仍然不是特别满意，系统以后在其他的系列文章中，继续努力，加油！