如何使用新浪微博帐户进行应用登陆验证（基于Windows Azure Mobile Service 集成登陆验证）

时间  2019-11-12
标签 如何 使用 新浪 微博 帐户 进行 应用 登陆 验证 基于 windows azure mobile service 集成 栏目 Windows 繁體版
原文   原文链接

使用三方帐号登陆应用应该对你们来讲已经不是什么新鲜事儿了，可是今天为何还要在这里跟你们聊这个话题呢，缘由很简单 Windows Azure Mobiles Service Authentication 身份验证能够方便的帮你在应用中集成此功能。数据库

此前我曾介绍过 Mobile Service的推送功能，其优点是能够方便的向不一样的平台设备推送消息通知（Windows、IOS、Android），而且不用担忧服务器过载问题。然而基于Windows Azure Mobile Service的身份验证依然保留了这个优点， 能够方便开发者的在不一样平台的客户端上配置三方登陆，通过新浪的同窗们的努力今天咱们终于与实现了与Windows Azure Mobile Service集成，成为第一个中国本土支持Mobile Service三方登陆身份验证的提供商。windows

今天我在这里介绍一下如何使用Mobile Service的登陆验证。首先既然咱们使用新浪微博做为应用的三方登陆入口咱们要先在新浪微博注册咱们的应用。浏览器

打开微博开放平台网站 http://open.weibo.com/， 登陆你的微博帐号，或注册微博开放平台帐号。随后点击“微连接”- “建立应用” - “移动应用”服务器

微连接app

image_thumb21

建立应用async

image_thumb4

移动应用ide

image_thumb6

具体申请上线等步骤请详见：移动客户端接入接入指南函数

还有新手指南： 新手指南测试

注册完成应用后咱们会获得应用的 App Key 和 App Secret 这两个字符串很是重要在配置 Mobile Service 的时候须要用到识别应用。网站

image_thumb8

随后咱们登陆 Windows Azure 建一个新的 Mobile Service http://manage.windowsazure.com/

image_thumb13

image_thumb14

这里的Backed咱们须要选择.Net 咱们能够选择新建数据库或加载到已有数据库中去。

image_thumb19

随后咱们能够看到新建好的 Mobile Service，并展开一个建立新的 Windows 或 Windows Phone App标签，下载实例代码 我这里以全新项目搭建流程为你们展现。固然若是你是非 Windows 平台开发者也不要担忧咱们也一样提供了其余平台的客户端代码模板。

image_thumb23

请 IOS 开发者下载

image_thumb25

请 Android 开发者下载

image_thumb28

接下来咱们引用在项目中引用 Windows Azure Mobile Service SDK 的方法有两种。（你们能够根据项目须要选择）

1. 新浪微博 Windows Azure Mobile Service SDK 连接：http://open.weibo.com/wiki/SDK 下载源码在项目中引用（好处是能够调试）。

2. 在VS中经过 Nuget 直接下载 DLL 使用。（这个使用方法简便，可是没法调试修改与Sina接口部分代码）

首先介绍下载SDK源码是的使用方法

image_thumb2

下载实例代码而后打开项目

image

将 microsoft.owin.security.sinaweibo 项目备份出来以便咱们的项目使用，另外这个SLN自己就是一个Demo，感兴趣的同窗能够多多研究。

image_thumb34

随后打开咱们之从Windows Azure网站上下载的实例代码（主要是Mobile Service 网站项目）将 microsoft.owin.security.sinaweibo 引用进去。

image_thumb36

添加项目成功

image_thumb38

展开 Mobile Service 项目添加引用

image_thumb40

引用SinaWeibo项目 随后编译，注：这时候有可能VS会自动下载要用DLL要多等一会

image_thumb42

另外一种方法是使用 NuGet 下载DLL。

在 Mobile Service 项目中右键点击选择 Manage NeGet Packages 选项

image

随后搜索SDK的关键字 Sina 或者 SinaAzureMobileService 能够直接安装DLL。

image

最后检查 microsoft.owin.security.sinaweibo 已经引用到项目中来并编译项目。

image

