はじめようWindows 8世代のアプリ開発

第2回 Windowsストア アプリでサインイン!

この記事を読むのに必要な時間:およそ 5.5 分

サインイン処理の確認

アプリと関連付けたので,先ほどのコードが動作するようになりました。ユーザー視点から見ると,アクセスを許可するアプリが明確になったからです。

アプリを実行してみましょう。起動するとすぐにサインイン処理に進み,図13のような画面が表示されます。

図13 アクセスの許可

図13 アクセスの許可

「はい⁠⁠・⁠いいえ」のどちらを選択しても,次の処理は何も書いていないため何も起こりません。

MicrosoftアカウントでWindowsにサインインしている場合,そのアカウントでサインインします。ローカルアカウントを利用している場合は,図14のようにMicrosoftアカウントの入力を求められます。

図14 Microsoftアカウントの追加

図14 Microsoftアカウントの追加

一度,ユーザーが許可すると,次からユーザーの操作なしにサインイン状態になります。もう一度,実行してみるとアクセス許可の画面は表示されません。

アプリへの許可の取り消し

アクセス許可の画面に書いてある通り,ユーザーは,いつでもアプリに与えた許可を取り消せます。

チャーム※4を表示して「設定」から,⁠PC設定の変更」を選択して,⁠ユーザー」「アカウント設定の詳細をオンラインで確認する」を選ぶとhttps://account.live.com/summarypage.aspxへ移動します。このページの「アカウント許可」リンクされたアカウントの管理にあるアカウントの管理に許可したアプリが出てきます図15⁠。

図15 アカウントの管理

図15 アカウントの管理

日本語の場合は,正しく表示されないなど使い勝手はよくありません。https://consent.live.comでもアクセス許可の内容を確認ができます。

※4)
キーボード操作の場合は,Windows + Cキー。

アカウント情報の取得

コードの記述に戻ります。サインインした後,アカウント情報を取得してみましょう。今回は,アカウントの名前と表示アイコンを取得します。

名前と表示アイコンを表示する場所を,アプリ画面に用意しておきます。次のようにMainPage.xamlを開き編集してください。<Grid>要素の中に,StackPanelTextBlockImageを追加します。

ツールボックスから,StackPanel,TextBlock,Imageをドラッグ&ドロップして,プロパティウィンドウで名前やWidth,Heightなど設定しても同様のことができます。

MainPage.xaml

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <TextBlock Name="NameTextBlock" />
        <Image Name="ProfileImage" Width="96" Height="96" HorizontalAlignment="Left" />
    </StackPanel>
</Grid>

次は,サインイン後の処理を追記し,次のように変更します。

MainPage.xaml.cs

private async void LoadProfile()
{
    var authClient = new LiveAuthClient();
    LiveLoginResult authResult = await authClient.LoginAsync(new string[] { "wl.basic" });
    if (authResult.Status == LiveConnectSessionStatus.Connected)
    {
        var connectClient = new LiveConnectClient(authResult.Session);

        // 名前の取得
        LiveOperationResult opMeResult = await connectClient.GetAsync("me");
        dynamic meResult = opMeResult.Result;
        this.NameTextBlock.Text = "こんにちは! " + meResult.name;

        // 表示アイコン URL の取得
        LiveOperationResult opPicResult = await connectClient.GetAsync("me/picture");
        dynamic picResult = opPicResult.Result;
        this.ProfileImage.Source = new Windows.UI.Xaml.Media.Imaging.BitmapImage(
            new Uri(picResult.location, UriKind.Absolute));
    }
}

ユーザーリソースを取得するには,LiveConnectClientクラスを使います。インスタンス時にLiveAuthClient.Sessionプロパティを指定します。

実際に名前などの情報を得る時は,GetAsyncメソッドを使います。名前の場合は⁠me⁠⁠,表示アイコンの場合は⁠me/picture⁠と指定しています。実は,この⁠me⁠などは,URLのパスの一部で,https://apis.live.net/v5.0/meにアクセスしています。

結果は,JSON形式で受け取ります。⁠me⁠の場合は次のような結果が返ってきます。

{
   "id": "xxxxx", 
   "name": "中野梓", 
   "first_name": "梓", 
   "last_name": "中野", 
   "link": "http://profile.live.com/cid-xxxxx/", 
   "gender": "female", 
   "locale": "ja_JP", 
   "updated_time": "2012-11-11T12:00:00+0000"
}

“me/picture⁠の場合は,アイコンのURLです。

{
   "location": "https://cid-xxxxx.users.storage.live.com/users/xxxxx/myprofile/expressionprofile/profilephoto:UserTileStatic"
}

アプリでは,これらの結果から値を取り出して使っています。

リソースの操作について,詳しい仕様はREST APIを参照してください※5⁠。

ここまでを実行してみましょう図16⁠。名前とアイコンが表示されましたか?

図16 実行結果

図16 実行結果

※4)
日本語ドキュメントの内容は,英語ドキュメントより古い場合があります。

今回はここまでです。いかがでしたか。Microsoftアカウント情報を扱って,ユーザーごとに異なるアプリも簡単に作れそうな気がしますね。次回は,ガイドラインに従った,サインイン処理と実装について扱う予定です。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp