Udostępnij za pośrednictwem

【WP for ITPro】Windows Phone アプリから Windows Live で認証するサンプル

  • Artykuł

2011/11/9 追記 Live SDK（プレビュー版）を使用すると SignInButton コントロールを使用して、より簡単に実装できます。以下にサンプルを掲載したので、あわせて参照してください。

【WP for ITPro】SignInButton Control を使用して Windows Phone アプリから Windows Live で認証するサンプル

-----------------------------------------------------

この記事は以下の投稿を参考にしています。

Using Windows Live ID in a WP7 App » BuildMobile

最近 Facebook の話ばかりで、ついマイクロソフトが世界に誇る巨大アイデンティティプロバイダー Windows Live の扱いが手薄になっておりました。

Windows Live の認証を受ける代表的な方法として2つ挙げられます。

  • Windows Azure AppFabric ACS を使用する
  • Live Connect（旧称 Windows Live Messenger Connect）を使用する

前者はすっかりおなじみですよね。今回は比較的目新しい？後者（Live Connect）を使用する方法を紹介します。

と言っても、１から説明するのは大変なのでオンラインの記事は無いかなぁと探してみたら...ありました。

Windows Live チームの BLOG です。Live Connect の概要を知るには、まずは以下の記事をご覧ください。

[開発者向け] Windows Live 開発者向けプラットフォームに OAuth 2.0 などを追加 ― 任意のデバイスやアプリケーション、サイトへの接続が引き続き可能 « Windows Live 最新情報ブログ

そして、具体的な実装方法については MVP 松江さんの記事が gihyo.jp に掲載されています。日本語で懇切丁寧に解説してあるのはこの記事しかありませんので必読です。

使ってみよう！ Windows Live SDK/API｜gihyo.jp … 技術評論社

上記の記事にもある通り、Live Connect では OAuth 2.0（draft 16）が実装されました。ってことは、Facebook のように、ブラウザコントロールを使用してリダイレクトを受け取りつつ、アクセストークンを取得し、それを使ってユーザーの情報にアクセスすることができるわけですね。

で、面倒な話をしても仕方がないので、非常に手抜きのサンプルを作りました。Windows Live で認証を受けて、ユーザーの情報を取得するだけのものです。以下にサンプルプロジェクトを掲載したので、ダウンロードして LiveConAuth.sln を Visual Studio 2010 で開いてみてください。

ソースコードダウンロード

そのまま実行していただければ、以下のようにログオン画面が表示されるので、メールアドレスとパスワードで認証を受けてください。画面の上半分がブラウザコントロールで、下半分にリストボックスががあります（見えていませんが）。Windows Live の画面が表示されるまで少し時間がかかるかもしれません。

image

認証を受けると、Facebook のように、アクセスへの認可を促す画面が表示されます。ここで「Yes」をタップしてください。

image

認可が成功すれば、以下のように「Access Granted」と表示されますので「OK」をタップしてください。

image

一息待っていただくと、画面の下にユーザーのプロフィール情報が表示されます。

image

いやー画面遷移もない手抜きで、ほんとすみませんです。

そのかわり、ソースコードは1ページで収まっているので追いやすいと思います。

ここで、ごくごく簡単にソースコードについて説明しておきます。Mainpage.xaml.cs を見てください。

■Client ID

はじめに、{"client_id", " <ここにClient IDを転記> "} の部分に注目してください。Facebook を使用する場合にも App ID を取得する必要がありますが、Live Connect 出も同様のIDを取得する必要があります。これを Client ID と呼んでいます。

Client ID を取得するには、以下のサイトにアクセスします。

https://manage.dev.live.com/Applications/Index

image

画面の右側にある「Create Appication」をクリックして、フォームに必要情報を入力すると、以下のように Client ID を取得することができます。

image

ここで取得した Client ID を、{"client_id", " <ここにClient IDを転記> "} に転記します。

■scope

