通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件流程及组件集成方法
2012-11-06 12:53
344 查看
上节内容:通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
本节包括以下内容:
[b]1:第三方社区账号登陆的授权流程[/b]
[b]2:OAuth2 组件的下载及web.config配置
3:OAuth2 组件的5行代码编写流程
4 :总结与下节内容预告
[/b]
一: 第三方社区账号登陆的授权流程
1:首先从这里开始:用户进入登陆界面
![](https://oscdn.geek-share.com/Uploads/Images/Content/201212/588f3e76956ec004aa6af9b6d0d67fe6.jpg)
2:用户点击用新浪微博或QQ登陆,系统跳到第三方授权页面,(QQ示例授权界面)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/97941a75fae89501f73f9314fd894380.jpg)
3:确定授权后,第三方跳转返回你的回调页(在应用里设置),通常仍是系统登陆页面统一处理。授权用户绑定您网站的账号。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/d7d54b05057e08ba886bf33c8f8ce146.jpg)
我们首次引导登陆并绑定账号,当然,官方建议的比较好的用户体验的界面是这样的:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/ef769cf828f3fd85558802484009ded0.png)
4:用户正常登陆或注册新账号,自动实现绑定,至此流程结束,下一次用户点用第三方账号登陆时,系统检测到已绑定账号,直接用绑定的账号进入后台。
二:OAuth2 组件的下载及web.config配置
1:下载OAuth2.dll组件,下载:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201103/de51a1aaef16ec59da257c5da33412ec.gif)
OAuth2.rar(
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/bb18ca4e70b5c1f329bcf28b09ce4b52)
)
2:引用该dll到您的网站项目中;
3:在web.config配置您的appkey、appsercet及回调网址(通常是登陆页面),相关的数据填写到web.config对应key的value里。
PS:获取或调置回调网址是在新浪和QQ开放者平台操作的,相关网址见上节文章。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/388d0af325a91a8b4a24d83f52bd9d9a.jpg)
接下来,我们要在登陆界面(示如Login.aspx)动点小手术:
三:OAuth2 组件的5行代码编写流程
1: OAuth2.UI.GetHtml() //获取界面显示
代码示例:通常我们可能会在Login.aspx的html里写上这么一行代码来显示: <%=OAuth2.UI.GetHtml()%>
当然我们也经常喜欢在Login.aspx.cs后台代码(通常是Page_Load事件)里输出:div控件ID.InnerHtml=OAuth2.UI.GetHtml();
于是就有了刚才的登陆界面下面那两个第三方授权链接图标:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201212/588f3e76956ec004aa6af9b6d0d67fe6.jpg)
用户点击第三方授权,跳到第三方授权页面,操作完回调还会返回到这个登陆界面,只是多了两个参数code=xxxx&state=xxx(回调页面仍设置登陆页)。
2:OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//获取当前的授权类型,如果成功,则缓存到Session中。
3:ob.Authorize(out account)//检测是否授权成功,并返回绑定的账号。
这两行代码,是写在Page_Load事件中,判断如果是跳转回来的,就分析授权,然后进行分支处理:
以下是示例的分支代码:
OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//获取当前的授权类型
if (ob != null) //说明用户点击了授权,并返回到登陆界面来
{
string account = string.Empty;
if (ob.Authorize(out account))//检测是否授权成功,并返回绑定的账号(具体是绑定ID还是用户名,你的选择)
{
if (!string.IsNullOrEmpty(account))//已绑定账号,直接用该账号设置登陆。
{
//根据账号,设置登陆、设置cookie,跳转到后台管理界面。
}
else // 未绑定账号,引导提示用户绑定账号。
{
//取用户的第三方头像和昵称,组装界面显示,像秋色园就一行提示文字
}
}
else // 读取授权失败。
{
//提示用户重试,或改用其它社区方法登陆。
}
如果用户已经授权,首次未绑定账号,通常就有了最下方的提示文字,同时“登陆”的文字就改成了“绑定账号":
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/d7d54b05057e08ba886bf33c8f8ce146.jpg)
4:OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//获取存在Session的授权
5:ob.SetBindAccount(userName);//绑定账号
这两行代码,写在BtnLogin和BtnRegister按钮的事件中,当用户登陆,或注册新账号时,我们从Session中获取刚刚的社区授权,然后绑定账号:
//用户登陆,或注册完账号(这时我们可以拿到ID或者username,绑定哪个就看使用哪个方便了,我们添加以下三行代码,
OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//获取刚刚的授权(授权后存在Session中)
if (ob != null && !string.IsNullOrEmpty(ob.openID))
{
ob.SetBindAccount(userName);//绑定账号username或id都可以
}
到这里,整个应用就完成了,就是这么简单,除配置项,组件提供的关键的代码只有5行,却实现了相关的功能。
四:总结与下节内容预告
A:看完本文,您应该可以获取到以下信息:
1:知道OAuth授权的界面流程
2:知道怎么实现这个授权流程。
B:如果您认真看完本节,或自己实操下,您可能有以下问题想问:
1:和网站绑定授权,没看到相关的数据库操作,那获取的token和openid存在哪?
2:如何修改界面,或自定义UI界面?
3:有没有源码?
也许,下面这句话给了您答案:下节,将开放源码下载并尝试为您讲解源码中的组件设计思路,敬请关注。
51cto大赛的参赛页面,感谢路过的朋友也顺手扔一票:http://blog.51cto.com/contest2012/2127378
本文出自 “路过秋天” 博客,请务必保留此出处http://cyq1162.blog.51cto.com/2127378/1051411
本节包括以下内容:
[b]1:第三方社区账号登陆的授权流程[/b]
[b]2:OAuth2 组件的下载及web.config配置
3:OAuth2 组件的5行代码编写流程
4 :总结与下节内容预告
[/b]
一: 第三方社区账号登陆的授权流程
1:首先从这里开始:用户进入登陆界面
![](https://oscdn.geek-share.com/Uploads/Images/Content/201212/588f3e76956ec004aa6af9b6d0d67fe6.jpg)
2:用户点击用新浪微博或QQ登陆,系统跳到第三方授权页面,(QQ示例授权界面)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/97941a75fae89501f73f9314fd894380.jpg)
3:确定授权后,第三方跳转返回你的回调页(在应用里设置),通常仍是系统登陆页面统一处理。授权用户绑定您网站的账号。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/d7d54b05057e08ba886bf33c8f8ce146.jpg)
我们首次引导登陆并绑定账号,当然,官方建议的比较好的用户体验的界面是这样的:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/ef769cf828f3fd85558802484009ded0.png)
4:用户正常登陆或注册新账号,自动实现绑定,至此流程结束,下一次用户点用第三方账号登陆时,系统检测到已绑定账号,直接用绑定的账号进入后台。
二:OAuth2 组件的下载及web.config配置
1:下载OAuth2.dll组件,下载:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201103/de51a1aaef16ec59da257c5da33412ec.gif)
OAuth2.rar(
)
2:引用该dll到您的网站项目中;
3:在web.config配置您的appkey、appsercet及回调网址(通常是登陆页面),相关的数据填写到web.config对应key的value里。
PS:获取或调置回调网址是在新浪和QQ开放者平台操作的,相关网址见上节文章。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/388d0af325a91a8b4a24d83f52bd9d9a.jpg)
接下来,我们要在登陆界面(示如Login.aspx)动点小手术:
三:OAuth2 组件的5行代码编写流程
1: OAuth2.UI.GetHtml() //获取界面显示
代码示例:通常我们可能会在Login.aspx的html里写上这么一行代码来显示: <%=OAuth2.UI.GetHtml()%>
当然我们也经常喜欢在Login.aspx.cs后台代码(通常是Page_Load事件)里输出:div控件ID.InnerHtml=OAuth2.UI.GetHtml();
于是就有了刚才的登陆界面下面那两个第三方授权链接图标:
![](https://oscdn.geek-share.com/Uploads/Images/Content/201212/588f3e76956ec004aa6af9b6d0d67fe6.jpg)
用户点击第三方授权,跳到第三方授权页面,操作完回调还会返回到这个登陆界面,只是多了两个参数code=xxxx&state=xxx(回调页面仍设置登陆页)。
2:OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//获取当前的授权类型,如果成功,则缓存到Session中。
3:ob.Authorize(out account)//检测是否授权成功,并返回绑定的账号。
这两行代码,是写在Page_Load事件中,判断如果是跳转回来的,就分析授权,然后进行分支处理:
以下是示例的分支代码:
OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.Current;//获取当前的授权类型
if (ob != null) //说明用户点击了授权,并返回到登陆界面来
{
string account = string.Empty;
if (ob.Authorize(out account))//检测是否授权成功,并返回绑定的账号(具体是绑定ID还是用户名,你的选择)
{
if (!string.IsNullOrEmpty(account))//已绑定账号,直接用该账号设置登陆。
{
//根据账号,设置登陆、设置cookie,跳转到后台管理界面。
}
else // 未绑定账号,引导提示用户绑定账号。
{
//取用户的第三方头像和昵称,组装界面显示,像秋色园就一行提示文字
}
}
else // 读取授权失败。
{
//提示用户重试,或改用其它社区方法登陆。
}
如果用户已经授权,首次未绑定账号,通常就有了最下方的提示文字,同时“登陆”的文字就改成了“绑定账号":
![](https://oscdn.geek-share.com/Uploads/Images/Content/201910/18/d7d54b05057e08ba886bf33c8f8ce146.jpg)
4:OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//获取存在Session的授权
5:ob.SetBindAccount(userName);//绑定账号
这两行代码,写在BtnLogin和BtnRegister按钮的事件中,当用户登陆,或注册新账号时,我们从Session中获取刚刚的社区授权,然后绑定账号:
//用户登陆,或注册完账号(这时我们可以拿到ID或者username,绑定哪个就看使用哪个方便了,我们添加以下三行代码,
OAuth2.OAuth2Base ob = OAuth2.OAuth2Factory.SessionOAuth;//获取刚刚的授权(授权后存在Session中)
if (ob != null && !string.IsNullOrEmpty(ob.openID))
{
ob.SetBindAccount(userName);//绑定账号username或id都可以
}
到这里,整个应用就完成了,就是这么简单,除配置项,组件提供的关键的代码只有5行,却实现了相关的功能。
四:总结与下节内容预告
A:看完本文,您应该可以获取到以下信息:
1:知道OAuth授权的界面流程
2:知道怎么实现这个授权流程。
B:如果您认真看完本节,或自己实操下,您可能有以下问题想问:
1:和网站绑定授权,没看到相关的数据库操作,那获取的token和openid存在哪?
2:如何修改界面,或自定义UI界面?
3:有没有源码?
也许,下面这句话给了您答案:下节,将开放源码下载并尝试为您讲解源码中的组件设计思路,敬请关注。
51cto大赛的参赛页面,感谢路过的朋友也顺手扔一票:http://blog.51cto.com/contest2012/2127378
本文出自 “路过秋天” 博客,请务必保留此出处http://cyq1162.blog.51cto.com/2127378/1051411
相关文章推荐
- 通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件流程及组件集成方法
- 通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件流程及组件集成方法
- 通用社区登陆组件技术分享(开源)中篇:OAuth 登陆组件流程及组件集成方法
- 通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
- 通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
- 通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
- 通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- 通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- 通用社区登陆组件技术分享(开源)下篇:OAuth 源码下载及原理解说
- 通用社区登陆组件技术分享(开源)上篇:OAuth 授权登陆介绍
- 组件实现【技术分享】发布本人所属 Java 与 C++ 开源项目
- 全面拥抱开源技术,数据实时集成案例分享
- OAuth2 通用组件升级篇(开源,又见开源 - 新增支持淘宝登陆)
- OAuth2 通用组件升级篇(开源,又见开源 - 新增支持淘宝登陆)
- Slickflow.NET 开源工作流引擎基础介绍(二) -- 引擎组件和业务系统的集成
- 集成ShareSDK分享当前屏幕图片的方法