[ASP.NET] 使用 OAuth 2.0 整合 Google、Facebok、WindowsLive、Xuite 登入

摘要:[ASP.NET] 使用 OAuth 2.0 整合 Google、Facebok、WindowsLive 登入


前言


之前写过一篇 [ASP.NET] 于ASP.NET将Facebook账号整合 文章,是介绍使用 Facebook SDK 来处理账号登入,但是社群网站很多,一般来说能Facebook登入就能够google登入或者其他的...

而要FB登入用Facebook API,要google登入用Google API,这样下去就有点太繁琐了,能不能整合在一起呢?

当然是可以的,我们可以使用 开放授权(OAuth) ,目前的版本分为 OAuth 2.0 与 OAuth 1.0,透过 OAuth 进行验证后可以让我们去存取该平台特定的资源,如 Google, Facebook 等等...在手机、平版、桌上电脑上都可以使用,而具体的验证流程可以参考下图:

那在 ASP.NET 中,该如何去做 OAuth 验证呢?

小朱大的Blog已经有写关于OAuth的介绍与使用,各位可以去参考看看

http://www.dotblogs.com.tw/regionbbs/Tags/OAuth/default.aspx

我也是先看到小朱大的OAuth文章来进一步了解,并且小朱大有提供 EasyOAuth Framework 可以使用,整合了很多社群网站平台的验证,很不错!需要的可以去这里下载 http://easyoauth.codeplex.com/,不过因为我在使用 EasyOAuth 时,可能是中邪XD  不太顺利,最后决定参考 EasyOAuth 自己编写一个简单的类库来使用,最后也会提供出来。

范例


首先说明一下使用OAuth的步骤,

第一步我们需要先到你所要使用的服务平台建立你的应用程序,接下来我使用Google为范例说明,前往Google的Console控制面板网站 https://code.google.com/apis/console/ ,点选 Create Project ...

进入后左侧菜单选择 API Access,再选择 Create an OAuth 2.0 Client ID ...

这边的目的是在建立你知后要使用验证的应用程序,

之后会跳出建立窗口,输入 Product Name 点选 Next

在来就选择 Web application,点选 more options 展开options

这边要注意的是 Authorized Redirect URLs 要填写你验证成功的导向页

也就是你程序在处理验证成功的网页路径,Google跟Facebook都可以使用本机测试,WindowsLive不行喔

设定完成后,在画面中就可以看到刚刚建立的应用程序了,而我们之后要用到的就是 Client ID Client Secret

应用程序建立完成后就要开始编写程序,先来看看验证的流程,首先我们会将使用者导向到该社群平台的验证账号密码页面,我将发送一个Request到对方Server请求验证,而发送的URL如下:

https://accounts.google.com/o/oauth2/auth?
scope={0}&state={1}&redirect_uri={2}&response_type=code&client_id={3}&approval_prompt=force 
  • scope: 授权范围
  • state: 可附加的任意字符串,Server会回传
  • redirect_url: 回传的网址
  • response_type: 回传的类型 Code 或 Token,网站不建议使用Token
  • client_id: 申请的Client ID

发送此URL后如果验证成功,将回传 CODE 到我指定的网址:

http://localhost:6185/Web/Accepted.aspx?code={authorizationCode}

失败的话则是:

http://localhost:6185/Web/Accepted.aspx?error=access_denied

当我们取得 Code 之后就要继续取得 Access Token只有在取得 Access Token 后才能真正去读取登入者的数据,接下来需要将刚刚取得的CodeClient IDClient Secret传送到取得Access Token的URL,

https://accounts.google.com/o/oauth2/token?
code={0}&client_id={1}&client_secret={2}&redirect_uri={3}&grant_type=authorization_code
  • code: 回传的CODE
  • client_id: 申请的Client ID
  • client_secret: 申请的Client Secret
  • redirect_url: 回传的网址

发送此URL后如果验证成功,将回传 Access Token 到我指定的网址:

http://localhost:6185/Web/Accepted.aspx?access_token={access_token}

成功取得 Token 就可以来取得登入者的数据,例如要取得登入者基本数据可以发送此URL并记得要带Token

https://www.googleapis.com/oauth2/v1/userinfo?access_token={0}

而回传的数据将是一个JSON格式字符串,例如:

{
  "id": "00000000000000",
  "email": "[email protected]",
  "verified_email": true,
  "name": "Fred Example",
  "given_name": "Fred",
  "family_name": "Example",
  "picture": "https://lh5.googleusercontent.com/-2Sv-4bBMLLA/AAAAAAAAAAI/AAAAAAAAABo/bEG4kI2mG0I/photo.jpg",
  "gender": "male",
  "locale": "en-US"
}

经过以上的步骤,就是一个标准的认证取得数据的流程,而我在范例程序中提供的类库已经将这些步骤包装了,接下来说明一下范例的使用方式

Step 1

将 MultiOAuth.Core.dll 加入项目参考,开启 Web.config 组态档,加入以下内容并设定成你申请好的数据:

  
    

Step 2

拉一个 ASPX 画面,例如:

在 Code Behind 的使用方式如下:

    protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
    {
        var context = MultiOAuthContext.Create(MultiOAuthFactroy.CreateClient("Google"));
        try
        {
            context.BeginAuth();
        }
        catch (Exception)
        {
            
            throw;
        }
    }

在 MultiOAuthFactroy.CreateClient("Google") 中的,

GoogleClient 可以替换成 FacebookClient 或 WindowsLiveClient

而 ("Google") 则要更改成与 Web.config 组态档中的字符串 Name 一样,当改成 Facebook 时也要记得更换!

context.BeginAuth();   执行后就是开始执行验证。

Step 3:

在指定回传的页面中,可以使用 MultiOAuthContext.Current.Token 直接取得 Token,

如果 token 有值,就可使用 var profile = MultiOAuthContext.Current.Profile 取得登入者资讯,

        string token = MultiOAuthContext.Current.Token;
        if (token != "")
        {
            var profile = MultiOAuthContext.Current.Profile;
            Response.Write(profile["name"].ToString());
        }

剩余的部分可以参考范例中的使用方式,目前有支持的是 Google、Facebook、Windows Live、Xuite,如要增加新的项目,只需要增加对应的 Client 跟 Service 对象,如: YahooClient, YahooService,复制对应的方法修改即可,这个类库算试作的,整体架构的观念不一定对,可能有未预期的BUG,如果有高手能给予建议,也欢迎跟我说明喽!

范例文件


MultiOAuth.rar

MultiOAuth.v1.0.1.rar(含Xuite)

参考数据


OAuth Community Site

http://www.dotblogs.com.tw/regionbbs/archive/2011/09/29/easyoauth.framework.v2.0.announced.aspx?pg=1#feedback

Google 相关

https://developers.google.com/accounts/docs/OAuth2

https://developers.google.com/oauthplayground/

https://code.google.com/apis/console/

Facebook 相关

https://developers.facebook.com/docs/authentication/server-side/

https://developers.facebook.com/docs/authentication/permissions/

https://developers.facebook.com/docs/reference/dialogs/oauth/

Windows Live 相关

http://msdn.microsoft.com/zh-tw/library/live/hh826528.aspx




以上文章叙述如有错误及观念不正确,请不吝啬指教
如有侵权内容也请您与我反应~谢谢您 :)