随后在 Mobile Service 站点项目中选择Web.Config 文件配置咱们的 App Key 和 App Secret 以下：

    <!-- SinaWeibo App ClientID/ClientSecret-->
    <add key="SinaWeiBoClientId" value="ClientID"/>
    <add key="SinaWeiBoClientSecret" value="ClientSecret"/>

接着咱们要在服务器端添加两个Class SinaWeiboLoginAuthenticationProvider 和  SinaWeiboLoginProvider 代码以下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Owin;
using Microsoft.Owin.Security.SinaWeibo;
using Microsoft.Owin.Security.SinaWeibo.Provider;
using System.Threading.Tasks;
using System.Security.Claims;
using Microsoft.WindowsAzure.Mobile.Service.Security;

namespace WangBoAuthenticationSinaLoginService
{
    public class SinaWeiboLoginAuthenticationProvider : SinaWeiboAccountAuthenticationProvider //SinaWeiBoAuthenticationProvider
    {
        public override Task Authenticated(SinaWeiboAccountAuthenticatedContext context)
        {

            context.Identity.AddClaim(
                new Claim(ServiceClaimTypes.ProviderAccessToken, context.AccessToken));

            return base.Authenticated(context);
        }
    }
}

SinaWeiboLoginProvider 代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Owin;
using Microsoft.Owin.Security.SinaWeibo;
using Microsoft.Owin.Security.SinaWeibo.Provider;
using System.Threading.Tasks;
using System.Security.Claims;
using Microsoft.WindowsAzure.Mobile.Service.Security;

namespace WangBoAuthenticationSinaLoginService
{
    public class SinaWeiboLoginProvider : LoginProvider
    {
        internal const string ProviderName = "SinaWeibo";

        public SinaWeiboLoginProvider(IServiceTokenHandler tokenHandler)
            : base(tokenHandler)
        {

        }

        public override void ConfigureMiddleware(IAppBuilder appBuilder,
            Microsoft.WindowsAzure.Mobile.Service.ServiceSettingsDictionary settings)
        {
            SinaWeiboAccountAuthenticationOptions options = new SinaWeiboAccountAuthenticationOptions
            {
                AppId = settings["SinaWeiBoClientId"],
                AppSecret = settings["SinaWeiBoClientSecret"],
                AuthenticationType = this.Name,
                Provider = new SinaWeiboAccountAuthenticationProvider()
            };
            appBuilder.UseSinaWeiboAuthentication(options);
        }

        public override ProviderCredentials CreateCredentials(ClaimsIdentity claimsIdentity)
        {
            Claim name = claimsIdentity.FindFirst(ClaimTypes.NameIdentifier);
            Claim providerAccessToken = claimsIdentity
                .FindFirst(ServiceClaimTypes.ProviderAccessToken);

            SinaWeiboCredentials credentials = new SinaWeiboCredentials
            {
                UserId = this.TokenHandler.CreateUserId(this.Name, name != null ? name.Value : null),
                AccessToken = providerAccessToken != null ? providerAccessToken.Value : null
            };

            return credentials;
        }

        public override string Name
        {
            get { return ProviderName; }
        }

        public override ProviderCredentials ParseCredentials(Newtonsoft.Json.Linq.JObject serialized)
        {
            return serialized.ToObject<SinaWeiboCredentials>();
        }


        public class SinaWeiboCredentials : ProviderCredentials
        {
            public SinaWeiboCredentials()
                : base(SinaWeiboLoginProvider.ProviderName)
            {
            }

            public string AccessToken { get; set; }
        }

    }
}

还有一个重要的步骤是在WebApiConfig的注册方法中注册新浪登录的API

public static class WebApiConfig
    {
        public static void Register()
        {
            // Use this class to set configuration options for your mobile service
            ConfigOptions options = new ConfigOptions();

            options.LoginProviders.Add(typeof(SinaWeiboLoginProvider));

            // Use this class to set WebAPI configuration options
            HttpConfiguration config = ServiceConfig.Initialize(new ConfigBuilder(options));

            // To display errors in the browser during development, uncomment the following
            // line. Comment it out again when you deploy your service for production use.
            // config.IncludeErrorDetailPolicy = IncludeErrorDetailPolicy.Always;
            
            Database.SetInitializer(new WangBoAuthenticationSinaLoginInitializer());
        }
    }

