Monaca Docs
  • Monaca とは
  • 最初のアプリを作る
  • アプリをテストする
  • Monaca リリース情報
    • iOS プライバシーマニフェスト対応
    • 「ニフクラ mobile backend」終了に関するお知らせ
    • プラグイン uses-permission タグの重複修正機能
    • Cordova 12 の変更点
    • iOSストア版Monaca デバッガー配信停止と代替機能のご案内
    • iOS App Store への送信エラー (ITMS-90165)
    • cordova-custom-configのビルドエラー
    • Cordova 11 の変更点
    • Cordova 10 の変更点
    • Cordova 9.0 の変更点
    • 利用規約の変更
    • 新しい Monaca CLI と Localkit
    • CordovaからCapacitorへの移行
  • Monacaガイド
    • Monaca での開発の概要
    • Monaca クラウド IDE
      • 概要
      • Monaca クラウド IDE の機能
      • ターミナル機能
      • エディターのショートカット一覧
      • プロジェクトの構成
        • ファイル・フォルダー構成
        • JS/CSS コンポーネント
        • Cordova プラグイン
        • ユーザー Cordova プラグイン
      • バージョン管理
        • 概要
        • GitHub との連携
        • Git SSH との連携
      • Monaca CI
        • 概要
        • アプリ配信 / 配布サービス (デプロイサービス)
        • Appetize.ioへの配信
        • DeployGateへの配信
        • Firebase への配信
      • ビルド
        • iOS アプリのビルド
          • iOS アプリのビルド
          • Monaca と Xcode 間でのビルド設定の再利用
        • Android アプリのビルド
        • Windows アプリのビルド
        • Electron アプリのビルド
          • Windows アプリのビルド
        • PWA アプリのビルド
        • ビルド環境の設定
        • ビルド履歴一覧
        • 一般的なビルドとアップロードエラー
      • 配布方法
        • App Store での配布
          • App Store Connect ガイド
          • iOS アプリ アップロード機能
        • Google Play での配布
        • 公式ストア経由以外での配布
      • パッケージダウンロード機能
      • チュートリアル
    • Monaca Localkit
      • 概要
      • ペアリングとデバッグ
      • リモートビルドと配布申請
      • トラブルシューティング
        • インストール ( Windows の場合 )
        • インストール ( Mac OS X の場合 )
        • アンインストール時 ( Windows の場合 )
        • 不完全なファイル・フォルダー構成
        • プレビューウィンドウが更新されない
        • Error while installing
        • nodeのインストールが必要です
      • チュートリアル
    • Monaca CLI
      • 概要
      • Monaca CLI コマンド
      • ペアリングとデバッグ
      • リモートビルドと配布申請
      • トラブルシューティング ガイド
      • チュートリアル
    • Monaca デバッガー
      • 機能の概要
      • インストール方法
        • Android 向けの Monaca デバッガー
        • iOS 向け Monaca デバッガー
        • Android エミュレーター向け Monaca デバッガー
      • 使用例
      • iOS カスタムビルド版デバッガー
      • iOS シミュレータービルド
      • トラブルシューティング ガイド
      • チュートリアル
    • チームダッシュボード
    • クイックビューア
    • 他のプラットフォームからの移行
      • 移行時の確認ポイント
      • クラウドIDE プレビュー機能の設定
      • Angular からの移行
      • Ionic からの移行
      • React からの移行
      • Vue からの移行
      • Telerik からの移行
  • 🛠️アプリビルド
    • iOS ビルド
      • 秘密鍵とCSRの作成
      • 証明書の作成
      • プロビジョニング・プロファイルの更新
  • チュートリアル
    • Monaca クラウド IDE チュートリアル
      • パート 1 : プロジェクトの作成
      • パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携
      • パート 3 : Monaca アプリのビルド
      • パート 4 : Monaca アプリの配布申請
    • Monaca Localkit チュートリアル
      • パート 1 : プロジェクトの作成
      • パート 2 : Monaca Localkit と Monaca デバッガーとの連携
      • パート 3 : Monaca アプリのビルド
      • パート 4 : Monaca アプリの配布申請
    • Monaca CLI チュートリアル
      • パート 1 : プロジェクトの作成
      • パート 2 : Monaca CLI と Monaca デバッガーとの連携
      • パート 3 : Monaca アプリのビルド
      • パート 4 : Monaca アプリの配布申請
    • Electron アプリ開発
      • NPMパッケージの利用方法
      • Web APIの利用方法
    • バーコードスキャナープラグイン
    • Cordova Sqlite Storage プラグイン
    • Cordova Google Analytics プラグイン
    • Cordova Firebase プラグイン
    • Cordova In-app Purchase プラグイン
    • Cordova AppVersion プラグイン
    • Cordova Ionic Keyboard プラグイン
    • Cordova Social Sharing プラグイン
    • Phonegap Push プラグイン
  • APIの解説
    • Monaca API
      • Monaca クラウド & リモートビルド API
      • ユーティリティ
    • 基本プラグイン
      • Cordova 12.0
        • Battery プラグイン
        • Camera プラグイン
        • Device プラグイン
        • Device Motion プラグイン
        • Device Orientation プラグイン
        • Dialog プラグイン
        • File プラグイン
        • Geolocation プラグイン
        • InAppBrowser プラグイン
        • Media プラグイン
        • Media Capture プラグイン
        • Network Information プラグイン
        • Vibration プラグイン
        • StatusBar プラグイン
      • Cordova 11.0
        • Battery プラグイン
        • Camera プラグイン
        • Device プラグイン
        • Device Motion プラグイン
        • Device Orientation プラグイン
        • Dialog プラグイン
        • File プラグイン
        • Geolocation プラグイン
        • InAppBrowser プラグイン
        • Media プラグイン
        • Media Capture プラグイン
        • Network Information プラグイン
        • Splashscreen プラグイン
        • Vibration プラグイン
        • StatusBar プラグイン
      • Cordova 10.0
        • Battery プラグイン
        • Camera プラグイン
        • Device プラグイン
        • Device Motion プラグイン
        • Device Orientation プラグイン
        • Dialog プラグイン
        • File プラグイン
        • Geolocation プラグイン
        • InAppBrowser プラグイン
        • Media プラグイン
        • Media Capture プラグイン
        • Network Information プラグイン
        • Splashscreen プラグイン
        • Vibration プラグイン
        • StatusBar プラグイン
        • Whitelist プラグイン ( Android 専用 )
      • Cordova 9.0
        • バッテリー情報の取得 プラグイン
        • カメラ操作 プラグイン
        • 住所録の取得 プラグイン
        • 端末情報の取得 プラグイン
        • 端末のモーション検知 プラグイン
        • 端末のオリエンテーション検知 プラグイン
        • ダイアログの制御 プラグイン
        • ファイル操作 プラグイン
        • ファイル転送 プラグイン
        • 位置情報の取得 プラグイン
        • 表記の国際化対応 プラグイン
        • InAppBrowser プラグイン
        • メディア操作 プラグイン
        • メディアキャプチャー プラグイン
        • ネットワーク情報の取得 プラグイン
        • スプラッシュスクリーンの制御 プラグイン
        • バイブレーションの制御 プラグイン
        • ステータスバーの制御 プラグイン
        • ホワイトリストへの登録 プラグイン ( Android 専用 )
    • サードパーティー製プラグイン
      • AdvancedHTTPプラグイン
      • PhoneGap BarcodeScanner
      • Custom Config
      • Datepicker
      • Share ( Android 向け )
      • WebIntent ( Android 向け )
    • Monaca 提供プラグイン
      • アプリロジック暗号化 (Encrypt プラグイン)
      • In-App アップデーター (In-App Updater)
      • セキュア ストレージ
      • NFC リーダー
      • バーコードスキャナー
      • Androidビルドメモリサイズ設定
    • 外部サービス連携
      • Repro
      • AppsFlyer
    • 設定ファイル
      • Android
        • Android の設定
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS の設定
        • config.xml
        • MonacaApp-info.plist
  • サンプル & Tips
    • Firestoreを利用する
    • サンプルアプリ
      • Twitter アプリ
      • Facebook アプリ
      • 広告 アプリ (AdMob)
      • Hello World アプリ
      • メモ帳アプリ
      • ブロック崩しゲーム
      • Flickrアプリ
      • TODO管理 アプリ
      • 電車図鑑アプリ
      • 時計アプリ
      • 誕生年の計算アプリ
      • おみくじ占いアプリ
      • RSS リーダーアプリ
    • 開発 Tips
      • 音楽の再生方法
      • スプラッシュ画像の制御方法
      • データベースの利用方法
  • Webpack5への更新
  • 機能
    • SNS 認証
    • プッシュ通知
    • データベース
  • 外部サービス連携ガイド
    • Firebase
      • アプリの登録と設定ファイルの取得
  • 移行ガイド
    • ニフクラ mobile backend
      • プッシュ通知
        • Firebaseサービスの設定
        • ソースコードの移行
      • データストア
        • ソースコードの移行
        • データの移行
        • データ移行スクリプト実行手順
      • 会員管理・認証
        • 会員管理 データの移行
        • Firebase Authentication パスワード再設定サンプル
        • Firebase Authenticationを使用したユーザー名認証の方法
      • スクリプト
        • Firebase Functions開発環境の作成
        • サンプル共通項目
        • サンプル1(GETサンプル)
        • サンプル2(POSTサンプル)
        • サンプル3(DELETEサンプル)
        • エミュレータでのテスト
      • ファイルストア
        • ファイルアップロード
        • ファイル検索
        • ファイル一覧表示
        • ファイル削除
  • FAQ
    • 概要
    • IDE
    • ビルド
    • リリース
    • 契約プラン
    • アプリケーション
    • 使用方法
    • Freeプラン
    • デバッガー
  • 対応環境
  • トラブルシューティング
    • プレビューログがリロードを繰り返す (Vue packages version mismatch error)
  • Monaca製品サイト
  • 運営会社
  • English
