WPF WebView2 自動ログインを作る

Copy > Copy JS path を選択アプリ開発

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

関連記事

目標

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

自動ログイン

環境

Javascript を挿入する

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

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 がクリップボードにコピーされました。

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

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

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

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

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箇所 ですね。

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 です。

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

noitaro/wpf-webview2-auto-login
Contribute to noitaro/wpf-webview2-auto-login development by creating an account on GitHub.

タイトルとURLをコピーしました