WPF WebView2 自動ログインを作る

2021-01-17

Uncategorized

1.1k words

WebView2 を使うと、C#側から JavaScript を挿入する事が出来るので、開いたページを JavaScript で操作出来ます。

WPF WebView2 を試す

目標

ログインボタンを押したら、IDとパスワードを自動で入力してログインする。

自動ログイン

環境

Windows 10 Home 20H2
Visual Studio Community 2019
.NET Core 3.1
Microsoft.Web.WebView2 1.0.721-prerelease

JavaScript を挿入する

C#側から JavaScript を挿入するには、下記コードを使用します。

1	webView.CoreWebView2.ExecuteScriptAsync($"alert('挿入されたアラートダイアログ！')");

例えば、上記コードをボタン押下時に実行するとこんな感じになります。

あたかも Googleページがアラートを出した感じがしますが、挿入した JavaScript が出したものです。

アラートダイアログの確認

コレを応用して、ボタンを押したら自動ログインする機能を実装します。

ログイン画面の調査

自動ログインを作るっと言っても、まずは調査から始まります。当たり前ですね。

とりあえず今回は pixiv に自動ログイン出来るようにします。pixiv はログインがザルなので簡単なんです。Yahoo とか Google は、2段階認証とかがあってちょっと難しいので今回はパス。

ログインには何が必要なのか？

pixiv にログインするには何が必要なのか？

ログインページを見れば一発で分かりますね。「ID」「パスワード」それと「ログイン」ボタンです。

ログイン画面の確認

調査方法

調査方法は簡単。「ID」「パスワード」「ログイン」が特定出来れば OK なのです。

まず、Chrome で pixivログインページを開いて、ID のところを右クリック「検証」を選択する。

検証を選択

そうすると、Chrome の DevTools が表示されます。

しかも ID のソースの部分が表示されているので、ID のソースの部分を右クリックして「Copy > Copy JS path」を選択します。

Copy > Copy JS path を選択

これで、ID を特定できる JavaScript がクリップボードにコピーされました。

一度、メモ帳に貼り付けて置きます。

多分こんなコードが張り付くんじゃないでしょうか。

1	document.querySelector("#LoginComponent > form > div.input-field-group > div:nth-child(1) > input[type=text]")

同じ要領でパスワードとログインボタンも調べます。最終的に、こんな感じになれば OK です。

1
2
3

document.querySelector("#LoginComponent > form > div.input-field-group > div:nth-child(1) > input[type=text]")
document.querySelector("#LoginComponent > form > div.input-field-group > div:nth-child(2) > input[type=password]")
document.querySelector("#LoginComponent > form > button")

メモ帳修正1

少し整形

このままでもいいんですが、後々のために少し整形して置きます。

“ (ダブルクォート) を ‘ (シングルクォート) に置換

C# のソースに貼り付けた時に “ (ダブルクォート) だと問題があるので、事前に ‘ (シングルクォート) に置換して置きます。

カッコの中にある 6箇所ですね。

1
2
3

document.querySelector('#LoginComponent > form > div.input-field-group > div:nth-child(1) > input[type=text]')
document.querySelector('#LoginComponent > form > div.input-field-group > div:nth-child(2) > input[type=password]')
document.querySelector('#LoginComponent > form > button')

メモ帳修正2

inputタグには value を、buttonタグには click を追加

このままだと、まだ「場所が特定出来た」に過ぎないので、inputタグには value を、buttonタグには click を追加します。

inputタグは文字が入力できるので、value に入力させたい文字を設定して置きます。今回の場合は IDとパスワードです。buttonタグはクリックさせたいので click を追加します。で、行の末尾に ; (セミコロン) を入れます。

こんな感じになれば OK です。

1
2
3

document.querySelector('#LoginComponent > form > div.input-field-group > div:nth-child(1) > input[type=text]').value = '★★★ ID ★★★';
document.querySelector('#LoginComponent > form > div.input-field-group > div:nth-child(2) > input[type=password]').value = '★★★ パスワード ★★★';
document.querySelector('#LoginComponent > form > button').click();

メモ帳修正3

ログイン機能の実装

ここまで出来たら、後は C#側に貼り付けるだけです。

「MainWindow.xaml」にボタンを置いて、

<Window x:Class="wpf_webview2.MainWindow"
        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"
        xmlns:local="clr-namespace:wpf_webview2"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="764">
    <Grid>
        <wv2:WebView2 Name="webView" Source="https://accounts.pixiv.net/login" Margin="0,55,0,0"/>
        <Button Content="ログイン" Width="50" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Click="Button_Click"/>
    </Grid>
</Window>

MainWindow.xaml にボタン追加

コードビハインドに Button_Clickイベントを書きます。

private void Button_Click(object sender, RoutedEventArgs e)
{
  // IDを自動入力する.
  webView.CoreWebView2.ExecuteScriptAsync($"document.querySelector('#LoginComponent > form > div.input-field-group > div:nth-child(1) > input[type=text]').value = '★★★ ID ★★★';");
  // パスワードを自動入力する.
  webView.CoreWebView2.ExecuteScriptAsync($"document.querySelector('#LoginComponent > form > div.input-field-group > div:nth-child(2) > input[type=password]').value = '★★★ パスワード ★★★';");
  // ログインをする.
  webView.CoreWebView2.ExecuteScriptAsync($"document.querySelector('#LoginComponent > form > button').click();");
}

コードビハインドに Button_Clickイベントを追加

F5キーで実行して、左上のログインボタンを押すと自動ログインする事が確認出来ます。

自動ログイン

ソースコード

GitHub

https://github.com/noitaro/wpf-webview2-auto-login

広告

Archives

Tags

広告