下一步是部署咱们的 Mobile Service 代码，右键点击项目选址发布

image_thumb2[1]
选址咱们刚刚新建的 MobileService 发布项目

image_thumb41

发布成功后浏览器会自动跳转到 Destination URL 随后点击Try out 输入密码就能够跳转到API的页面说明咱们的 Mobile Service 是健康的。

image_thumb7

image_thumb91

接着咱们能够经过URL在IE中来测试访问注册是否成功 例如：

 https://wangboauthenticationsinalogin.azure-mobile.net/login/sinaweibo【其中wangboauthenticationsinalogin.azure-mobile.net是个人服务名称，这里须要替换成你本身的】

image_thumb15

随后咱们要回到新浪开放平台设置咱们的会掉受权页面。这里须要注意的是回调受权页须要采用 https:// 协议例如：

https://wangboauthenticationsinalogin.azure-mobile.net/signin-sinaWeibo 【其中wangboauthenticationsinalogin.azure-mobile.net是个人服务名称，这里须要替换成你本身的】

image_thumb16

接着咱们开始设置客户端代码

首先打开Share Project中的 App.xaml.cs 注释掉本地调试代码使用远程服务器地址

        // This MobileServiceClient has been configured to communicate with your local
        // test project for debugging purposes.
        //public static MobileServiceClient MobileService = new MobileServiceClient(
        //    "http://localhost:58974"
        //);

        // This MobileServiceClient has been configured to communicate with your Mobile Service's url
        // and application key. You're all set to start working with your Mobile Service!
        public static MobileServiceClient MobileService = new MobileServiceClient(
            "https://wangboauthenticationsinalogin.azure-mobile.net/",
            "密码写在这里"
        );

随后打开 MainPage 添加一个验证函数 AuthenticateAsync

        private async Task AuthenticateAsync()
        {

            Microsoft.WindowsAzure.MobileServices.MobileServiceUser user = null;

            string message;

            try
            {
                user = await App.MobileService.LoginAsync("sinaweibo");

                message = string.Format("You are now logged in - {0}", user.UserId + user.MobileServiceAuthenticationToken);
            }

            catch (InvalidOperationException ex)
            {
                string exm = ex.Message;
                message = "You must log in. Login Required";
            }

            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
           {
               var dialog = new MessageDialog(message);

               dialog.Commands.Add(new UICommand("OK"));

               dialog.ShowAsync();
           });
        }

而后咱们须要在客户端UI上添加一个登录按钮，打开 Windows8.1 项目找到 MainPage.xaml 添加注册按钮（就在刷新按钮下面直接添加登录了）

<Button Margin="72,0,0,0" Name="ButtonRefresh" Click="ButtonRefresh_Click">Refresh</Button>
<Button Margin="72,0,0,0" x:Name="ButtonLogin" Click="ButtonLogin_Click" Content="Login"/>

在 share project 中的 MainPage.xaml.cs 代码文件中添加事件处理函数

private async void ButtonLogin_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            await AuthenticateAsync();
        }

最后因为在 WindowsPhone 上进行验证时应用会自动切换到后台因此咱们须要处理一下OnActivated事件

protected override void OnActivated(IActivatedEventArgs args)
        {
            base.OnActivated(args);

#if WINDOWS_PHONE_APP
            if (args.Kind == ActivationKind.WebAuthenticationBrokerContinuation)
            {
                App.MobileService.LoginComplete(args as WebAuthenticationBrokerContinuationEventArgs);
            }
#endif
        }

完成后直接F5运行调试程序，下面我展现一下运行效果。

Windows 8.1 版认证过程

image_thumb81

登陆成功拿到Token

image_thumb9

 

WindowsPhone 8.1版认证过程

image_thumb10

登陆成功拿到Token

image_thumb11

但愿上的总结能够帮助到你们, 同时欢迎你们在这里和我沟通交流或者在新浪微博上 @王博_Nick

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程