Page 209 - AngularJS权威教程

18.11 用户认证/鉴权 189

attrs.$set('data-cookiepolicy', 'single_host_origin'); 1
attrs.$set('data-requestvisibleactions',
'http://schemas.google.com/AddActivity')
attrs.$set('data-scope', scopeUrls.join(' '));
2
// 最后，刷新客户端库
// 强迫按钮在浏览器中重绘
(function() { 3
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js'; 4
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})(); 5
}
}
});
6
尽管这个指令很长，但它还是相当简单的。我们是在给Google按钮赋值一个g-signin样式类，
添加基于传入属性的Client ID，建立作用域，等等。
7
这个指令的一个特有部分是我们在窗口自定义回调函数。既然Google的库要求我们有一个回
调函数，以便在登录之后作提醒用，我们需要在指令中模拟这个回调。使用window[callbackId]
8
能让我们在调用这个函数时，模拟这个需要在JavaScript中调用的回调方法，能让我们真正调用到
本地的afterSignin动作。
9
然后，我们将全局对象清理掉，因为在AngularJS中是比较忌讳全局状态的。
指令准备好了之后，就可以在视图中包含这个指令了。我们将在视图中调用指令，把指令上 10
的client-id和after-signin属性替换成我们自己的，如下所示：

确认包含了oauth参数，正如在after-signup属性中写的那样。我们必须用这种方 11
式调用这个参数，这是由Angular在指令中调用带参数方法的机制决定的。

<h2>Signin to ngroad</h2> 12
<div google-signin
client-id='CLIENT_ID'
after-signin="signedIn(oauth)"></div> 13
<pre>{{ user | json }}</pre>
本示例中的用户数据就是登录返回的access_token（如果登录了的话）。它不是存
在我们的服务器上的，也不是敏感数据，而且会在我们离开页面时消失。 14

最后，我们需要让按钮实实在在地引发一个操作，所以要在控制器中定义after-signin的 15
方法signedIn(oauth)。
这个signedIn()在真实的应用中为我们消除已认证的页面。
16

这个方法会是重定向到一个新路由的理想位置（例如，把已认证的用户导向
/dashboard路由）。 17

angular.module('myApp')
.controller('MainController', 18
function($scope) {