GitBook提供
このページ内
  • デモ
  • 事前準備
  • Monaca クラウド IDE へのプロジェクトのインポート
  • プラグインの設定
  • アプリの解説
  • ファイル構成
  • HTML の解説
  • スタイルシートの解説
  • JavaScript の解説

役に立ちましたか?

  1. サンプル & Tips
  2. サンプルアプリ

Facebook アプリ

前へTwitter アプリ次へ広告 アプリ (AdMob)

最終更新 1 年前

役に立ちましたか?

ここでは、Facebook 上でのシングルサインオン ( SSO ) の方法を解説します。Angular 1 と を使用して、Monaca クラウド IDE 上でアプリを構築します。認証処理には、 プラグインを使用します。シングルサインオンには、ネイティブの Facebook アプリを使用します。標準的なダイアログを使用した認証方法の場合、サインオンの処理が著しく遅くなります。

サードパーティー製 Cordova プラグインを確認する場合は、カスタムビルドデバッガー( または )を作成する必要があります。

config.xml に、以下の設定をする必要があります。

<platform name="android">     <preference name="android-minSdkVersion" value="22"/> </platform>

デモ

テスト環境

  • Android 11.0

  • iOS 14.3

事前準備

cordova-plugin-facebook4 プラグインの使用時には、アプリ ID ( APP_ID ) と 表示名 ( APP_NAME ) が必要となります。これらの値は、『 facebook for developers 』 ページ上でアプリの登録を済ませると確認できます。次の手順に従い、アプリの登録を行います。

