如何使用新浪微博帳戶進行應用登陸驗證（基於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教程