Problem: I can't get the webview form to submit so the app code can log into a public website.
Context: I can get the username/email and password injected into respective form fields but am unable to 'click the button' or 'submit the form' via the app code. As you can see I've tried every permutation of click and submit by element ID and class name. I'm a n00b at coding. There are similar posts but are dated several years old and based on what I can tell the technique required to tap the login button/submit the form has changed.
Button ID and/or form names I've tried:
login
loginForm
tab-login
userForm ebform
Public website url: https://www.rakuten.com/signUp.do?login=yes
My Code:
import UIKit
import WebKit
class ViewController: UIViewController {
@IBOutlet weak var emailTF: UITextField!
@IBOutlet weak var passwordTF: UITextField!
let webView = WKWebView()
var counter = 0
override func viewDidLoad() {
super.viewDidLoad()
let url = URL(string: "https://www.rakuten.com/signUp.do?login=yes")!
let request = URLRequest(url: url)
webView.frame = CGRect(x: 0, y: 300, width: 350, height: 550)
webView.load(request)
view.addSubview(webView)
}
@IBAction func onSignInTapped() {
switch counter {
case 0:
webView.evaluateJavaScript("document.getElementById('username').value='(emailTF.text!)'", completionHandler: nil)
webView.evaluateJavaScript("document.getElementById('password').value='(passwordTF.text!)'", completionHandler: nil)
case 1:
webView.evaluateJavaScript("document.getElementClassName('loginForm')[0].click();", completionHandler: nil)
webView.evaluateJavaScript("document.getElementClassName('loginForm')[0].submit();", completionHandler: nil)
webView.evaluateJavaScript("document.getElementById('loginForm').submit();", completionHandler: nil)
webView.evaluateJavaScript("document.getElementById('loginForm').click();", completionHandler: nil)
default:
webView.evaluateJavaScript("document.getElementById('sign-in').submit();", completionHandler: nil)
}
counter += 1
}
}
(this is code from Kiloloco's youtube tutorial that I slightly modified - for appropriate credit)
I printed the HTML for the public website into the console and this is the result of the relevant code:
<div class="row login-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab-login" id="login" data-toggle="tab" data-event-signature="ec,ea,el" data-ec="Signup Form" data-ea="Member Sign In - Click" data-el="tracking-error">SIGN IN</a></li>
<li class=""><a href="#tab-signup" id="signup" data-toggle="tab" data-event-signature="ec,ea,el" data-ec="Signup Form" data-ea="Join Now Tab - Click" data-el="tracking-error">JOIN NOW</a></li>
</ul>
</div>
<!-- social media signup -->
<div class="login-tab-contents blk-reg">
<div class="tab-content pad-15-lr">
<div class="tab-pane active rowpad-lg" id="tab-login">
<form name="userForm" id="loginForm" class="userForm ebform" focus="email_address" target="_top" method="post">
<input type="hidden" name="skip_verify_password" value="false">
<input type="hidden" name="terms" value="on">
<input type="hidden" name="urlIdentifier" value="/signUp.do?login=yes|MobileV2">
<input type="hidden" name="type" value="general - mobile">
<input type="hidden" name="isAjax" value="true">
<input type="hidden" name="action" value="create">
<input type="hidden" name="split_entry_id" value="871">
<input type="hidden" class="eb-sec-token" id="_csrf" name="_csrf" value="t4Y74TkNFpmgisGujVuYkrXk0PPuoW8ISWmo4K8KrCnzBLgPV99eNi5JEAyhLw9MjN-mqMHX22pMao8KVsO11vpbHCeiFLJJTOhhcbwQ7opBCC_2vDQBGkZHcyEH6rE9Ow3NzfpBn6ceg7RwTa6oeQbvn2I">
<div class="row pad-20-t">
<div class="col-xs-12 pad-0-lr vald_msg">
<span class="fa-envelope fa-textfield f-18 f-gry-c mar-10-r pad-10-l pad-10-r pad-10-tb"></span>
<input type="email" name="username" id="username" class="required input-first auto-correct mar-10-b" title="Enter your Email Address" maxlength="255" tabindex="1" placeholder="Email" data-role="none" value="">
<div class="relative sipwd">
<span class="fa-lock fa-textfield f-18 f-gry-c pad-10-l pad-20-r pad-10-tb"></span>
<input type="password" name="password" id="password" class="required input-last" value="" maxlength="128" tabindex="2" placeholder="Password">
<div class="show-hide fa absolute hideshow f-12 prox-r font-dark-9 modalSpan" style="display: none;">Show</div></div>
</div>
</div> </form>
<div class="row mar-10-t">
<div class="col-xs-12 pad-0-lr">
<button name="su-button" id="login" class="button primary stretch loginSignup login-btn" title="Start Shopping" tabindex="3" data-event-signature="ec,ea" data-ec="MW Sign Up Page" data-ea="Sign In - Click">Sign In</button>
</div>
</div>
<div class="row">
<div class="col-xs-12 resetpassword_link f-grn semibold forgot-pwd-modal-link f-16">Forgot Password?</div>
</div>
Note: I know this is likely a very poor way of implementing a login and of course if the prototype that uses this login works out, I'd need to work to get access to an API by the public site. However for starters this is what I'm trying to see if the prototype even makes sense.