292 / 478
accounts/static/accounts.js (ch15l033).
/*global $ */
var
initialize
=
function
(
navigator
) {
$
(
'#id_login'
).
on
(
'click'
,
function
() {
navigator
.
id
.
request
();
});
};
[...]
That passes. A good start! Let’s try pulling it into our template:
lists/templates/base.html.
<script
src=
"http://code.jquery.com/jquery.min.js"
></script>
<script
src=
"https://login.persona.org/include.js"
></script>
<script
src=
"/static/accounts.js"
></script>
<script
src=
"/static/list.js"
></script>
<script>
/*global $, Superlists, navigator */
$
(
document
).
ready
(
function
() {
Superlists
.
Accounts
.
initialize
(
navigator
);
});
</script>
</body>
We also need to add the
accounts
app to
settings.py
, otherwise it won’t be serving the
static file at
accounts/static/accounts.js
:
superlists/settings.py.
+++ b/superlists/settings.py
@@ -37,4 +37,5 @@ INSTALLED_APPS = (
'lists',
+ 'accounts',
)
A quick check on the FT … doesn’t get any further unfortunately. To see why, we can
open up the site manually, and check the JavaScript debug console:
[01:36:54.572] Error: navigator.id.watch must be called before
navigator.id.request @
https://login.persona.org/include.js:8
More Advanced Mocking
We now need to call Mozilla’s
navigator.id.watch
correctly. Taking another look at
our spike, it should be something like this:
var
currentUser
=
'{{ user.email }}'
||
null
;
var
csrf_token
=
'{{ csrf_token }}'
;
console
.
log
(
currentUser
);
navigator
.
id
.
watch
({
loggedInUser
:
currentUser
,
//
onlogin
:
function
(
assertion
) {
$
.
post
(
'/accounts/login'
, {
assertion
:
assertion
,
csrfmiddlewaretoken
:
csrf_token
})
//
.
done
(
function
() {
window
.
location
.
reload
(); })
.
fail
(
function
() {
navigator
.
id
.
logout
();});
264
|
Chapter 15: User Authentication, Integrating Third-Party Plugins, and Mocking with JavaScript