使用 Twitter 登录

通过“使用 Twitter 登录”在站点或应用程序上放置一个按钮,让 Twitter 用户只需点击一次即可享受已注册用户账号的权益。这适用于网站、iOS、移动设备和桌面应用程序。

Sign in with Twitter button

 

功能

  • 易于使用 - 站点的新访问者在首次登录时只需点击两个按钮即可。
  • Twitter 集成 -“使用 Twitter 登录”流程可授权代表你的用户使用 Twitter API。
  • 基于 OAuth - 大量客户端库和示例代码与“使用 Twitter 登录”API 兼容。

 

可用于

  • 浏览器 - 如果你的用户可访问浏览器,那么你可与“使用 Twitter 登录”集成。 了解浏览器登录流程。
  • 移动设备 - 任何联网的移动设备都可以利用“使用 Twitter 登录”。 了解移动登录流程。

实现“使用 Twitter 登录”

“使用 Twitter 登录”的浏览器和移动网站实现基于 OAuth。此页面演示获取登录流程的访问令牌所需的请求。

若要利用“使用 Twitter 登录”流程,请转到 Twitter 应用设置,并确保已启用“Allow this app to be used to Sign in with Twitter?”选项。

本页面假定读者了解如何使用 OAuth 1.0a 协议对请求进行签名。如果你想要了解如何对请求进行签名,请阅读对请求授权页面。

如果想要检查此页面上的请求签名,请使用以下使用者机密: L8qq9PZyRg6ieKGEKhZolGC0vJWLw8iEJ88DRdyOg。此值用于测试目的,不适用于实际请求。

下面列出了实现“使用 Twitter 登录”的三个步骤,那就是获取请求令牌、重定向用户,以及将请求令牌转换为访问令牌。

 

步骤 1:获取请求令牌

要启动登录流程,Twitter 应用必须通过向 POST oauth/request_token 发送签名消息来获取请求令牌。此请求中的唯一参数是 oauth_callback,它必须是你希望用户在完成步骤 2 时被重定向到的 URL 的 URL 编码版本。其余参数由 OAuth 签名过程添加。

 

请注意 - 与 POST oauth/request_token 端点一起使用的任何回调 URL 都必须在开发者门户Twitter 应用设置中注册。

 

示例请求(已包装授权标头):


POST /oauth/request_token HTTP/1.1
User-Agent: themattharris' HTTP Client
Host: api.twitter.com
Accept: */*
Authorization:
        OAuth oauth_callback="http%3A%2F%2Flocalhost%2Fsign-in-with-twitter%2F",
              oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
              oauth_nonce="ea9ec8429b68d6b77cd5600adbbb0456",
              oauth_signature="F1Li3tvehgcraF8DMJ7OyxO4w9Y%3D",
              oauth_signature_method="HMAC-SHA1",
              oauth_timestamp="1318467427",
              oauth_version="1.0"


应用应检查响应的 HTTP 状态。只要值不是 200,就表示存在故障。响应正文将包含 oauth_tokenoauth_token_secretoauth_callback_confirmed 参数。应用应认证 oauth_callback_confirmed 是否为 true,并存储其他两个值供后续步骤使用。

示例响应(已包装响应正文):


HTTP/1.1 200 OK
Date: Thu, 13 Oct 2011 00:57:06 GMT
Status: 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 146
Pragma: no-cache
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Vary: Accept-Encoding
Server: tfe

oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
oauth_token_secret=veNRnAWe6inFuo8o2u8SLLZLjolYDmDP7SzL0YfYI&
oauth_callback_confirmed=true

步骤 2:重定向用户

下一步是将用户定向至 Twitter,以便他们可以完成相应的流程,如以下“浏览器登录流程”所述。将用户定向至 GET oauth/authenticate,在步骤 1 中获得的请求令牌应作为 oauth_token 参数传递。

要使网站实现这一点,操作最顺畅的方式是发出 HTTP 302 重定向作为对原始“登录”请求的响应。移动和桌面应用应打开一个新的浏览器窗口,或通过嵌入式 Web 视图定向至 URL。

要重定向到的 URL 示例:

https://api.twitter.com/oauth/authenticate?oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0

登录端点将根据用户的状态通过三种方式之一进行操作:

  1. 已登录并已批准:如果用户已登录 twitter.com 并且已批准发出调用的应用程序,系统将立即对他们进行身份验证,并将其返回到包含有效 OAuth 请求令牌的回调 URL。重定向到 twitter.com 对用户来说并不明显。
  2. 已登录但未批准:如果用户已登录 twitter.com 但尚未批准发出调用的应用程序,系统将显示与发出调用的应用程序共享访问权限的请求。接受授权请求后,用户将被重定向到包含有效 OAuth 请求令牌的回调 URL。
  3. 未登录:如果用户未登录 twitter.com,系统将提示他们输入凭据并授予应用程序在同一屏幕上访问其信息的权限。登录后,系统会将用户返回到包含有效 OAuth 请求令牌的回调 URL。

以下流程图演示了登录互动的可能状态:

 

成功进行身份验证后,callback_url 将收到一个包含 oauth_tokenoauth_verifier 参数的请求。应用程序应验证令牌是否与步骤 1 中收到的请求令牌匹配。

来自客户端重定向的请求(已包装 querystring 参数):



GET /sign-in-with-twitter/?
        oauth_token=NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0&
        oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/535.5 (KHTML, like Gecko) Chrome/16.0.891.1 Safari/535.5
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Referer: http://localhost/sign-in-with-twitter/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

 

步骤 3:将请求令牌转换为访问令牌

要将请求令牌呈现为可使用的访问令牌,应用程序必须向 POST oauth/access_token 端点发出请求,其中包含在步骤 2 中获得的 oauth_verifier 值。请求令牌也在标头的 oauth_token 部分中传递,但这将由签名过程添加。

示例请求(已包装授权标头):


POST /oauth/access_token HTTP/1.1
User-Agent: themattharris' HTTP Client
Host: api.twitter.com
Accept: */*
Authorization: OAuth oauth_consumer_key="cChZNFj6T5R0TigYB9yd1w",
                     oauth_nonce="a9900fe68e2573b27a37f10fbad6a755",
                     oauth_signature="39cipBtIOHEEnybAR4sATQTpl2I%3D",
                     oauth_signature_method="HMAC-SHA1",
                     oauth_timestamp="1318467427",
                     oauth_token="NPcudxy0yU5T3tBzho7iCotZ3cnetKwcTIRlX0iwRl0",
                     oauth_version="1.0"
