こんにちは!新入社員の平出です!
皆さん、Swiftアプリ開発してますか!?せっかく開発したアプリ、多く使ってもらうためにもログインの手間は省きたいですよね。その手段の一つとしてFacebook連携があるのはご存知でしょうか?また、Facebook連携は組み込んでみたいけど、実装が大変そうだなと思ってい ないでしょうか?そうした、メンドクサさを省いてくれるサービスがあるんです!それがニフティクラウドmobile backendというクラウドサービスです。今回はニフティクラウドmobile backendを使ってSwiftアプリへFacebook連携を組み込むサンプルアプリを作りました。こちらを用いて、チュートリアル形式でFacebook連携が体験できます!ぜひ、試してみてください!
ニフティクラウドmobile backendとは?
ニフティクラウドmobile backendとは、mBaaS(mobile backend as a Service)と呼ばれるクラウドサービスで、スマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービスです。
クラウド上に用意された機能をAPIで呼び出すだけで利用できるので、サーバー開発・運用不要でよりリッチなバックエンド機能をアプリに実装することができます。 ここからはニフティクラウドmobile backendではなくmBaaSと呼ばせていただきます。iOS SDKも用意しており、Swiftからも簡単に利用できます。
今回の概要
Facebookのログイン機能を実装したサンプルプロジェクトに対して、mBaaSの『SNS連携(Facebook連携)』を利用して実際に連携を行います。また、FaceBook連携で取得した会員データはmBaaSの『会員管理機能』として扱うことができます。
今回は以下4つの手順で進めて行きたいと思います。
- mBaaSでAPIキー取得
- サンプルプロジェクトにAPIキーを設定
- FacebookSDKを使用するための準備と設定
- 動作確認
尚、動作確認は以下の環境で行っています。
- Mac OS X 10.10(Yosemite)
- Xcode ver. 7.2.1
- iPhone6 ver. 8.2
それでは、早速始めましょう!
1.mBaaSでAPIキー取得
まずはmBaaSの会員登録(無料)します。登録が完了してログインをすると、下図のように「アプリの新規作成」画面が出るのでアプリを作成します。
アプリを作成すると下図のような画面になります。この2種類のAPIキー(アプリケーションキーとクライアントキー)はXcodeで作成するiOSアプリにmBaaSを紐付けるために使用します。
動作確認後に会員情報(アクセストークン)が保存される場所も確認しておきましょう。
2.サンプルプロジェクトにAPIキーを設定
GitHubにアクセスしてサンプルプロジェクトをダウンロードしましょう。ボタンをクリックして、さらに
ボタンをクリックしてダウンロードします。ダウンロードが完了したら、ダウンロードしたフォルダを開き、
をダブルクリックしてXcodeを開きます。
「AppleDelegate.swift」を開いてAPIキーの設定を行いましょう。
先ほどmBaaSのダッシュボード上で確認したAPIキーを貼り付けます。
それぞれ「YOUR_NCMB_APPLICATION_KEY」と「YOUR_NCMB_CLIENT_KEY」の部分を書き換えます。この時、ダブルクォーテーション(")を消さないように注意してください!書き換えたらファイルを保存しておきましょう。
3.FacebookSDKを使用するための準備と設定
facebook for developersにログイン(Facebookアカウントがない場合はアカウントを作成)して、右上の「マイアプリ」からの「新しいアプリを追加」を選択します。
(初めての場合は「マイアプリ」をクリック後に「Facebookに統合されたアプリはありません」と出るのでその右にある「新しいアプリを作成」ボタンをクリックします。)
「表示名」「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックします。Securityチェック欄には質問の対象画像を全て選択し、「確定」をクリックします。しばらくするとアプリが作成されます。
そうしたらアプリ専用ページに飛びます。Facebook SDKのクイックスタートより「プラットフォームを選択」をクリックします。
一番下まスクロールして、「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペして、次へをクリックします。そうしたら、一番上まで戻って、右上の「Skip Quick Start」をクリックします。ダッシュボードが表示されるので、「アプリ名」と「アプリID」をXcodeプロジェクトの「Info.plist」
にコピペします。
また、このアプリIDはmBaaSにも設定をします。mBaaSのダッシュボードを開き、左側のメニューから「アプリ設定」>「SNS連携」の設定を開きます。携携の許可にチェックを入れた上で、Facebookの開発者向けサイトで発行されたアプリIDを入力してください。そうしたら「保存する」クリックしましょう。
最後にfacebook for developersの左メニューから「アプリレビュー」をクリックし、「アプリ名を公開しますか?」を「はい」にしておきます。
4.動作確認
いよいよ動作確認ですね!Xcode画面で左上の実行ボタン(三角の再生マーク)をクリックします。
※ビルド時にエラーが発生した場合の対処方法
- Xcodeのバージョンが古い場合
import NCMB
にエラーが発生し、上手くSDKが読み込めないことがあります - その場合は【Swift】SDKの読み込みにuse framework!が使えない場合の対処方法をご覧いただき、別の読み込み方法をお試しください
シミュレーターが起動したら、Login画面が表示されるので、Loginボタンをクリックします。
Facebookログインのブラウザが画面が表示されるのでしたがってログインを行います。ログインに失敗した場合は画面にエラー内容が表示されます。(Facebookログインのブラウザ画面でキャンセルした場合は表示されません) ログインに成功したらログアウトします。
※万が一エラーが発生した場合は、こちらよりエラー内容を確認いただけます。
成功したら、mBaaSのダッシュボードから「会員管理」を確認してみましょう!「authData」にはアクセストークンが保存されます。
Facebookにログインして「アプリ」>「アプリ設定」欄にログインの記録が保存されます。
動作確認は以上となります!!
いろいろできるぞmBaaS
Facebook連携の設定はいかがだったでしょうか?mBaaSを使えば簡単に設定できることが分かっていただけたと思います!また、mBaaSではログイン機能をつけることはもちろん、会員のグルーピングやメール認証も御座います!ぜひそちらの記事もご覧ください!最後までお読みいただきありがとうございました!