您的位置：首页 > 编程语言 > ASP

Live SDK筆記3-使用Live ID登入ASP.NET網站

2012-04-12 23:19 471 查看



Live SDK提供了包含ASP.NET、PHP、WP7、Silverlight、Android、iOS等多個平台的範例程式。既然如此，光說不練未免暴殄天物，就選擇我最熟悉的ASP.NET來實際演練吧!

在github可以取得ASP.NET範例程式，其中OAuthSample只需要一個ASPX，一個HTML，配合Live
Connect的現成Javascript Library，可快速實現由Client端取得使用者MSN Messenger姓名及個人大頭照，感覺蠻有趣的，我們就用它當敲門磚來練習。 

在github可取得Callback.aspx, Callback.aspx.cs及default.html，其中Callback.aspx.cs需要修改，需填入Client ID、Reidrect Page網址以及Client Secret:

排版顯示純文字

public partial class Callback : System.Web.UI.Page

{

private const string wlCookie = "wl_auth";

 

private const string clientId = "0000000048076EE5";

private const string callback =

"http://www.darkthread.net/AspNet4/LiveSDK/callback.aspx";

private const string clientSecret = "3n6YXboo5wnfooJwrbo0800092000dPd";


default.html的部分原本只需指定Client ID及Redirect Page網址，但我加入jQuery做了比較大幅度的改寫，讓程式簡潔一些: :P

排版顯示純文字

<!DOCTYPE html>

<html>

<head>

<title>Windows Live Test</title>

<style>

<!--

.Name

    {

font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif;

font-weight: bold;

}

-->

</style>

<script type='text/javascript'

src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js'></script>

</head>

<body>

<h1>Windows Live Test</h1>

<div>

<div id="signin"></div>

<div id="meName" class="Name"></div>

<div id="meImg"></div>

</div>

<script src="//js.live.net/v5.0/wl.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

WL.Event.subscribe("auth.login", function () {

var session = WL.getSession();

if (session.error)

alert("Error:" + session.error);

else {

var token = session != null ? session.access_token : null;

if (token != null) {

var url =

"https://apis.live.net/v5.0/me/picture?access_token=" + escape(token);

$("#meImg").html("<img src='" + url + "' />");

WL.api({ path: "me", method: "get" }, function (response) {

if (!response.error) {

$("#meName").html(

response.first_name + " " + response.last_name);

}

});

        }

    }

});

WL.Event.subscribe("auth.logout", function () {

$("#meImg,#meName").html("");

});

WL.init({

client_id: "0000000048076EE5",

redirect_uri: "http://www.darkthread.net/AspNet4/LiveSDK/callback.aspx",

scope: ["wl.signin", "wl.basic", "wl.offline_access"],

response_type: "code"

});

WL.ui({

name: "signin",

element: "signin"

});

});

</script>

</body>

</html>


網頁在一開始載入wl.js(如果要研究或偵錯，可改用wl.debug.js未壓縮版)，複雜工作都已被封裝在現成的Javascript函數中，我們只需要: 

1) WL.Event.subscribe("auth.login", fn) 指定使用者已登入或登入完成時要執行的動作 

2) WL.Event.subscribe("auth.logout", fn) 指定使用者登出時要執行的動作 

3) WL.ui() 指定在<div id="signin">自動加上登入登出按鈕 

4) WL.init() 指定Client ID, Redirect Page及存取資料範圍(Scope) 

(範圍部分指定了三項: wl.signin是指當使用者已登入過其他Live Connect服務時在本網站可自動登入, wl.basic用來存取基本資料, wl.offline_access用來確保可在使用者未登入MSN時也能取得資訊，關於範圍的定義，前文有較多介紹)

WL.init()時指定response_type: "code"，因此將會依循Authorization Code Grant Flow 運作(可參考前文)，運作時會先跳出Live帳號的登入及同意授權畫面(Consent
Page)，當若使用者同意後，網頁會被導向Redirect Page(Callback.aspx)以Query Sting帶入code=authorization_code參數。Callback.aspx.cs中有邏輯會將所傳入的authorizationcode配合Client ID、Client Secret送至httqs://oauth.live.com/token驗證，取得Access Token並寫入Cookie，前端即可應用它進行後續存取。

要測試偵錯時有個小技巧，因Live Connect API只接受當初註冊Domain的網頁作為Redirect URL，因此若要在本機執行偵錯，指向localhost是不可行的。較簡單的克服方法是修改system32/dirvers/etc/hosts，將註冊的Domain(我的例子中是www.darkthread.net)暫時指向127.0.0.1，如此httq://www.darkthread.net將被導向本機的IIS，導向Redirect
Page時，實際上會在本機執行。

將程式部署到IIS網站上，開啟default.html即可看到如下畫面，wl.js依我們的指示在<div id="singin">裡放入了一顆Sign in鈕，按下後會彈出來自live.com，大家很熟悉的登入畫面。這代表在整個授權過程中，我們的程式完全不參與登入過程，不會接觸到帳號密碼，使用者也不必擔心自己的密碼透露給第三方網站知道，這是OAuth機制的重要精神所在。 



登入完成後，使用者會進入授權同意畫面(Consent Page)，其中列舉的授權項目，一一對應到程式所要求的wl.sigin, wl.basic, wl.offline_access等範圍。 



一旦使用者同意授權，WL.Event.subscribe("auth.login", fn) 的函數會被觸發，但此時Callback.aspx已先在背地裡完成一連串動作: (即前文所說的Authorization
Code Grant Flow) 

* Live Connect導向Callback.aspx?code=authorizationcode 

* Callback.aspx接收authorizationcode，加上Client ID, Client Secrect當成參數呼叫httqs://oauth.live.com/token，取得Access Token 

* 將Access Token以Cookie方式傳回 

使用Visual Studio中斷點偵錯或用Fiddler可以觀察到這段過程: 



由於Callback.aspx已透過Cookie傳遞了Access Token，使用JavaScript由WL.getSession().access_token可取得Access Token，呼叫httqs://apis.live.net/v5.0/me/picture?access_token=…可以顯示使用者的MSN大頭照，使用WL.api()呼叫"me"取回User
Object(背後是呼叫httqs://apis.live.net/v5.0/me/ REST)，可得到first_name及last_name，呈現在網頁上，就完成了Live Connect API的"Hello World測試"囉! 


 

我放了一個線上展示，有興趣的人可以玩看看。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  asp.net redirect token authorization access javascript
相关文章推荐
新的分享
章节导航