1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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>
|
