SQLの窓

2012年05月21日


Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行

Live SDK のダウンロードとインストール

まず、『Live SDK for Windows and Windows Phone』をダウンロードしてインストールします。



アプリを登録

Windows8(コンシューマ) + VisualStudio 11 でプロジェクトを作成してから、Live Connect のアプリ管理 (英語) サイトで、Metro スタイル アプリをマイクロソフトのクラウド サービスにアクセスするように構成します。( アプリケーション名を登録して、ID を取得する ) 

以下の画像の一番下の部分(2つ)に、アプリケーション名( ここでは SkyApp )と、サンプル通りの Publisher として CN=lightbox と入力しました。



この後でパッケージ名が表示されるので、それを Visual Studio のほうにセットします。この内容は記録しなくても、以下のページで確認できます。

▼ 登録後の状態です。



Visual Studio より参照設定

SDK を使用するように構成します



実際の実行の画面遷移





Windows Live から見たアプリの管理画面

プロフィールから『管理』へ移動するとアプリの一覧が表示されて個別に管理できます。最初のほうの詳細情報はアプリを作った開発者が利用する画面で、こちらは使用するユーザが管理する画面です( Twitter と同じです )



ソースコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <title>SkyApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <script src="///LiveSDKHTML/js/wl.js"></script>

    <!-- SkyApp references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>JavaScript Code Sample</h1>
    <div id="signin"></div>
    <label id="info"></label>
    <script>
        WL.Event.subscribe("auth.login", onLogin);
        WL.init({
            scope: ["wl.signin", "wl.basic"]
        });
        WL.ui({
            name: "signin",
            element: "signin"
        });
        function onLogin() {
            WL.api({
                path: "me",
                method: "GET"
            }).then(
                function (response) {
                    document.getElementById("info").innerText =
                        "Hello, " + response.first_name + " " + response.last_name + "!";
                },
                function (responseFailed) {
                    document.getElementById("info").innerText =
                        "Error calling API: " + responseFailed.error.message;
                }
            );
        }
    </script>
</body>
</html>

※ こちらにあったソースでテストしました

関連する Microsoft のページ

Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携



posted by lightbox at 2012-05-21 16:09 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり