用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字

feng    -  云代码空间

——

纯 JavaScript 实现的 OAuth 认证

2013-05-08|4797阅|作者：feng|举报

摘要:如果你不打算长篇阅读，你可以去直接下载源代码文件然后随便你怎么使用/修改。 首先，我们包含一些文件在我们的HTML页面的头部。 1

如果你不打算长篇阅读，你可以去直接下载源代码文件然后随便你怎么使用/修改。

首先，我们包含一些文件在我们的HTML页面的头部。

1 <!--Register Jquery-->
2 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
3 <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
4 <!--Register Google Api-->
5 <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>

最近的时间，Twitter已经废弃使用可能会导致开发者变得畏畏缩缩的单点客户端认证。然而，感谢YUI（由Yahoo！提供的API）我们能够使用Javascript这样去模拟一个服务端请求到Twitter。所以我们也可以把YUI的库包含在头部。

1 <!--Register YUI Api-->
2 <script type="text/javascript"
3   src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
我们现在创建DOM元素来触发请求。这些元素可以是你的任意选择。
1 <div id="fbLogin" onclick="">Facebook</div>
2 <div id="twitterlogin">Twitter</div>
3 <div id="googlelogin">Google</div>
现在我们看下脚本。我们从Facebook的登陆开始。


Facebook

我们要创建的第一个函数用来向 Facebook oAuth API 发送初始化请，函数将发送客户端 ID（由你的Facebook 应用给出），重定向 URL （必须同你注册应用时填写的一样），还有请求类型（此处是访问令牌）。访问令牌是用户验证所必须的，并也会用来访问 Facebook 的图形 API，以及获取用户个人信息。

01 var appID = <YOUR CLIENT ID>;
02   
03 function fbLogin() {
04     var path = 'https://www.facebook.com/dialog/oauth?';
05     var queryParams = ['client_id=' + appID,
06     'redirect_uri=' + window.location,
07     'response_type=token'];
08     var query = queryParams.join('&');
09     var url = path + query;
10     window.location.replace(url);
11 }

相应将是一个附加形如 "#access_token=......." 的哈希字符串的访问令牌的到你网站的重定向。要使用访问令牌，我们现在需要一个检查 URL 中访问令牌的函数。同时此函数也将对 Facebook 图形 API 发送一个带有访问令牌和一个以参数形势接受用户信息的回调函数的请求。

01 function checkFbHashLogin() {
02   
03     if (window.location.hash.length > 3) {
04         var hash = window.location.hash.substring(1);
05         if(hash.split('=')[0] == 'access_token')
06         {
07             var path = "https://graph.facebook.com/me?";
08             var queryParams = [hash, 'callback=displayUser'];
09             var query = queryParams.join('&');
10             var url = path + query;
11   
12             //use jsonp to call the graph
13             var script = document.createElement('script');
14             script.src = url;
15             document.body.appendChild(script);
16         }
17         
18     }
19 }

第三步，我们的回调函数会将用户信息转化为我们可见的形势。

01 function displayUser(user) {
02     setTimeout(function () { }, 1000);
03     if (user.id != null && user.id != "undefined") {
04        //Do Stuff
05        //You have access to user id, name, username, gender etc.
06        //For more info visit https://developers.facebook.com/docs/
07        //                      reference/login/public-profile-and-friend-list  
08     }
09     else {
10         alert('user error');
11     }
12 }

最后，我们需要一个函数调用的触发器，且我们也需要一个在页面加载的时候检查哈希字符串的函数。

1 $(function () {
2   
3     checkFbHashLogin();
4   
5     $('#fbLogin').click(function () {
6         fbLogin();
7     });
8 })

现在我们已完成了Facebook的身份验证。



Google

首先，我将给出一个带有解释运作的注释的函数。如前所述，我们需要谷歌的客户端ID，我们的应用必须使用 API 密钥。

01 var clientId = <YOUR CLIENT ID>;
02 var apiKey = <YOUR API KEY>;
03 varscopes = 'https://www.googleapis.com/auth/plus.me'; 
04   
05   
06 // Our first function is used to set the api key and
07 // is run once the google api is loaded in the page header.
08 function handleClientLoad() {
09     gapi.client.setApiKey(apiKey);
10 }
11   
12 //Gets the result after the authorization and if successful,
13 //it makes the api call to get the  //user's information.
14 function handleAuthResult(authResult) {
15   
16     if (authResult && !authResult.error) {
17         makeApiCall();
18     }
19 }
20    
21 //Make api call on button click to authorize client
22 functionhandleAuthClick(event) { gapi.auth.authorize({ client_id: clientId,
23             scope: scopes, immediate: false }, handleAuthResult);
24   
25     return false;
26 }
27   
28 // Load the API and make an API call.  Display the results on the screen.
29 function makeApiCall() {
30     gapi.client.load('plus', 'v1', function () {
31         var request = gapi.client.plus.people.get({
32             'userId': 'me'
33         });
34   
35         request.execute(function (resp) {
36         //Do Stuff
37          //You have access to user id, name, display name, gender, emails, etc.
38         //For more info visit https://developers.google.com/+/api/latest/people#resource
39  
40         });
41     });
42 }
43   
44 $(function () {
45     var authorizeButton = document.getElementById('googlelogin');
46     authorizeButton.onclick = handleAuthClick;
47 })
这样就完成了谷歌的认证。


