diff options
Diffstat (limited to 'files/ja/web/api/identitymanager/watch')
| -rw-r--r-- | files/ja/web/api/identitymanager/watch/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/ja/web/api/identitymanager/watch/index.html b/files/ja/web/api/identitymanager/watch/index.html new file mode 100644 index 0000000000..7daf89d3ac --- /dev/null +++ b/files/ja/web/api/identitymanager/watch/index.html @@ -0,0 +1,143 @@ +--- +title: navigator.id.watch +slug: Web/API/IdentityManager/watch +tags: + - BrowserID + - DOM + - Persona +translation_of: Archive/IdentityManager/watch +--- +<div>{{ApiRef}} {{non-standard_header}}</div> + +<div class="note"><strong>注記:</strong> この機能は、まだどのブラウザでもサポートされていません。Persona を使用する Web サイトは、そのページに <a href="https://login.persona.org/include.js" title="https://login.persona.org/include.js">ポリフィルライブラリ</a> を含めなければなりません。</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>この関数は、<a href="/docs/Persona" title="Persona">Persona</a> ユーザのログインとログアウトに応答するコールバックを登録します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:js;">navigator.id.watch({ + loggedInUser: 'bob@example.org', + onlogin: function(assertion) { + // ユーザがログインしました！ ここで必要なことは: + // 1. 検証とセッション作成のためのアサーションをバックエンドに送信する。 + // 2. UI を更新する。 + }, + onlogout: function() { + // ユーザがログアウトしました！ ここで必要なことは: + // リダイレクトするかバックエンドの呼び出しを行って、ユーザのセッションを破棄する。 + } +}); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>loggedInUser </code>{{optional_inline}}</dt> + <dd>このパラメーターはユーザーの状態がどうなっているはずであるかを Persona に伝えるものです。値は文字列か <code>null</code> あるいは <code>undefined</code> です。</dd> + <dd>文字列はユーザーがサイトに現在ログインしているはずであることを表します。この文字列はそのユーザーの E-mail アドレスであって，大文字／小文字は区別します。null は誰もログインしていないはずであることを表します。このパラメーターを省略するか，あるいは undefined を与えるのは，ユーザーがログインしているか否か不明であることを意味します。</dd> + <dd>Persona は常に，ユーザーはサイトにログインしたいか，あるいはしたくないのだと考えています。Persona は loggedInUser の値を自らの信ずるところ（訳注：Persona が認識しているユーザー）と比較し，この二つの状態を一致させるため，（以下の表のごとくに）適切な関数を呼び出します：</dd> + <dd> + <table> + <thead> + <tr> + <th scope="col">loggedInUser</th> + <th scope="col">Persona's State</th> + <th scope="col">Callback</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>null</code></td> + <td>"foo@example.com"</td> + <td><code>onlogin()</code></td> + </tr> + <tr> + <td><code>undefined</code></td> + <td>"foo@example.com"</td> + <td><code>onlogin()</code></td> + </tr> + <tr> + <td>"bar@example.com"</td> + <td>"foo@example.com"</td> + <td><code>onlogin()</code></td> + </tr> + <tr> + <td>"foo@example.com"</td> + <td>"foo@example.com"</td> + <td style="text-align: center;"><em>none</em></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>null</code></td> + <td style="text-align: center;"><em>none</em></td> + </tr> + <tr> + <td>"foo@example.com"</td> + <td><code>null</code></td> + <td><code>onlogout()</code></td> + </tr> + <tr> + <td><code>undefined</code></td> + <td><code>null</code></td> + <td><code>onlogout()</code></td> + </tr> + </tbody> + </table> + </dd> + <dd>ページが読み込まれた時に Persona が自動的に呼び出すのは <code>onlogin</code> と <code>onlogout</code> の <em>どちらか</em> であることに注意してください。<em>両方</em> 呼ばれることはありません（訳注：表のとおりどちらも呼ばれないことはある）。<code>loggedInUser</code> に <code>foo@example.com</code> がセットされているのに、Persona が <code>bar@example.com</code> がログインしていると認識している場合、<code>onlogin</code> のみが呼び出されます。この場合、第1引数として <code>bar@example.com</code> のアサーションが渡されます。</dd> + <dt><code>onlogin</code></dt> + <dd>ユーザがログインした時に、1 個の引数としてアサーションが渡され、呼び出される関数。この関数は、検証のためにアサーションをサイトのバックエンドに送信します。検証が成功した場合、バックエンドでユーザのセッションを確立し、この関数内で UI (ログインボタン) を適切なものに更新してください。</dd> + <dt><code>onlogout</code> {{ optional_inline() }}</dt> + <dd>ユーザがログアウトした時に、引数なしで呼び出される関数。この関数で、サイトのバックエンドを呼び出すかユーザをリダイレクトすることにより、ユーザのセッションを破棄してください。</dd> + <dd><code>onlogout</code> が与えられなかったとき <a href="/Persona/The_navigator.id_API#The_Observer_API">Observer API</a> によるセッション管理は無効化されます。<code>onready</code> と <code>onlogin</code> だけが呼び出されます。<code>onlogin</code> は、ユーザーによるログイン操作の反応としてしか呼び出されません（つまりユーザーがログインしていた場合に自動的に呼び出されたりはしません）。</dd> + <dt><code>onready</code> {{ optional_inline() }}</dt> + <dd>A function that will be invoked when the user agent is initialized and able to process calls to <code>id.request</code> and <code>id.logout</code>. The onready callback will be invoked immediately after any automatic invocations of <code>onlogin</code>, <code>onlogout</code>, or <code>onmatch</code>. By waiting to display UI until <code>onready</code> is called, relying parties can avoid UI flicker in cases where the user agent's preferred state is out of sync with the site's session.</dd> + <dd>Note that <code>onready</code> will not be invoked after calls to <code>id.request</code> or <code>id.logout</code>. It is the punctuation mark that concludes the conversation started by <code>watch</code>.</dd> +</dl> + +<h2 id="Example" name="Example">コード例</h2> + +<div class="container"> +<pre class="brush: js">navigator.id.watch({ + loggedInUser: currentUser, // This is email of current user logged into your site + + onlogin: function(assertion) { + + $.ajax({ // This example uses jQuery, but you can use whatever you'd like + type: 'POST', + url: '/auth/login', // This is a URL on your website. + data: {assertion: assertion} + success: function(res, status, xhr) { window.location.reload(); }, + error: function(xhr, status, err) { + navigator.id.logout(); + alert("Login failure: " + err); + } + }); + }, + + onlogout: function() { + $.ajax({ + type: 'POST', + url: '/auth/logout', // This is a URL on your website. + success: function(res, status, xhr) { window.location.reload(); }, + error: function(xhr, status, err) { alert("Logout failure: " + err); } + }); + } + +})<code class="js plain">;</code></pre> +</div> + +<h2 id="Specification" name="Specification">仕様</h2> + +<p>まだどの仕様書にも含まれていません。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/docs/Persona" title="Persona">BrowserID</a></li> + <li>{{domxref("navigator.id")}}</li> + <li>{{domxref("navigator.id.logout()")}}</li> + <li>{{domxref("navigator.id.request()")}}</li> +</ul> |