이번 장에서 애플리케이션에 페이스북 연동을 추가합니다. 사용자들의 피드에 페이스북에 로그인, 프로파일 조회, 즐겨찾는 세션들을 공유하기 위해서 허락합니다.
이번 튜토리얼에서 연동하기 위해서 OpenFB를 사용합니다. OpenFB는 페이스북과 자바스크립트 애플리케이션의 연동을 위한 아주 작은 라이브러리입니다. 브라우저, Crodova/PhoneGap 앱 모두 동작하고 아무런 의존성도 없습니다: Cordova에서 실행할때에 페이스북 플러그인은 필요 없습니다. 또한 페이스북 SDK조차 필요 없습니다. 더 자세한 내용은 여기에 있습니다.
페이스북에 로그인합니다.
https://developers.facebook.com/apps을 접속하여Add New App을 클릭합니다.
플랫폼을 www으로 선택합니다.
앱의 고유한 이름을 입력하고 Create New Facebook App ID 을 클릭합니다.
Category을 지정하고 Create App ID를 클릭합니다.
메뉴에서 My Apps을 클릭하고 막 생성한 앱을 선택합니다.
왼쪽 메뉴에서 Settings를 클릭합니다.
Advanced Tab를 클릭합니다.
OAuth Settings 부분에서 Valid OAuth redirect URIs 항목안에 다음 URL을 추가합니다:
Save Changes를 클릭합니다.
애플리케이션에 OpenFB 파일을 추가합니다.
conference/www/index.html에서 openfb.js와 ngopenfb.js를 포함하기 위한 스크립트 태그를 추가합니다 (app.js 이전):
GitHub
Project<script src="js/openfb.js"></script>
<script src="js/ngopenfb.js"></script>
ngOpenFB는 OpenFB 라이브러리를 Angular가 감싼 것 뿐입니다. 이렇게 OpenFS를 Angular 방법으로 사용합니다: Angular 서비스 (ngFB)가 전역 객체를 대신함으로써 콜백 대신 프라미스를 사용
conference/www/js/app.js를 열고 starter module에 의존으로 ngOpenFB를 추가합니다.
ngFB를 run() 함수 선언에 추가합니다.
.run(function ($ionicPlatform, ngFB) {
run() 함수의 첫번째 줄에 OpenFB를 초기화 합니다. YOUR_FB_APP_ID를 페이스북 애플리케이션의 앱 ID로 수정합니다:
ngFB.init({appId: 'YOUR_FB_APP_ID'});
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>
fbLogin()은 ng-click에 의해서 호출됩니다. 다음 단계에서 fbLogin()을 정의합니다.
conference/www/js/controllers.js을 열고 starter.controllers module에 의존으로 ngOpenFB를 추가합니다.
angular.module('starter.controllers', ['starter.services', 'ngOpenFB'])
AppCtrl 컨트롤러에 ngFB를 추가합니다:
.controller('AppCtrl', function ($scope, $ionicModal, $timeout, ngFB) {
AppCtrl 컨트롤러에 fbLogin 함수를 추가합니다 (doLogin 함수 바로 다음):
$scope.fbLogin = function () {
ngFB.login({scope: 'email,publish_actions'}).then(
function (response) {
if (response.status === 'connected') {
console.log('Facebook login succeeded');
$scope.closeLogin();
} else {
alert('Facebook login failed');
}
});
};
애플리케이션을 테스트합니다.
ionic serve (로컬 웹 서버)가 여전히 실행중인지 확인하세요. 실행중이지만 브라우저의 앱 페이지를 닫았다면, http://localhost:8100 URL을 접속하여 앱을 재시작 할 수 있습니다. 실행중이지 않다면 커맨드 프롬프트를 열고 ionic-tutorial 디렉토리로 이동후 입력하세요:
ionic serve
애플리케이션에서 슬라이드 메뉴를 열고 Login을 선택하세요
Login with Facebook 버튼을 클릭하세요
페이스북 로그인 화면에서 인증정보를 입력하고 애플리케이션을 허가하세요
브라우저 콘솔을 열고 Facebook login succeeded 메세지를 확인하세요
다음번 로그인에서 이미 올바른 토큰을 발급받은 이후에 인증정보를 다시 물어보지 않을 것입니다. 로그인을 또 다시 테스트하기 위해서 페이스북에서 로그아웃을 하세요. OpenFB 라이브러리는 로그아웃과 이번 튜토리얼의 영역을 넘어 권환을 폐지하는 추가적인 방법을 가지고 있습니다.
사용자 프로파일 뷰를 위한 템플릿을 생성합니다. 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>
사용자 프로파일 뷰를 위해서 컨트롤러를 생성합니다. 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);
});
});
사용자 프로파일 뷰를 위해서 라우트를 생성합니다. app.js를 열고 다음과 같이 라우트를 작성합니다:
.state('app.profile', {
url: "/profile",
views: {
'menuContent': {
templateUrl: "templates/profile.html",
controller: "ProfileCtrl"
}
}
})
www/templates/menu.html를 열고 다음과 같이 menu item을 작성합니다:
<ion-item menu-close href="#/app/profile">
Profile
</ion-item>
애플리케이션을 테스트합니다.
ionic serve (로컬 웹 서버)가 여전히 실행중인지 확인하세요. 실행중이지만 브라우저의 앱 페이지를 닫았다면, http://localhost:8100 URL을 접속하여 앱을 재시작 할 수 있습니다. 실행중이지 않다면 커맨드 프롬프트를 열고 ionic-tutorial 디렉토리로 이동후 입력하세요:
ionic serve
애플리케이션에서 슬라이드 메뉴를 열고 Login을 선택하세요
페이스북에 로그인 하세요
슬라이드 메뉴를 열고 Profile를 선탁하세요.
controllers.js를 열고 SessionCtrl 정의에 ngFB를 추가하세요:
.controller('SessionCtrl', function ($scope, $stateParams, Session, ngFB) {
share() 함수를 SessionCtrl 컨트롤러에 추가하세요:
$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');
});
};
템플릿 디렉토리의 session.html을 열고 share 함수를 실행할 공유 버튼을 위해 ng-click을 추가하세요:
<a class="tab-item" ng-click="share()">
<i class="icon ion-share"></i>
Share
</a>
애플리케이션을 테스트합니다.
ionic serve (로컬 웹 서버)가 여전히 실행중인지 확인하세요. 실행중이지만 브라우저의 앱 페이지를 닫았다면, http://localhost:8100 URL을 접속하여 앱을 재시작 할 수 있습니다. 실행중이지 않다면 커맨드 프롬프트를 열고 ionic-tutorial 디렉토리로 이동후 입력하세요:
ionic serve
애플리케이션에서 슬라이드 메뉴를 열고 Login을 선택하세요
페이스북에 로그인 하세요
슬라이드 메뉴를 열고 Sessions를 선택하고 목록중에 한 세션을 선택합니다
Share 버튼을 클릭/탭 합니다
페이스북 피드를 확인하세요
Cordova가 실행할 때 OpenFB가 사용하는 InAppBrowser 플러그인을 추가하세요. 커맨드 라인에서 ionic-tutorial/conference 디렉토리로 이동하고 입력하세요:
cordova plugins add org.apache.cordova.inappbrowser
제 8장에서 설명한 단계를 따라서 특정한 플랫폼에 맞는 애플리케이션을 빌드하세요:
ionic build ios
또는
ionic build android
플러그인을 추가한 후에 빌드가 실패했다면, 플랫폼을 삭제하고 다시 추가하세요. 예를들면:
ionic platform remove ios
ionic platform add ios
ionic build ios
iOS나 Android 장치 또는 에뮬레이터에서 애플리케이션을 실행하고 테스트하세요.