diff options
Diffstat (limited to 'files/zh-cn/mozilla/persona/quick_setup')
| -rw-r--r-- | files/zh-cn/mozilla/persona/quick_setup/index.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/persona/quick_setup/index.html b/files/zh-cn/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..e39958eb98 --- /dev/null +++ b/files/zh-cn/mozilla/persona/quick_setup/index.html @@ -0,0 +1,140 @@ +--- +title: 快速安装 +slug: Mozilla/Persona/Quick_Setup +tags: + - Mozilla + - Persona +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +<p>要把 Persona 登录系统添加到你的站点只需要 5 步：</p> +<ol> + <li>在你的页面中包含 Persona 的 JavaScript 库。</li> + <li>添加“登入”和“登出”按钮。</li> + <li>监视登入和登出行为。</li> + <li>验证用户证书。</li> + <li>回顾最佳实现。</li> +</ol> +<p>你应该能在一个下午就建立好并运行，但重要的是：如果你要在你的站点上使用 Persona，请花一点时间订阅 <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona 通知</a> 邮件列表。它流量非常低，只用于通知那些对你站点有负面影响的变更或安全问题。</p> +<h2 id="步骤1：包含_Persona_库">步骤1：包含 Persona 库</h2> +<p>Persona 被设计为跨浏览器且可在<a href="https://developer.mozilla.org/docs/persona/Browser_compatibility">全部主要桌面和移动浏览器</a>中工作。</p> +<p>在未来我们期望浏览器提供 Persona 的原生支持，但我们同时提供了一个 JavaScript 库完整地实现了用户界面和客户端部分的协议。通过包含这个库，你的用户会可以用 Persona 登入，无论他们的浏览器是否有原生支持。</p> +<p>一 旦页面中的这个库加载完毕，你需要的 Persona 函数（{{ domxref("navigator.id.watch()", "watch()") }}、{{ domxref("navigator.id.request()", "request()") }} 和 {{ domxref("navigator.id.logout()", "logout()") }}）会在全局对象 <code>navigator.id</code> 中可用。</p> +<p>要包含 Persona JavaScript 库，你可以把这个 <code>script</code> 标签放进你页面的首部：</p> +<pre class="brush: html;"><script src="https://login.persona.org/include.js"></script> +</pre> +<p>你<strong>必须</strong>在每个使用 {{ domxref("navigator.id") }} 中函数的页面里包含这个标签。因为 Persona 始终在开发中，你不应该自行托管 <code>include.js</code> 文件。</p> +<h2 id="步骤2：添加登入登出按钮">步骤2：添加登入/登出按钮</h2> +<p>因 为 Persona 被设计为一个 DOM API，你必须在用户点击你站点上的登入或登出按钮时调用函数。要打开 Persona 对话框并提示用户登入，你应该调用 {{ domxref("navigator.id.request()") }} 。而登出要调用 {{ domxref("navigator.id.logout()") }} 。</p> +<p>例如：</p> +<pre class="brush: js;">var signinLink = document.getElementById('signin'); +if (signinLink) { + signinLink.onclick = function() { navigator.id.request(); }; +}; + +var signoutLink = document.getElementById('signout'); +if (signoutLink) { + signoutLink.onclick = function() { navigator.id.logout(); }; +}; +</pre> +<p>那些按钮的是什么样子的？查看我们的<a href="https://developer.mozilla.org/docs/persona/branding">品牌资源</a>页面中的预制图片和基于 CSS 的按钮！</p> +<h2 id="步骤3：监视登入登出行为">步骤3：监视登入/登出行为</h2> +<p>要把 Persona 封装成函数，你需要告诉它当用户登入/登出时做什么。调用 {{ domxref("navigator.id.watch()") }} 函数就可以实现，它支持三个参数：</p> +<ol> + <li> + <p>你站点当前用户的 <code>loggedInEmail</code> ，如果没有则为 <code>null</code> 。你应该在渲染页面的时候动态生成它。</p> + </li> + <li> + <p>当触发 <code>onlogin</code> 行为的时候调用的函数。这个函数会被传递一个必须认证的“身份断言”参数。</p> + </li> + <li> + <p>当触发 <code>onlogout</code> 行为的时候调用的函数。这个函数不会被传递任何参数。</p> + </li> +</ol> +<div class="note style-wrap"> + <p><strong>注意：</strong>你必须总是在调用 {{ domxref("navigator.id.watch()") }} 时同时包含 <code>onlogin</code> 和 <code>onlogout</code> 。</p> +</div> +<p>例如，如果你现在认为鲍勃已经登入到你的站点，你会这样做：</p> +<pre class="brush: js;">var currentUser = 'bob@example.com'; + +navigator.id.watch({ + loggedInUser: currentUser, + onlogin: function(assertion) { + // 一个用户已经登入！这是你需要做的： + // 1. 把断言发送到后端验证并创建一个会话。 + // 2. 更新你的 UI。 + $.ajax({ /* <-- 本例使用了 jQuery，但你也可以用你想用的 */ + type: 'POST', + url: '/auth/login', // 这是你网站上的一个 URL + data: {assertion: assertion}, + success: function(res, status, xhr) { window.location.reload(); }, + error: function(res, status, xhr) { alert("登入失败" + res); } + }); + }, + onlogout: function() { + // 一个用户已经登出！这是你需要做的： + // 销毁用户的会话并重定向用户或做后端的调用。 + // 同样，让 loggedInUser 在下个页面加载时变为 null。 + // （这是一个字面的 JavaScript null。不是 false、 0 或 undefined。null。) + $.ajax({ + type: 'POST', + url: '/auth/logout', // 这是你网站上的一个 URL + success: function(res, status, xhr) { window.location.reload(); }, + error: function(res, status, xhr) { alert("登出失败" + res); } + }); + } +}); +</pre> +<p>在本例中，<code>onlogin</code> 和 <code>onlogout</code> 都通过向你站点的后端发送异步 <code>POST</code> 请求来实现。后端随后通常用设定或删除会话 cookie 中的信息来登入或登出用户。之后，如果一切都核对无误，页面重加载来考虑账户的新登录状态。</p> +<p>你当然可以用 AJAX 来不用重加载或重定向来实现，但这超出了本教程的范畴。</p> +<p>你<strong>必须</strong>在每个有登入/登出按钮的页面上调用这个函数。要为用户支持 Persona 加强功能，诸如自动登录和全局登出，你<strong>应该</strong>在网站上的每个页面都调用这个函数。</p> +<h2 id="步骤4：验证用户证书">步骤4：验证用户证书</h2> +<p>Persona 用“身份断言”来代替密码，那是一种类似一次性、单站点的、用户邮件地址捆绑的密码。当用户想要登入时，你的 <code>onlogin</code> 回调会传入一个该用户的断言来调用。在你登入他们前，你必须验证断言的有效性。</p> +<p>在你的服务器上而不是用户浏览器上运行的 JavaScript 中验证断言是<em>极度</em>重要的，因为那很容易伪造。上面的例子用 jQuery 的 <code>$.ajax()</code> 辅助函数来把断言通过 <code>POST</code> 到 <code>/auth/login</code> 来呈递给后端。</p> +<p>一旦你的服务器获得了断言，你如何验证它？最简单的方法是用 Mozilla 提供的辅助服务。简单地把断言以两个参数 <code>POST</code> 给 <code>https://verifier.login.persona.org/verify</code>：</p> +<ol> + <li><code>assertion</code>: 用户提供的身份断言。</li> + <li><code>audience</code>: 你网站的主机名和端口。你必须在后端硬编码这个值；不要从用户提供的任何数据中派生这个值。</li> +</ol> +<p>例如，如果你是 <code>example.com</code>，你可以用下面的命令行来测试断言：</p> +<pre class="brush: bash;">$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify" +</pre> +<p>如果它是有效的，你会得到像这样的一个 JSON 响应：</p> +<pre class="brush: js;">{ + "status": "okay", + "email": "bob@eyedee.me", + "audience": "https://example.com:443", + "expires": 1308859352261, + "issuer": "eyedee.me" +} +</pre> +<p>你可以阅读<a href="https://developer.mozilla.org/en-US/docs/BrowserID/Remote_Verification_API">验证服务 API</a>来获知更多关于验证服务的内容。一个 <code>/api/login</code> 实现的使用了 <a href="http://python.org/">Python</a>、<a href="http://flask.pocoo.org/">Flask</a> web 框架和 <a href="http://python-requests.org">Requests</a> HTTP 库的例子看起来是这样：</p> +<pre class="brush: python;">@app.route('/auth/login', methods=['POST']) +def login(): + # 请求必须包含我们要验证的断言 + if 'assertion' not in request.form: + abort(400) + + # 把断言发送给 Mozilla 的验证服务 + data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'} + resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True) + + # 验证器响应了吗？ + if resp.ok: + # 处理响应 + verification_data = json.loads(resp.content) + + # 检查断言是否有效 + if verification_data['status'] == 'okay': + # 设置一个安全会话 cookie 来登入用户 + session.update({'email': verification_data['email']}) + return resp.content + + # 哎哟，有什么东西不对，放弃 + abort(500) +</pre> +<p>会话管理可能很像你现有的登录系统。首先的大区别是在验证用户身份采用了检查断言而不是检查密码。另一个不同是确保用户的邮件地址有效来用于 {{ domxref("navigator.id.watch()") }} 的 <code>loggedInEmail</code> 参数</p> +<p>登出很简单：你只需要移除用户的会话 cookie。</p> +<h2 id="步骤5：回顾最佳实践">步骤5：回顾最佳实践</h2> +<p>一旦所有的东西都工作正常并且你已经成功登入和登出你的站点，你应该花一会时间来回顾安全可靠地使用 Persona 的<a href="https://developer.mozilla.org/docs/BrowserID/Security_Considerations">最佳实践</a>。</p> +<p>如果你在做一个要作为生产环境的站点，你会想要编写集成的测试来模拟用 Persona 登入或登出用户。要改善 Selenium 中的这个行为，请考虑使用 <a href="https://github.com/mozilla/bidpom" title="https://github.com/mozilla/bidpom">bidpom</a> 库。<a href="https://mockmyid.com/" title="https://mockmyid.com/">mockmyid.com</a> 和 <a href="http://personatestuser.org" title="http://personatestuser.org">personatestuser.org</a> 这两个网站也可能会有用。</p> +<p>最后，不要忘记登记加入 <a href="https://mail.mozilla.org/listinfo/persona-notices">Persona 通知</a> 邮件列表，这样会通知你任何安全问题或 Persona API 的向后兼容变更。这个列表的流量非常低：它只用于通知会对你的站点造成负面影响的变更。</p> |