ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

【iOS Swift】mBaaSでアプリにFacebookログイン機能をつけよう!

こんにちは!新入社員の平出です!

皆さん、Swiftアプリ開発してますか!?せっかく開発したアプリ、多く使ってもらうためにもログインの手間は省きたいですよね。その手段の一つとしてFacebook連携があるのはご存知でしょうか?また、Facebook連携は組み込んでみたいけど、実装が大変そうだなと思ってい ないでしょうか?そうした、メンドクサさを省いてくれるサービスがあるんです!それがニフティクラウドmobile backendというクラウドサービスです。今回はニフティクラウドmobile backendを使ってSwiftアプリへFacebook連携を組み込むサンプルアプリを作りました。こちらを用いて、チュートリアル形式でFacebook連携が体験できます!ぜひ、試してみてください!

ニフティクラウドmobile backendとは?

about_mBaaS ニフティクラウドmobile backendとは、mBaaS(mobile backend as a Service)と呼ばれるクラウドサービスで、スマートフォンアプリでよく利用される汎用的な機能をクラウドから提供するサービスです。

クラウド上に用意された機能をAPIで呼び出すだけで利用できるので、サーバー開発・運用不要でよりリッチなバックエンド機能をアプリに実装することができます。 ここからはニフティクラウドmobile backendではなくmBaaSと呼ばせていただきます。iOS SDKも用意しており、Swiftからも簡単に利用できます。

今回の概要

swift_overview

Facebookのログイン機能を実装したサンプルプロジェクトに対して、mBaaSの『SNS連携(Facebook連携)』を利用して実際に連携を行います。また、FaceBook連携で取得した会員データはmBaaSの『会員管理機能』として扱うことができます。

今回は以下4つの手順で進めて行きたいと思います。

  1. mBaaSでAPIキー取得
  2. サンプルプロジェクトにAPIキーを設定
  3. FacebookSDKを使用するための準備と設定
  4. 動作確認

尚、動作確認は以下の環境で行っています。

  • Mac OS X 10.10(Yosemite)
  • Xcode ver. 7.2.1
  • iPhone6 ver. 8.2

それでは、早速始めましょう!

1.mBaaSでAPIキー取得

まずはmBaaSの会員登録(無料)します。登録が完了してログインをすると、下図のように「アプリの新規作成」画面が出るのでアプリを作成します。

swift_facebook_api3

アプリを作成すると下図のような画面になります。この2種類のAPIキー(アプリケーションキーとクライアントキー)はXcodeで作成するiOSアプリにmBaaSを紐付けるために使用します。

swift_facebook_api3

動作確認後に会員情報(アクセストークン)が保存される場所も確認しておきましょう。

swift_facebook_api3

2.サンプルプロジェクトにAPIキーを設定

GitHubにアクセスしてサンプルプロジェクトをダウンロードしましょう。buttonボタンをクリックして、さらにbuttonボタンをクリックしてダウンロードします。ダウンロードが完了したら、ダウンロードしたフォルダを開き、swift_facebook_iconをダブルクリックしてXcodeを開きます。 swift_facebook_icon2

swift_facebook_api

「AppleDelegate.swift」を開いてAPIキーの設定を行いましょう。

先ほどmBaaSのダッシュボード上で確認したAPIキーを貼り付けます。

swift_facebook_api2

それぞれ「YOUR_NCMB_APPLICATION_KEY」と「YOUR_NCMB_CLIENT_KEY」の部分を書き換えます。この時、ダブルクォーテーション(")を消さないように注意してください!書き換えたらファイルを保存しておきましょう。

3.FacebookSDKを使用するための準備と設定

facebook for developersにログイン(Facebookアカウントがない場合はアカウントを作成)して、右上の「マイアプリ」からの「新しいアプリを追加」を選択します。

(初めての場合は「マイアプリ」をクリック後に「Facebookに統合されたアプリはありません」と出るのでその右にある「新しいアプリを作成」ボタンをクリックします。)

android_sns_facebookdev

「表示名」「連絡先メールアドレス」と「カテゴリ」を入力して「アプリIDを作成」をクリックします。Securityチェック欄には質問の対象画像を全て選択し、「確定」をクリックします。しばらくするとアプリが作成されます。

android_sns_facebookdev10

そうしたらアプリ専用ページに飛びます。Facebook SDKのクイックスタートより「プラットフォームを選択」をクリックします。

swift_facebook_fbd5

一番下まスクロールして、「Bundle Identifier」を入力します。XcodeプロジェクトのBundle IDをコピペして、次へをクリックします。そうしたら、一番上まで戻って、右上の「Skip Quick Start」をクリックします。ダッシュボードが表示されるので、「アプリ名」と「アプリID」をXcodeプロジェクトの「Info.plist」にコピペします。

swift_facebook_fbd3

swift_facebook_fbd4

また、このアプリIDはmBaaSにも設定をします。mBaaSのダッシュボードを開き、左側のメニューから「アプリ設定」>「SNS連携」の設定を開きます。携携の許可にチェックを入れた上で、Facebookの開発者向けサイトで発行されたアプリIDを入力してください。そうしたら「保存する」クリックしましょう。

android_sns_facebookdev6

最後にfacebook for developersの左メニューから「アプリレビュー」をクリックし、「アプリ名を公開しますか?」を「はい」にしておきます。

android_sns_facebookdev7

4.動作確認

いよいよ動作確認ですね!Xcode画面で左上の実行ボタン(三角の再生マーク)をクリックします。

※ビルド時にエラーが発生した場合の対処方法

シュミレーターが起動したら、Login画面が表示されるので、Loginボタンをクリックします。

swift_facebook_login

Facebookログインのブラウザが画面が表示されるのでしたがってログインを行います。ログインに失敗した場合は画面にエラー内容が表示されます。(Facebookログインのブラウザ画面でキャンセルした場合は表示されません) ログインに成功したらログアウトします。

※万が一エラーが発生した場合は、こちらよりエラー内容を確認いただけます。

swift_facebook_login2swift_facebook_login3

成功したら、mBaaSのダッシュボードから「会員管理」を確認してみましょう!「authData」にはアクセストークンが保存されます。

android_sns_check2

Facebookにログインして「アプリ」>「アプリ設定」欄にログインの記録が保存されます。

android_sns_check3

動作確認は以上となります!!

いろいろできるぞmBaaS

Facebook連携の設定はいかがだったでしょうか?mBaaSを使えば簡単に設定できることが分かっていただけたと思います!また、mBaaSではログイン機能をつけることはもちろん、会員のグルーピングメール認証も御座います!ぜひそちらの記事もご覧ください!最後までお読みいただきありがとうございました!