連載：Azureモバイルサービスで作る簡単スマートフォンアプリ
認証機能とプッシュ通知をしよう！
iOSのサンプルでAzureモバイル・サービス（BaaS）の機能を紹介。Twitter、Facebook、Google、Microsoftなどの認証プロバイダーを使用した認証機能とプッシュ通知の実装方法を説明する。
前回作成したアプリを基に、今回は認証機能とプッシュ通知を実装する。先日、多数のMicrosoft Azure（旧称：Windows Azure）のドキュメントが日本語化されたので、そちらもご紹介しながら進めていく。
今回もMacが必要となることをご了承いただきたい。次回以降はWindowsの方も開発できるように考えているので、もうしばらくお付き合いいただきたい。
ユーザー認証機能を実装する
Azureモバイル・サービス（以降、モバイル・サービス）は、以下のアカウントを使用してユーザー認証が可能だ。
- Microsoft
実装方法は簡単で、テーブルのアクセス許可設定、各アカウントのAPIキーの設定、認証画面表示の3つの手順となる。アプリに記述するコード量は10 step程度で、モバイル・サービスにスクリプトの記述は不要である。それではそれぞれ順番に説明をしていく。
テーブルのアクセス許可を［認証されたユーザーのみ］にする
Azureポータルにアクセスし、以下の手順でテーブルのアクセス許可を［認証されたユーザーのみ］に変更する。
前回作成したモバイル・サービスのページを表示し、［データ］タブをクリックして、［TodoItem］テーブルをクリックする
- 1［アクセス許可］タブをクリックして、［テーブルのアクセス許可］を表示する
- 2［挿入アクセス許可］横のセレクトボックスにて［認証されたユーザーのみ］を選択する。以降、［更新アクセス許可］［削除アクセス許可］［読み取りアクセス許可］の全てを同様に［認証されたユーザー］を選択する
全てのセレクトボックスにて［認証されたユーザー］となっていることを確認して、［保存］ボタンをクリックして設定を保存する
XcodeにてToDoアプリを起動すると、次の画面のように何も表示されないことを確認する。
各アカウントのAPIキーの設定
Azureポータルで前のページに戻って［ID］タブをクリックすると、以下の画面が表示されるので、それぞれに適切な値を設定する。
前述のとおり、Twitter、Facebook、Google、Microsoftの4種類の認証プロバイダーを使用できるが、使用するためには事前登録が各サイトで必要となる。
【コラム】各認証プロバイダーの登録方法
認証プロバイダーの登録方法については、Azureのチュートリアル・サイトに詳細が記載されているので、そちらを参考にしてほしい。
- Twitter 認証用の登録 - モバイル サービス
- Facebook 認証用の登録 - モバイル サービス
- Google 認証用の登録 - モバイル サービス
- Microsoft 認証用の登録 - モバイル サービス
登録のポイントは、認証後に呼び返されるURL（＝コールバックURL）をモバイル・サービスのURLに設定することだ。モバイル・サービスのURLはAzureポータルの［ダッシュボード］などで確認できる。本稿の例では「https://nnasaki-bi.azure-mobile.net/」だ。
4種類全て記入する必要はなく、使用するものだけ入力すればよい。以降はFacebookを例に進める。Facebookの場合、以下のようにアプリを作成し、Azureポータルの［facebook の設定］に［APIキー］を設定する。
- 1［App ID］をAzureポータルの［アプリケーション ID/API キー］に記入する。
- 2［App Secret］を Azureポータルの［アプリケーションの秘訣］に記入する。
- 3「このアプリは動作中です」と表示していることを確認する。
- 4［Sandbox Mode］で［無効にする］を選択する。
- 5［Facebookでログインが可能なウェブサイト］の［サイトURL］にモバイル・サービスのURLを記入する。
認証画面表示
ToDoアプリに認証画面を表示するためにはソース・コードを修正する。具体的には、ロード時にデータ表示を行っている処理を消して、その代わりに画面表示のタイミングでFacebookログイン画面を表示するように修正する。
これにはまず、XcodeでQSTodoListViewController.mファイルのviewDidLoadメソッドから[self refresh];を消す。
次に、以下に示すviewDidAppearメソッドを追加すればよい。
|
- (void)viewDidAppear:(BOOL)animated
{
MSClient *client = self.todoService.client;
if (client.currentUser != nil) {
return;
}
// Facebookのログイン画面を表示する
[client loginWithProvider:@"facebook" controller:self animated:YES completion:^(MSUser *user, NSError *error) {
// ログインに成功したらToDoリストを表示する
[self refresh];
}];
}
|
【コラム】Facebook以外の認証画面の表示方法
@"facebook"の文字列を変えることで認証プロバイダーを切り替えることができる。以下の表を参考にしてほしい。
| 認証プロバイダー名 | コード表記 |
|---|---|
| Microsoft | microsoftaccount |
修正は以上だ。認証画面が表示されるか、XcodeからToDoアプリを起動して確認してみよう。以下はその実行例である。
Facebookのアカウント名とパスワードを入力して［Log In］ボタンをクリックする
［OK］ボタンをクリックする
タスクが表示されるようになっていることが確認できる。
以上で認証機能の実装は完了である。ここまでモバイル・サービスのスクリプトは一切記述していないことに注目していただきたい。
プッシュ通知を実装する
モバイル・サービスでは、Apple Push Notificationサービス（APNS）を使用して、iPhoneアプリおよびiPadアプリにプッシュ通知が可能だ。アプリにプッシュ通知を送信するには、APNSと連携するようにモバイル・サービスを構成しておく必要がある。APNSを使用するためには、iOS Developer Programの参加が必要であり、プッシュ通知を受信するためにはiOSのデバイス(iPhoneまたはiPad)が必須となるので（エミュレーターは不可）ハードルが少々高い。
後はアプリ側にプッシュ通知処理とモバイル・サービス側にプッシュ通知処理をコーディングする必要がある。
証明書を作成する
まずは、iOS Certificates - Apple Developerで証明書を生成し、Azureポータルにアップロードする必要がある。証明書の作成手順については、「Windows Azure - プッシュ通知の使用 (iOS)」の「1.証明書の署名要求を生成する」〜「3.アプリケーションのプロビジョニング プロファイルを作成する」を参照して作成していただきたい。スクリーンショットが古いので、英語の「Windows Azure - Get Started with Push Notifications (iOS)」と見比べながら作業していただくとよいと思われる（英語のリンク先が日本語になってしまう場合はページ最下部にある言語設定を［日本語］から［English］に変えることで確認できる）。
注意点としてiOS Certificatesで登録する［App ID Suffix］は［Wildcard App ID］ではなく［Explicit App ID］を選んで作成する必要があり、Xcodeの［Bundle Identifier］と同一にする必要がある。
APNSと連携するようにモバイル・サービスを構成する
連携というと面倒そうだが、証明書をアップロードするだけである。引き続き、「Windows Azure - プッシュ通知の使用 (iOS)」の「4.モバイル サービスを構成する」を参照して作業していただきたい。
以下のように証明書がAzureポータルに登録されればよい。
アプリ側にプッシュ通知処理を追加する
「Windows Azure - プッシュ通知の使用 (iOS)」の「5.アプリケーションにプッシュ通知を追加する」とほぼ同様だが、実装する順番を変更し、コードを解説していく。
デバイス・トークンを取得する
APNSを使用してプッシュ通知を行うためには、送信先のデバイストークンが必要となる。以下にその概要を説明する。
- 1APNSにプッシュ通知許可を登録し、デバイストークン発行を要求する。
- 2APNSからデバイストークンを受け取る。
- 3モバイル・サービスにデバイストークンを付与したToDo登録する。
- 4モバイル・サービスからAPNSにプッシュ通知依頼をする。
- 5APNSからプッシュ通知を受け取る。
それではXcodeにてデバイストークンを取得する処理を追加する。まずはQSAppDelegate.hファイルのwindowプロパティの下にデバイストークン・プロパティを追加する（次のコードを参照）。
|
@property (strong, nonatomic) NSString *deviceToken;
|
次にアプリ起動時にPUSH通知を登録し、デバイストークンの発行を行う。QSAppDelegate.mファイルに以下のコードを追記する。このコードでは、デバイストークンの発行に成功した場合、プロパティにデバイストークンをセットする。逆に失敗した場合は、エラー・メッセージをログに出力し、プロパティに空文字を設定する処理を追加する。
|
// アプリ起動完了時
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:
(NSDictionary *)launchOptions
{
// プッシュ通知許可を登録し、デバイストークン発行を要求する
[[UIApplication sharedApplication] registerForRemoteNotificationTypes:
UIRemoteNotificationTypeAlert | UIRemoteNotificationTypeBadge | UIRemoteNotificationTypeSound];
return YES;
}
// プッシュ通知許可登録成功時
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:
(NSData *)deviceToken {
// 引数で受け取ったデバイストークンから"<>"を取り除き、プロパティに格納する
NSCharacterSet *angleBrackets = [NSCharacterSet characterSetWithCharactersInString:@"<>"];
self.deviceToken = [[deviceToken description] stringByTrimmingCharactersInSet:angleBrackets];
}
// プッシュ通知許可登録失敗時
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:
(NSError *)error {
// エラー・メッセージをログに出力
NSLog(@"Failed to register for remote notifications: %@", error);
// プロパティに空文字を設定する
self.deviceToken = @"";
}
|
モバイル・サービスにデバイストークンを登録する
モバイル・サービスにデバイストークンを登録する処理を追加する。先ほどのデバイストークン・プロパティを取得できるように、QSTodoListViewController.mファイルに以下の処理を追加する。
|
#import "QSTodoService.h"
#import "QSAppDelegate.h" // …… 1
|
- 1
#import "QSTodoService.h"の後に追加する。
次に、(IBAction)onAddアクションの処理を以下のように変更する。
|
- (IBAction)onAdd:(id)sender
{
if (itemText.text.length == 0)
{
return;
}
// NSDictionary *item = @{ @"text" : itemText.text, @"complete" : @NO }; // …… 1
QSAppDelegate *delegate = [[UIApplication sharedApplication] delegate]; // …… 2
NSDictionary *item = @{
@"text" : itemText.text,
@"complete" : @(NO),
// デバイストークンを送信アイテムに加える
@"deviceToken" : delegate.deviceToken // …… 3
};
UITableView *view = self.tableView;
// モバイル・サービスに送信する
[self.todoService addItem:item completion:^(NSUInteger index)
{
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];
[view insertRowsAtIndexPaths:@[ indexPath ]
withRowAnimation:UITableViewRowAnimationTop];
}];
itemText.text = @"";
}
|
- 1以前あった処理をコメントアウトする。
- 2デリゲートへの参照を行う。
- 3デバイストークン・プロパティを取得して、モバイル・サービスへ送信するアイテムに加える。
ここまでで、前掲の「モバイル・サービスとAPNSの関連図」の1〜3を実装した。
実装したアプリをiOSデバイス上で起動して、モバイル・サービスにデータが登録されているかを確認してみよう（以下は実際に確認している例だ）。
アプリを実行すると通知が表示されるので［OK］ボタンをタッチしてプッシュ通知許可をする
「DeviceToken Test」と入力して［+］ボタンをタッチして登録する
Azureポータルからモバイル・サービスのテーブルを確認する
- 1デバイストークンを追加する前に登録した行は「NULL」が設定される
- 2デバイストークンが追加されていることを確認する
【コラム】アプリ初回起動時のプッシュ通知許可について
プッシュ通知許可の設定画面は初回起動時しか表示されず、アンインストールしても再表示はされない。もしうっかり［許可しない］を選択してしまった場合は、二度と表示されなくなる（アンインストールした翌日にインストールすれば表示されるという情報もあるが筆者の環境では表示されなかった）。 実は筆者もうっかり［許可しない］を選択してしまい、プッシュ通知許可の確認画面だけiPadで取り直したのである。ここで［許可しない］を選択してしまった場合は、iOSの［設定］を変更することで［OK］を選択したときと同様にできるので、以下に手順を記載する。
［設定］から［通知］を選択して［通知センターで表示しないApp］までスクロールして、通知したいアプリを選択する
［通知センター］を［オン］にして、［通知のスタイル］を［バナー］にする
【コラム】動的スキーマについて
データベースの開発をしたことがある方は、テーブルに自動で列が追加されたことに違和感を感じたかと思う。モバイル・サービスに「動的スキーマ」という機能があり、データ挿入時に対応するカラムが無ければ自動でカラムを追加してくれる。
開発時は大変便利であるが、「実運用のときは切っておきたい」というケースもあるので、無効にする方法を以下に記載する。
Azureポータルから［構成］タブをクリックし、［動的スキーマの有効化］の［オフ］をクリックする。
受信処理を加える
続いて、前掲の「モバイル・サービスとAPNSの関連図」の5でAPNSからプッシュ通知を受け取りアプリに表示する部分を、QSTodoListViewController.mファイルに実装する（次のコードを参照）。なお、4の処理はモバイル・サービスにスクリプトを記述する必要があるので後述する。
|
// プッシュ通知受信時
- (void)application:(UIApplication *)application didReceiveRemoteNotification:
(NSDictionary *)userInfo {
// 受信内容をログに出力
NSLog(@"%@", userInfo);
// 受信内容をアラートで表示する
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Notification" message:
[userInfo objectForKey:@"inAppMessage"] delegate:nil cancelButtonTitle:
@"OK" otherButtonTitles:nil, nil];
[alert show];
}
|
モバイル・サービス側にプッシュ通知処理を追加する
「モバイル・サービスとAPNSの関連図」4のモバイル・サービスからAPNSにプッシュ通知依頼を実装する（以下の手順を参照）。
Azureポータルからモバイル・サービスのテーブルを開く
- 1［スクリプト］タブをクリックする
- 2［挿入］を選択する
- 3ここにスクリプトを記述する。初期状態ではこの画面の例のようなコードになっている
上記の画面の3に、以下スクリプトをコピー＆ペーストして［保存］をする。
|
function insert(item, user, request) {
request.execute(); // …… 1
setTimeout(function() { // …… 2
push.apns.send(item.deviceToken, { // …… 3
alert: "Toast: " + item.text, // …… 4
payload: { // …… 5
inAppMessage: "Hey, a new item arrived: '" + item.text + "'"
}
});
}, 2500);
}
|
- 1デフォルトの処理を残す。テーブルに登録する処理。
- 2確認用に2500ms遅らせる。
- 3APNSにプッシュ通知を行う関数。第1引数にデバイストークンを指定し、第2引数にJSON形式で通知内容をセットする。
- 4トースト（＝端末の画面上部に表示される）に表示するメッセージを設定する。
- 5アラート（＝ToDoアプリ起動時に表示される）に表示するメッセージを設定する。
プッシュ通知の動作を確認する。
実際にプッシュ通知が届くかを確認しよう。iOSデバイスでアプリを起動して以下の確認を行う。
プリを起動して「Push Test」と入力して［+］ボタンをタッチする
アラートが表示されることを確認して［OK］ボタンをタッチする
続いて「プッシュテスト」と入力して［+］ボタンをタッチして、すぐにホーム・ボタンを押してホーム画面に戻る
画面上部にトーストが表示されることを確認する
次回予告
iOSのサンプルでモバイル・サービスの機能をご紹介してきたが、次回はCLIを使用したモバイル・サービスの設定やGitによるソース管理など、実際に開発を行うポイントをご紹介する予定だ。
1. iOSアプリを5分で作ろう！ Azureモバイルサービスで簡単開発
Azureモバイル・サービス（BaaS）を使用してiOSやAndroidなどのアプリを作成していくことで、その魅力を紹介する連載がスタート。今回はToDoリストを管理するiOSアプリのサンプルを作成して動かしてみる。
2. 【現在、表示中】≫ 認証機能とプッシュ通知をしよう！
iOSのサンプルでAzureモバイル・サービス（BaaS）の機能を紹介。Twitter、Facebook、Google、Microsoftなどの認証プロバイダーを使用した認証機能とプッシュ通知の実装方法を説明する。
3. モバイルサービス開発でコマンドラインを活用しよう！（Win／Mac／Linux対応）
Azure管理用のコマンドライン・インターフェース（CLI）を活用して、モバイル・サービス開発を効率化しよう。その活用方法を解説。