次に注目していただきたいのは Live Connect のエンドポイントに各種引数を指定して認可を求める部分です。以下の scope 部が Facebook で言うところの Permision です。Live Connect では scope と呼んでいます。ここに、アプリケーションがアクセスしたい情報や操作を指定します。その他の Scope については以下のページがわかりやすいのでご覧ください（英語ですみません。でもわかりやすいです）。

Live Connect REST API

設定した引数は、https://oauth.live.com/authorize?" に付加して、ブラウザコントロールでナビゲートしています。これも Facebook と同じですね。

private void LiveAuthentication() {     var uriParams = new Dictionary<string, string>() {     {"client_id", " <ここにClient IDを転記> "},     {"response_type", "token"},     {"scope", "wl.signin,wl.basic,wl.offline_access,wl.emails,wl.contacts_birthday,wl.work_profile"},     {"redirect_uri", "https://oauth.live.com/desktop"},     {"display", "touch"}     };     StringBuilder urlBuilder = new StringBuilder();     foreach (var current in uriParams)     {         if (urlBuilder.Length > 0)         {             urlBuilder.Append("&");         }         var encoded = HttpUtility.UrlEncode(current.Value);         urlBuilder.AppendFormat("{0}={1}", current.Key, encoded);     }     var loginUrl = " https://oauth.live.com/authorize?" + urlBuilder.ToString();

    AuthenticationBrowser.Navigate(new Uri(loginUrl));     //AuthenticationBrowser.Visibility = Visibility.Visible;

}

もう1点重要なのが、データの受け取り方です。

Live Connect からの情報は JSON 形式で戻されます。例えば、以下のような感じです。

{    "id": "8c8ce076ca27823f",    "name": "Roberto Tamburello",    "first_name": "Roberto",    "last_name": "Tamburello",    "link": "https://cid-8c8ce076ca27823f.profile.live.com/",    "birth_day": 20,    "birth_month": 4,    "birth_year": 2010,     "gender": "male",    "emails": {       "preferred": "Roberto.Tamburello@contoso.com",       "account": "Roberto.Tamburello@live.com",       "personal": "Roberto.Tamburello@contoso.com",       "business": "r_tamburello@example.com"    },     "locale": "en_US",    "updated_time": "2011-04-21T23:55:34+0000" }

ソースコードに書かれた以下の定義は、上記データを受け取るためのものです。見比べていただくと、何を定義しているのかがご理解いただけると思います。

[DataContract] public class employer {     [DataMember(Name = "name")]     public string name { get; set; } }

[DataContract] public class position {     [DataMember(Name = "name")]     public string name { get; set; } }

[DataContract] public class work {     [DataMember(Name = "employer")]     public employer employer { get; set; }     [DataMember(Name = "position")]     public position position { get; set; } }

[DataContract] public class EMails {     [DataMember(Name = "preferred")]     public string preferred { get; set; }     [DataMember(Name = "account")]     public string account { get; set; }     [DataMember(Name = "personal")]     public string personal { get; set; }     [DataMember(Name = "business")]     public string business { get; set; } }

[DataContract] public class WindowsLiveProfile {     [DataMember(Name = "id")]     public string Id { get; set; }     [DataMember(Name = "name")]     public string Name { get; set; }     [DataMember(Name = "gender")]     public string gender { get; set; }     [DataMember(Name = "updated_time")]     public string updated_time { get; set; }     [DataMember(Name = "birth_day")]     public string birth_day { get; set; }     [DataMember(Name = "birth_month")]     public string birth_month { get; set; }     [DataMember(Name = "birth_year")]     public string birth_year { get; set; }     [DataMember(Name = "locale")]     public string locale { get; set; }     [DataMember(Name = "link")]     public string link { get; set; }     [DataMember(Name = "emails")]     public EMails emails { get; set; }     [DataMember(Name = "work")]     public work[] work { get; set; }

}

と、ざくっとした説明で恐縮なのですが、動かせば一目瞭然です。

コードに興味のない IT Pro の皆さんには以下の1点だけ把握していただければOKです。

ごく簡単なコードで Live Connect（OAuth 2）を使用した認証の仕組みを実装することができ、これにより Windows Live に登録されているプロフィール情報を取得することができる