2. マイアプリ → 新しいアプリを追加を選択します ( [ 新しいアプリを追加 ] サブメニューは、2回目以降にアプリを追加するときに表示されます )。

3. 必要な情報を入力して、アプリ ID を作成してくださいボタンをクリックします。

4. ダッシュボード上で設定を選択します。次に、表示された画面上で アプリ ID ( APP_ID ) と 表示名 ( APP_NAME ) を確認します。

5. +プラットフォームを追加ボタンをクリックして、アプリを実行するプラットフォームを追加します。

6. ここでは Android 上でアプリを実行するため、プラットフォームには Android を選択します。

7. 必要な情報を次のように入力します。入力後、変更を保存 ボタンをクリックします。

  • Google Play パッケージ名 : Android のパッケージ名です。Monaca クラウド IDE の [ Android アプリ設定 ] に設定されている [ Android のパッケージ名 ] と同じものを設定します。

  • シングルサインオン オプションを有効にします。

8. iOS 上でもアプリを実行する場合には、 プラットフォームを追加ボタンをクリックして、iOS を追加します。

9. 必要な情報を次のように入力します。入力後、変更を保存ボタンをクリックします。

  • バンドル ID : iOS の App ID です。App ID には、Monaca クラウド IDE の [ iOS アプリ設定 ] で設定したものを使用します。

  • シングルサインオン オプションを有効にします。

Monaca クラウド IDE へのプロジェクトのインポート

プラグインの設定