Content-Length: 57
Content-Type: application/x-www-form-urlencoded

oauth_verifier=uw7NjWHT6OJ1MpJOXsHfNxoAhPKpgI8BlYDhxEjIBY

成功的响应包含 oauth_tokenoauth_token_secret 参数。应存储令牌和令牌机密,并将其用于今后针对 Twitter API 的经过身份验证的请求。要确定用户的身份,请使用 GET account/verify_credentials

示例响应(已包装响应正文):



HTTP/1.1 200 OK
Date: Thu, 13 Oct 2011 00:57:08 GMT
Status: 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 157
Pragma: no-cache
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
Vary: Accept-Encoding
Server: tfe

oauth_token=7588892-kagSNqWge8gB1WwE3plnFsJHAZVfxWD7Vb57p0b4&
oauth_token_secret=PbKfYqSryyeKDWz4ebtY3o5ogNLG11WJuZBc9fQrQo

“使用 Twitter 登录”资源

客户端库

Twitter 库中列出的客户端库将有助于实现“使用 Twitter 登录”。使用 /oauth/authenticate 端点,如前面步骤中所述。

 

按钮

Twitter 希望你的应用程序使用以下按钮,以实现品牌一致性。将这些图像保存到你自己的服务器上。

使用 Twitter 登录(按钮样式):

 

 


使用 Twitter 登录(链接样式):

 

浏览器登录流程适用于能够打开或嵌入 Web 浏览器的网站和应用程序。大致操作是:

 

  • 应用程序呈现一个“使用 Twitter 登录”链接或按钮。
  • 用户点击“Sign in”按钮。
  • 当前 Web 浏览器被重定向到 Twitter(或打开一个新的浏览器,并且该浏览器被定向到 Twitter)。
  • 用户根据需要在 Twitter 上完成登录和授权步骤。
  • Twitter 重定向回应用程序控制下的 URL,为用户传递授权信息。

 

Twitter 会跟踪授权,因此对于已登录 twitter.com 并且已对应用程序进行授权的用户,系统不会显示任何 UI - 而是自动将他们重定向回应用程序。

 

桌面流程

 

 

 

为演示流程,假设上图中的网站(“有史以来最大的网站”)已实现此 API,如登录页上的“Sign in with Twitter”按钮所示。

当用户点击“Sign in”按钮时,他们看到的页面取决于他们是否已登录以及他们之前是否允许应用程序访问其账号。

当用户已登录 twitter.com 但尚未授予访问权限时,系统将显示一个请求的权限列表以及“登录”和“取消”按钮。

当用户未登录 twitter.com 时,系统将显示用户名和密码的输入字段。请注意,即使用户已向应用程序授予访问权限,系统仍将显示权限列表。

 

 

在用户输入有效凭据(若需要)并点击“登录”之后,Twitter 会将用户重定向到启动登录流程的网站。

如果用户已登录 twitter.com 并且已向该网站授予访问权限,则会立即发生此重定向。

移动网站浏览器的 UI 流程的工作方式与浏览器登录流程完全相同,但针对移动浏览器进行了优化。

下面是登录、登出和重定向屏幕的屏幕截图: