代码改变世界

在ASP.NET MVC5应用程序中快速接入QQ和新浪微博OAuth

2015-06-30 21:53  小白哥哥  阅读(...)  评论(... 编辑 收藏

这篇文章演示如何在你的ASP.NET MVC5应用程序中支持用户使用腾讯QQ和新浪微博的open authentication。

起步

安装Visual studio 2013 higher或者Visual studio express 2013 for web就不再赘述了,点击这里下载。

创建应用程序

打开vs,在Template中选择C#->asp.net web application ,命名为OauthDemo,并点击OK

image

在弹出窗口中选择MVC template,并且选择“Change authentication”选择Indivdula user Accounts

image

使用NUGET更新OWIN中间件

在Project Explorer中右键点击项目,选择”Manage Nuget Packages”,左边栏中选择Updates,然后点击右边的Update all,如果你没有发现Update all,说明你现在的包都是最新的(又或者是你人在中国,说知道呢…)

image

同样,在package manager console中,你也可以通过键入Update-package命令来更新所有的包

image

此时,点击F5应该可以执行你的应用程序,因为我们还没有做任何开发工作。

启动SSL支持

在几乎所有的Oauth提供商都要求接入的应用程序支持SSL连接,所以你需要启动IIS-express中SSL的支持。

在Solution Explorer中,点击MvcAuth,在属性窗口中(如果你没有看见,需要从菜单栏的Views中打开它),选择SSL Enabled为True

image

复制ssl的url,打开项目属性页面,选择Web选项卡,将地址拷贝到Project URL中并保存。

image

 

然后再HomeController上添加RequireHttps标签

[RequireHttps]
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

此时重新启动应用程序,可能会得到一个警告,选择Yes并安装提示的证书就好了。

申请腾讯QQ的Oauth

1. 打开网址http://connect.qq.com/,或者http://connect.qq.com/intro/login

2. 登陆你的QQ账号,并点击QQ登陆->申请加入

image

3. 打开页面中,创建页面,并根据要求填写信息

image

这里比较麻烦的是,腾讯需要验证你输入的网址是否是你自己所有的,所以你需要有一个自己的域名,这里不要尝试修改host的方法,腾讯是后台验证的,所以没有什么卵用。

 

4.在创建好以后,在管理中心页面,就可以看到你的App id和app key啦

image

申请新浪微博的Oauth

1. 打开网址http://open.weibo.com/,并登录你的微博账号。

2. 在“微链接”->”网站接入“中,点击”立即接入”

image

3.同样按照要求输入内容,新浪也要求验证你的域名所有权,所以折腾去吧。

4.创建完成后,在“我的应用”里就可以看到了,打开你创建的应用,在测试账号中输入自己的账号,因为没有认证的账号是不允许进行开发和测试的登陆的

image

5.在“借口管理”->“授权机制”中,输入回调地址“https://www.yourdomain.xx/sign-in”

image

6.最后在“网站信息”->“基本信息”中,可以查看到app id 和app secert:

image

 

快速接入

1. 在Package manager console中,键入以下两个命令添加对腾讯QQ和新浪微博的oauth provider

Install-Package Microsoft.Owin.Security.Sina

Install-Package Microsoft.Owin.Security.Tencent

结果如图所示:

image

2. 打开App_Start目录下的Startup.Auth.cs文件,在文件顶部添加以下命名空间:

using Microsoft.Owin.Security.Tencent;
using Microsoft.Owin.Security.Sina;

3. 在app.UseExternalSignInCookie(…的调用后,添加以下两行代码,从而添加应用程序对腾讯QQ和新浪微博oauth的支持:

app.UseTencentAuthentication("101224440", "***************************************");
app.UseSinaAuthentication("2522592830", "******************************************");

4. 现在不可以通过支持按下F5来测试结果,因为各个oauth提供商会验证和调用你在上一节中设置的域名是否正确,有两种方法可以做到这一点,第一就是直接将程序部署并且解析域名,这种方式明显不适合开发;第二种方法也是接下来要使用的方法,将程序部署在本地IIS并且修改host文件。

打开IIS,创建应用程序,指向当前项目的根目录

image

而后修改host文件,添加以下内容:

最后,编译你的应用程序,浏览器打开https://www.yourdomain.xx,点击”Login“,就可以在右侧看到添加的两个oauth provider啦:

image

imageimage

image

资源地址&源码

https://www.nuget.org/packages/Microsoft.Owin.Security.Sina/

https://www.nuget.org/packages/Microsoft.Owin.Security.Tencent/

https://github.com/xiaoyaojian/OwinOAuthProvider