プラグインを使用する前に、次のように、[ Cordova プラグイン ] 画面上で APP_ID ( アプリ ID ) と APP_NAME ( 表示名 ) を設定する必要があります。

  1. Monaca クラウド IDE から 設定 → Cordova プラグインの管理を選択します。

  2. 利用可能なプラグイン 項目の cordova-plugin-facebook4 プラグインにカーソルを置き、有効ボタンをクリックします。

4. OKボタンをクリックして、設定を保存します。

アプリの解説

ファイル構成

ファイル

説明

index.html

スタート画面のページ

home.html

ログインページ

profile.html

ユーザープロファイルを表示するページ

css/style.css

アプリのスタイルシート

js/app.js

アプリの実行時にさまざまな処理を行う JavaScript ファイル

HTML の解説

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>
<script src="js/app.js"></script>

<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <body >
      <ons-navigator id="myNavigator" page="home.html"></ons-navigator>
  </body>
</body>
</html>

home.html

<ons-page ng-controller="HomeCtrl">
  <ons-toolbar>
      <div class="center">Facebook Demo</div>
  </ons-toolbar>
  <div class="page">
      <p class="center">
          Welcome to Facebook Authentication Demo with Monaca using Onsen UI and AngularJS!
      </p>
      <ons-button ng-click="Login()">
          Connect to Facebook
      </ons-button>
  </div>
</ons-page>

ログインページです。端末上にログイン情報が残っていれば、profile.html ページへ自動的にリダイレクトされます。

profile.html

<ons-page ng-controller="ProfileCtrl">
  <ons-toolbar>
      <div class="center">Facebook Profile</div>
      <div class="right">
          <ons-toolbar-button ng-click="Logout()">
              <ons-icon icon="fa-sign-out"></ons-icon>
          </ons-toolbar-button>
      </div>
  </ons-toolbar>
  <div class="page">
      <p class="center">
          <img src="{{user.profile_url}}" class="profile">
          <p>{{user.name}}</p>
          <p>(@{{user.id}})</p>
          <p>{{user.email}}</p>
      </p>
  </div>
</ons-page>

ユーザーの Facebook プロファイルを表示するページです。

スタイルシートの解説

こちらのファイルには、Facebook プロファイル上の画像およびページナビゲーション用のバーに適用する CSS スタイルが記述されています。

div.page {
 padding: 5%;
 text-align: center;
}

p.center {
  text-align: center;
}

img.profile {
  width: 40%;
  border: solid 1px #1da1f2;
  border-radius: 5px;
}

.navigation-bar {
  background-color: #4267b2;
}

.button {
  background-color: #4267b2;
}

JavaScript の解説

ons.bootstrap()
.service('StorageService', function() {
  var setLoginUser = function(user_info) {
      window.localStorage.login_user = JSON.stringify(user_info);
  };

  var getLoginUser = function(){
      return JSON.parse(window.localStorage.login_user || '{}');
  };

  return {
      getLoginUser: getLoginUser,
      setLoginUser: setLoginUser
  };
})

.controller('HomeCtrl', function($scope, StorageService, $http, $q) {
  var CheckLoginStatus = function(){
      window.facebookConnectPlugin.getLoginStatus(
          function(data){
              if(data.authResponse){
                  console.log('Login info is found!');
                  myNavigator.pushPage('profile.html');
              }else{
                  console.log('No login info is found!');
              }
          },
          function(e){
              LoginError(e);
          }
      );
  }

  ons.ready(function() {
      CheckLoginStatus();
  });

  var GetProfileInfo = function (authResponse) {
      var info = $q.defer();

      facebookConnectPlugin.api('/me?fields=email,name&access_token=' + authResponse.accessToken, null,
          function (response) {
              info.resolve(response);
          },
          function (response) {
              info.reject(response);
          }
      );
      return info.promise;
  };

  var LoginSuccess = function(response){
      var authResponse = response.authResponse;

      GetProfileInfo(authResponse).then(function(user) {
          StorageService.setLoginUser({
              name: user.name,
              id: user.id,
              email: user.email,
              profile_url: "http://graph.facebook.com/" + authResponse.userID + "/picture?type=large"
          });
          myNavigator.pushPage('profile.html');
      }, function(error){
          console.log('Error retrieving user profile' + JSON.stringify(error));
      });

  };

  var LoginError = function(error){
      console.log('Login Error: ' + JSON.stringify(error));
      // When "User cancelled dialog" error appears
      if (error.errorCode === "4201"){
          CheckLoginStatus();
      }
  };

  $scope.Login = function(){
      facebookConnectPlugin.login(['email', 'public_profile'], LoginSuccess, LoginError);
  }


})
.controller('ProfileCtrl', function($scope, StorageService, $http, $q) {
  $scope.user = StorageService.getLoginUser();

  var LogoutFromFacebook = function(){
      facebookConnectPlugin.logout(
          function() {
              console.log('Successful logout!');
              myNavigator.pushPage("home.html");
          },
          function(error) {
              console.log('Error logging out: ' + JSON.stringify(error));
          }
      );
  }

  $scope.Logout = function(){
      ons.notification.confirm({
          message: "Are you sure you want to log out?",
          title: 'Facebook Demo',
          buttonLabels: ["Yes", "No"],
          callback: function(idx) {
          switch (idx) {
              case 0:
                  LogoutFromFacebook();
              case 1:
                  break;
              break;
          }
        }
      });
  }
});

