食わず嫌いしてるMobile Appsですがここらへんで触ってみようと思います。バックエンドが簡単に作れるならそれにこしたことはないよね。ということで行ってみよう。
Mobile Apps Quickstartの作成
まず手始めにとっかかりをつかむには、Mobile Apps Quickstartというのを作るといいです。こいつはTodoアプリの完成形が出来上がってます。
下のような感じで適当に作ります。
そうすると、以下のセットが出来上がります。
プロジェクトのダウンロードと実行
AppService
を選んで、Quickstart
を選ぶと、様々なプラットフォームのプロジェクトのひな型がDLできるようになっています。今回はUWPでいきたいのでWindows(C#)
を選びます。
Quickstart
は、SQLiteを使ってるみたいですね。後で、SQL Databaseに変えてね的なメッセージが出てます。しばらく待つと、大体緑になりますので、Download
ボタンを押します。ダウンロードしたらプロパティからブロックを解除して展開します。
x86
をターゲットに変えて何も考えずに実行してみましょう。
以下のように、TODOアプリが立ち上がります。動きますね。
データの確認
Azureのポータルで、ドキュメントでは簡単テーブル
と残念翻訳されてるEasy Table
を選びます。するとテーブルの中身を見ることが出来ます。先ほど実行したデータが入ってることが確認できます。
認証をつけてみよう
Twitterで認証かけてみましょう。Twitterの開発者ポータルに行ってアプリを登録します。
ここの下のほうにManage Your Apps
があるので、そこからアプリを登録します。登録時に入力するコールバックとウェブサイトですが、以下のドキュメントにあるようにhttps://アプリ名.azurewebsites.net/.auth/login/twitter/callback
を指定します。今回は、okazukitodo
という名前で私は作ったのでhttps://okazukitodo.azurewebsites.net/.auth/login/twitter/callback
になります。
Details
タブとKeys And Access Tokens
タブに必要な情報があるので、閉じずにキープしておきます。
Easy Table
でtodoitem
テーブルを選んで上のほうにあるChange permissions
を選択します。Insert
, Update
, Delete
, Read
, Undelete
のpermissionが全部匿名ユーザーに対して許すようになってるので、これをAuthenticated access only
に変更して認証が必要なようにします。Save
を押すのを忘れずに。
次にアプリ全体に認証をかけます。App Service
を選んでAuthentication / Authroization
を選択します。App Service Authentication
がOff
になってるのでOn
に変更します。
そして、Twitterを選択します。先ほどのTwitterのページから取得できるAPI Key(Cosumer Keyともいう)とAPI Secret(Cosumer Secretともいう)をコピペします。
入力したらSave
を忘れずにやっておきます。
この時点でアプリを実行すると認証エラーが起きるようになります。
そして、テーブル自体にも認証が必要なようにします。Easy Table
でtodoitem
を選択して、Edit script
を選択します。ブラウザでスクリプトが編集できるので、以下の1行を13行目あたりに追加しておきます。
table.access = 'authenticated';
認証処理を追加しましょう。MainPage.xamlにアプリバーを追加して、そこにログインボタンを置くようにししてみましょう。
<Page.BottomAppBar> <CommandBar> <AppBarButton Label="SignIn" Icon="Contact" Click="SignInButton_Click"/> </CommandBar> </Page.BottomAppBar>
そして、コードビハインドで以下のようなコードを書きます。
private MobileServiceUser User { get; set; } private async void SignInButton_Click(object sender, RoutedEventArgs e) { try { this.User = await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Twitter); await new MessageDialog($"サインインに成功しました: {this.User.UserId}").ShowAsync(); } catch(InvalidOperationException) { await new MessageDialog("サインインに失敗しました").ShowAsync(); } }
実行してアプリバーのボタンを押すと以下のような画面が出てきます。
サインインに成功すると、ちょっと残念なユーザー名が表示されます。
そうすると、アプリが使えるようになります。
毎回サインインするのは怠いので、認証トークンを保存しておくようにしましょう。サインインのボタンのクリック処理を以下のようにします。
private async void SignInButton_Click(object sender, RoutedEventArgs e) { try { this.User = await App.MobileService.LoginAsync(MobileServiceAuthenticationProvider.Twitter); // これを追加 var vault = new PasswordVault(); vault.Add(new PasswordCredential("Twitter", this.User.UserId, this.User.MobileServiceAuthenticationToken)); await new MessageDialog($"サインインに成功しました: {this.User.UserId}").ShowAsync(); } catch(InvalidOperationException) { await new MessageDialog("サインインに失敗しました").ShowAsync(); } }
そして、MainPage
のOnNavigatedTo
あたりで復元処理を追加します。Userを作ってCurrentUserにセットする感じです。
protected override void OnNavigatedTo(NavigationEventArgs e) { var vault = new PasswordVault(); try { var c = vault.FindAllByResource("Twitter").FirstOrDefault(); if (c != null) { this.User = new MobileServiceUser(c.UserName); c.RetrievePassword(); this.User.MobileServiceAuthenticationToken = c.Password; App.MobileService.CurrentUser = this.User; } } catch { } //await InitLocalStoreAsync(); // offline sync ButtonRefresh_Click(this, null); }
これで、二度目の実行からは無事ログインしなくてもデータが読み込まれます。
次はサーバーサイドの処理を色々見ていけたらなと思います。JavaScript嫌いだけど…。