【UWP】手動實現 WebAuthenticationBroker

在 UWP 中，如果要進行 OAuth 授權，那很大概率是會用上 WebAuthenticationBroker 這個類的，例如微博授權這種。

在一般情況下來說，WebAuthenticationBroker 是足夠用的了，但是，如果你是碰上 Github 授權的話，那麼就會碰到這樣的情況：

蹦出一大個警告，讓人看上去相當不爽。歸根的原因是 WebAuthenticationBroker 使用的是 IE 內核，這個我們可以通過 https://www.whatismybrowser.com/ 驗證。

連 Edge 內核都不是，不給力啊，老濕。

那麼有沒有辦法把 WebAuthenticationBroker 換成 Edge 內核呢？簡單的辦法是沒有的了，但我們還有 WebView，WebView 是使用 Edge 內核的，可以通過 WebView 來手動實現我們自己的 WebAuthenticationBroker。

參考 WebAuthenticationBroker 類的 AuthenticateAsync，編寫如下代碼：

public static class MyWebAuthenticationBroker
    {
        public static Task<MyWebAuthenticationResult> AuthenticateAsync(Uri requestUri, Uri callbackUri)
        {
            throw new NotImplementedException();
        }
    }

WebAuthenticationBroker 的 AuthenticateAsync 這個方法有 3 個參數，但第一個參數並不是很常用，所以這裡就只使用後面的兩個參數了。另外因為 WebAuthenticationResult 沒有公共構造函數，所以定義一個 MyWebAuthenticationResult 來代替。

public class MyWebAuthenticationResult
    {
        public string ResponseData { get; internal set; }

        public uint ResponseErrorDetail { get; internal set; }

        public WebAuthenticationStatus ResponseStatus { get; internal set; }
    }

接下來就是如何實現的問題。這裡我們可以使用一個 ContentDialog 套 WebView 的方式。

在項目添加一個內容對話框（這裡我叫 AuthorizationDialog），並編寫如下代碼：

<ContentDialog x:Class="WebAuthenticationBrokerDemo.AuthorizationDialog"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               Title="正在連接到服務"
               CloseButtonText="取消"
               FullSizeDesired="True"
               mc:Ignorable="d">
    <ContentDialog.Resources>
        <ResourceDictionary>
            <x:Double x:Key="ContentDialogMinWidth">800</x:Double>
        </ResourceDictionary>
    </ContentDialog.Resources>
    <Grid>
        <WebView x:Name="WebView"
                 NavigationFailed="WebView_NavigationFailed"
                 NavigationStarting="WebView_NavigationStarting" />
    </Grid>
</ContentDialog>

設置 FullSizeDesired 使高度占滿視窗，資源字典中覆蓋預設的對話框寬度。WebView 則訂閱 Starting 和 Failed 事件。編寫後臺 cs 代碼：

public sealed partial class AuthorizationDialog
    {
        private readonly Uri _callbackUri;

        public AuthorizationDialog(Uri requestUri, Uri callbackUri)
        {
            if (requestUri == null)
            {
                throw new ArgumentNullException(nameof(requestUri));
            }
            if (callbackUri == null)
            {
                throw new ArgumentNullException(nameof(callbackUri));
            }

            _callbackUri = callbackUri;

            InitializeComponent();

            WebView.Source = requestUri;
        }

        public Uri ResponseUri { get; private set; }

        public WebAuthenticationStatus Result { get; private set; } = WebAuthenticationStatus.UserCancel;

        public WebErrorStatus WebErrorStatus { get; private set; }

        private bool CheckUri(Uri uri)
        {
            if (uri.Host == _callbackUri.Host)
            {
                Result = WebAuthenticationStatus.Success;
                ResponseUri = uri;
                return true;
            }

            return false;
        }

        private void WebView_NavigationFailed(object sender, WebViewNavigationFailedEventArgs e)
        {
            if (CheckUri(e.Uri))
            {
                Hide();
                return;
            }

            Result = WebAuthenticationStatus.ErrorHttp;
            ResponseUri = e.Uri;
            WebErrorStatus = e.WebErrorStatus;
            Hide();
        }

        private void WebView_NavigationStarting(WebView sender, WebViewNavigationStartingEventArgs args)
        {
            if (CheckUri(args.Uri))
            {
                Hide();
            }
        }
    }

可以通過 Hide 方法來關閉對話框。需要註意的是 Failed 的時候需要先檢查一次，因為可能 callback 的地址是無法訪問的。

接下來可以補完一開始的 AuthenticateAsync 方法了。

public static class MyWebAuthenticationBroker
    {
        public static async Task<MyWebAuthenticationResult> AuthenticateAsync(Uri requestUri, Uri callbackUri)
        {
            var authorizationDialog = new AuthorizationDialog(requestUri, callbackUri);
            await authorizationDialog.ShowAsync();
            if (authorizationDialog.Result == WebAuthenticationStatus.UserCancel)
            {
                return new MyWebAuthenticationResult
                {
                    ResponseStatus = WebAuthenticationStatus.UserCancel
                };
            }
            else if (authorizationDialog.Result == WebAuthenticationStatus.Success)
            {
                return new MyWebAuthenticationResult
                {
                    ResponseStatus = WebAuthenticationStatus.Success,
                    ResponseData = authorizationDialog.ResponseUri.OriginalString
                };
            }
            else
            {
                return new MyWebAuthenticationResult
                {
                    ResponseStatus = WebAuthenticationStatus.ErrorHttp,
                    ResponseData = authorizationDialog.ResponseUri.OriginalString,
                    ResponseErrorDetail = (uint)authorizationDialog.WebErrorStatus
                };
            }
        }
    }

那麼現在我們再去連 Github 之類的授權就不會有警告了，因為內核已經換成了 Edge。

而且因為是使用 WebView，所以還能再進行一些定製化的操作，例如執行 JavaScript，獲取 Cookie 之類的。