次の方法で共有

方法: Sign-in Control のホスト

  • [アーティクル]

Sign-in Control をホストするには、ホスト Web ページに適切な参照を追加する必要があります。また、付属する JavaScript ファイルに適切なスクリプト コードを追加する必要があります。このトピックでは、Sign-in Control をホストするために必要なコードについて説明します。

Messenger Library Sign-in Control は、ユーザーが認証とサインイン プロセスを開始できるように、Web ページに埋め込むことができる Web ガジェットです。サインイン プロセスが完了すると User オブジェクトの取得が可能になり、このオブジェクトを使用して、ユーザーのメンバーへのアクセスや会話の作成などの多くのタスクを実行することができます。

Sign-in Control をホストする作業には、2 つの主要なタスクがあります。これは、ホスト Web ページに適切な参照を追加するタスクと、メインの JavaScript ファイルにコードを追加するタスクです。追加する JavaScript コードでは、以下の機能をサポートします。

  • トップ レベルの名前空間の宣言
  • Sign-in Control のインスタンスの作成
  • Microsoft.Live.Messenger.UI.SignInControl.AuthenticationCompleted および Microsoft.Live.Messenger.UI.SignInControl.SignInCompleted イベントを処理するデリゲートの作成
  • Sign-in Control のインスタンスを介して取得した User オブジェクトの呼び出し

注意

Sign-in Control をホストするには、Privacy.htm および Channel.htm ページが Web サイトに存在している必要があります。詳細については、「Messenger Library を利用した開発の基本」を参照してください。

手順

ホスト Web ページに参照を追加します。

  1. ぺージの <head> 要素に、messenger.js を参照する <script> 要素を追加します。これで、Messenger Library のすべての機能にアプリケーションからアクセスできるようになります。

    <script src="http://settings.messenger.live.com/api/1.0/messenger.js" type="text/javascript" language="javascript"></script>

  2. <body> 要素に、スクリプトのメイン関数を参照する onload 属性を追加します。

    <body onload="HelloWorld.App.scriptMain()">

  3. Web ページの本文に、メイン関数が含まれる JavaScript ファイルを参照する <script> 要素を追加します。

    <script src="SignIn.js" type="text/javascript" language="javascript"></script>

  4. 次に、Sign-in Control 用の IFrame を挿入する HTML 要素を追加します。この例では、ID 値 "signinframe" を持つ <div> です。

    <div ID="signinframe"></div>

メインの JavaScript ファイルにコードを追加します。

  1. アプリケーションの トップレベルの名前空間を作成し、登録します。

    Type.createNamespace('HelloWorld');
HelloWorld.App = function () {
}

  2. Sign-in Control のインスタンスをカプセル化する scriptMain 関数を作成します。また、ユーザー認証の完了に対応するデリゲートを作成します。

    HelloWorld.App.scriptMain = function () {
   HelloWorld.App._signin = new Microsoft.Live.Messenger.UI.SignInControl('signinframe', 'http://www.example.com/Privacy.htm', 'http://www.example.com/Channel.htm', 'en-US');
   HelloWorld.App._signin.add_authenticationCompleted(Delegate.create(null, HelloWorld.App.authenticationCompleted));
}

  3. authenticationCompleted 関数を作成し、ユーザーのサインイン完了に対応するデリゲートを作成します。また、実際にユーザーをサインインさせる signIn 関数を呼び出します。Microsoft.Live.Messenger.User オブジェクトがこの関数で作成されることに注意してください。

    HelloWorld.App.authenticationCompleted = function (sender, e) {
   HelloWorld.App._user = new Microsoft.Live.Messenger.User(e.get_identity());
   HelloWorld.App._user.add_signInCompleted(Delegate.create(null, HelloWorld.App.signInCompleted));
   HelloWorld.App._user.signIn(null);
}

  4. ユーザーのサインインが完了したときにタスクを実行する、signInCompleted 関数を作成します。この例では、ユーザーの現在のアドレスを HTML 要素を使用して表示します。

    HelloWorld.App.signInCompleted = function (sender, e) {
if (e.get_resultCode() === Microsoft.Live.Messenger.SignInResultCode.success) {
// ユーザーに確認メッセージを表示します。
$('divConfirm').innerHTML = '<p>' + HelloWorld.App._user.get_address().get_address() + 
' が現在サインインしています。</p>';
   }
}

例

説明

以下のコード例は、Sign-in Control をインスタンス化し、Microsoft.Live.Messenger.UI.SignInControl.AuthenticationCompleted および Microsoft.Live.Messenger.UI.SignInControl.SignInCompleted イベントを処理するデリゲートを作成するために必要な JavaScript コードを示しています。

コード

// アプリケーションの名前空間を登録します。
Type.createNamespace('HelloWorld');

// メインの名前空間を定義します。
HelloWorld.App = function () {
}

// Sign-in Control をインスタンス化し、
// ユーザー認証の完了に対応するデリゲートを作成します。
HelloWorld.App.scriptMain = function () {
   HelloWorld.App._signin = new Microsoft.Live.Messenger.UI.SignInControl('signinframe', 'http://www.example.com/Privacy.htm', 'http://www.example.com/Channel.htm', 'en-US');
   HelloWorld.App._signin.add_authenticationCompleted(Delegate.create(null, HelloWorld.App.authenticationCompleted));
}

// ユーザーのサインイン完了に対応するデリゲートを作成し、ユーザーをサインインさせます。
HelloWorld.App.authenticationCompleted = function (sender, e) {
   HelloWorld.App._user = new Microsoft.Live.Messenger.User(e.get_identity());
   HelloWorld.App._user.add_signInCompleted(Delegate.create(null, HelloWorld.App.signInCompleted));
   HelloWorld.App._user.signIn(null);
}

// サインインが成功するとタスクを実行します。
HelloWorld.App.signInCompleted = function (sender, e) {
   if (e.get_resultCode() === Microsoft.Live.Messenger.SignInResultCode.success) {
// ユーザーに確認メッセージを表示します。
      $('divConfirm').innerHTML = '<p>' + HelloWorld.App._user.get_address().get_address() + 
      ' が現在サインインしています。 </p>';
   }
}

// HelloWorld.App クラスを作成し、オブジェクトを初期化します。
HelloWorld.App.createClass('HelloWorld.App');
HelloWorld.App._user = null;
HelloWorld.App._signin = null;

関連項目

概念

Messenger Library タスク