記述内容を解説します。まず、StorageService と呼ばれる service を 1 つ置いています。このサンプルでは、端末側の LocalStorage を使用して、ユーザーのログイン情報を格納しています。また、home.html と profile.html ページに対して、それぞれ、HomeCtrl と ProfileCtrl コントローラーを設定しています。

HomeCtrl コントローラーには、home.html ページ上で使用する関数が定義されています。home.html ページが読み込まれると、CheckLoginStatus() 関数が実行され、ログイン情報の存否が確認されます。ログイン情報が残っていれば、myNavigator.pushPage() 関数が呼ばれ、profile.html ページが表示されます。profile.html ページでは、ログイン情報と一致した、ユーザーの Facebook プロファイルが表示されます。Connect to Facebookボタンがクリックされると、Login() 関数が実行されます。この関数内で、facebookConnectPlugin.login() が実行され、ネイティブの Facebook 認証ダイアログが表示されます。ログイン成功後、StorageService.setLoginUser() 経由で端末側のローカルストレージにログイン情報が保存されます。次に、myNavigator.pushPage() 関数が実行され、profile.html ページが表示されます。

Facebook に以前にもログインしていた場合、アカウント情報が再利用されます。異なるアカウントを使用する場合には、Facebook アプリを起動させ、別アカウントを使用してログインします。[ここも確認必要]

端末上に Facebook アプリがインストールされていない場合、または、端末上の Facebook に一度もログインしていなかった場合、認証画面が表示されます。

ProfileCtrl コントローラーには、Logout() と LogoutFromFacebook() の 2 つの関数が定義されています。Logout() 関数は、プロファイルページ右上に置かれたログアウト用のアイコンをクリックしたときに呼ばれます。Logout() 関数内では、確認用のダイアログを表示する処理を行っています。確認用のダイアログ上で、ユーザーが Yes を選択した場合、LogoutFromFacebook() 関数と StorageService の両方が呼ばれ、ユーザーのログアウトとログイン情報の削除をそれぞれ行います。

1. へ行き、Facebook アカウントを使用してログインします。

キーハッシュ : キーストア内に格納されている SHA-1 フィンガープリントです。Monaca クラウド IDE の [ Android キーストア設定 ] 上で作成したキーストアに格納されたものを使用します。確認方法の詳細は、をご確認ください。

認証処理には、 プラグインを使用します。このプラグインでは、[ 以下の文は現在確認中 ] シングルサインオンには、ネイティブの Facebook アプリを使用します。標準的なダイアログを使用した認証方法の場合、サインオンの処理が著しく遅くなります。

3. APP_ID と APP_NAME を入力します ( を参照のこと )。次のスクリーンショットをご確認ください。

アプリ起動時の開始地点となるページです。 コンポーネントを <body> タグで囲っています。このコンポーネントを使用して、ページ遷移を処理します ( ページスタックの管理と実際の遷移処理をこのコンポーネントが行ってくれます )。page 属性には、スタック内に置く最初のページを指定します。

Facebook for Developers
cordova-plugin-facebook4
ons-navigator
事前準備
Onsen UI
cordova-plugin-facebook4
プロジェクトをインポート
プロジェクトをインポート
キーストア内の SHA-1 フィンガープリントを確認する方法 ( Monaca クラウド IDE 上のキーストアを使用 )
iOS 版
Android 版