Twitter

正如之前所说，Twitter API 并不允许纯粹的客户端验证。因此需要使用 YUI 库。此库使用雅虎查询语言(YQL)制定对Twitter API 的服务器端请求。

例如，应用中可能使用的一条 YQL 如下：

1 select * from twitter.oauth.requesttoken where oauth_callback="<YOUR WEBSITE URL>";

你可以看到，select 语句同其它查询语言的 select 语句一样。select 语句的条件参数（oauth_callback）是你 Twitter 应用所注册的 URL。由于我们选择 URL 匹配，我们并不需要客户端ID。由于我们使用 JavaScript，我们可以使用 window.location 获取当前 URL 用于查询（在代码中已处理）。本质上，我们无需关注 YUI 和 YQL。因此，让我们看看 YUI 库的实现，以及它是如何调用 Twitter API 的。




首先是初始化 YUI 对象。使用此对象，我们将设定所用的模块以及它们的地址。在这里将使用 Twitter 和 YQL 模块。

01 YUI({
02     combine: false,
03     filter: "raw",
04     debug: false,
05     modules: {
06          
07         'Twitter': {
08            fullpath: 'js/twitter.js'
09         },
10         'myYQL': {
11             fullpath: 'js/yql.js',
12             requires: ['jsonp', 'jsonp-url']
13         }
14     }
15 })

下一步，我们将告知 YUI库我们将使用资源库中的哪个组件，并提供回调函数。我们通过调用 YUI 的 "use" 函数完成此操作，只需添加到初始化后的 YUI 对象之后。

1 YUI({
2     ...
3 }).use('Twitter', 'gallery-storage-lite', 'myYQL', 'node', "event", function (Y) {});

回调函数将在 YUI 库初始化完成并选定组件之后调用，我们将所有处理 Twitter API 用户验证的代码放置其中。首先要做的是获取触发Twitter 用户验证的元素，并将点击事件绑定的到一个函数上。这个函数将进行第一次 API 调用，获取 oAuth 请求令牌和密钥。这些将在一个查询字符串中传递到 Twitter 用户验证 API，oAuth 令牌验证将以同样的方式返回

01 var twtBtn = Y.one('#twitterlogin');
02   
03 twtBtn.on('click', function (e) {
04     Y.Twitter.call({ type: "request_token" }, function (tokens) {
05         Y.log("step 1");
06         Y.log(tokens);
07         Y.StorageLite.setItem('oauth_token', tokens.oauth_token);
08         Y.StorageLite.setItem('oauth_token_secret', tokens.oauth_token_secret);
09         window.setTimeout(function () {
10             window.location = "https://twitter.com/oauth/authenticate?oauth_token="+
11               tokens.oauth_token + "&oauth_token_secret=" + tokens.oauth_token_secret;
12         }, 10);
13     });
14 });



下面几步将结合嵌套的调用和响应，知道我们获得最终的响应。首先我们将检查查询字符串以获取oAuth 令牌验证。接着令牌和验证将被传递给 YUI Twitter调用以获取访问令牌。最后，访问令牌将被发送到一个调用，以索取用户信息。

01 if (getQueryStringParameter('oauth_token')) {
02   
03     Y.StorageLite.setItem('oauth_token', getQueryStringParameter('oauth_token'));
04     Y.StorageLite.setItem('oauth_verifier', getQueryStringParameter('oauth_verifier'));
05  
06     Y.Twitter.config({
07         oauth_token: getQueryStringParameter('oauth_token'),
08         oauth_token_secret: getQueryStringParameter('oauth_token_secret')
09     });
10  
11     Y.Twitter.call({ type: "access_token" }, function (tokens) {
12         Y.Twitter.config({
13             oauth_token: tokens.oauth_token,
14             oauth_token_secret: tokens.oauth_token_secret
15         });
16  
17         Y.Twitter.call({ type: "credentials" }, function (user) {
18             Y.Twitter.config({
19                 screen_name: user.screen_name,
20                 user_id: user.id
21             });
22  
23             //Do Stuff
24         //You have access to user id, name, screenname, description, etc.
25         //For more info visit https://dev.twitter.com/docs/api/1.1/get/account/verify_credentials
26        });
27     });
28 }

这将完成 Twitter 认证组件的所有请求。

01 //Supporting function to parse the query string
02 function getQueryStringParameter(key, queryString) {
03      
04     var queryString = queryString || window.location.href;
05     key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
06     var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
07     var qs = regex.exec(queryString);
08     if (qs)
09         return qs[1];
10     else
11         return false;
12 }

两点

现今，单点登录的使用率正迅速增长，很多大型网站，如雅虎和Hotmail都允许用户使用单点登录进行验证。例如，在配置Google API时，你可以将其它供应商同你的 Google API 密钥绑定。值得注意的是，所有请求都将使用各个验证提供者应用所登记域名，同时你将需要使用正确的域名和URL网址。因此，应用在你的 Localhost 将无法正常工作。

顶 15踩 12收藏
文章评论
共1 条评论 1/1页
发表评论

个人资料

  • 昵称： feng
  • 等级： 资深程序员
  • 积分： 1584
  • 代码： 8 个
  • 文章： 42 篇
  • 随想： 2 条
  • 访问： 85 次
  • 关注

人气文章

人气代码

标签

c++(2)windows(1)

最新提问

站长推荐