a f*_*yer 8 html javascript android webview apple-sign-in
我正在尝试将 Apple 登录功能添加到我的 Android 应用程序中。我遵循弹出式方法。我无法让它工作。
class AppleLoginWebViewActivity : BaseActivity(), AppleLoginContract.View {
private val TAG = AppleLoginWebViewActivity::class.java.simpleName
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_apple_login)
prepareWebView()
}
private fun prepareWebView() {
if (BuildConfig.DEBUG) {
WebView.setWebContentsDebuggingEnabled(true)
}
webView.addJavascriptInterface(
AppleLoginJavaScriptInterface(),
"AndroidInterface"
)
val webSettings: WebSettings = webView.settings
webSettings.javaScriptEnabled = true
webView.webViewClient = MyWebViewClient()
webView.webChromeClient = MyWebChromeClient()
webView.settings.loadWithOverviewMode = true
webView.settings.domStorageEnabled = true
webView.settings.useWideViewPort = true
}
private inner class MyWebViewClient : WebViewClient() {
override fun onPageFinished(
view: WebView,
url: String
) { //Calling a javascript function in html page
Logger.info(TAG, "page started: $url")
// view.loadUrl("javascript:alert(clickAppleSignInButton())")
view.loadUrl("javascript:AndroidInterface.showHTML" +
"('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>');");
}
override fun shouldOverrideUrlLoading(
view: WebView?,
request: WebResourceRequest?
): Boolean {
return false
}
}
private class MyWebChromeClient : WebChromeClient() {
override fun onJsAlert(
view: WebView,
url: String,
message: String,
result: JsResult
): Boolean {
result.confirm()
return true
}
}
override fun loadUrl(appleLoginLocalUrl: String) {
webView.loadUrl(appleLoginLocalUrl)
}
}
这是我加载的 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Sign in</title>
</head>
<body>
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
<script type="text/javascript">
const options = {
clientId: 'MY_CLIENT_ID',
scope: 'email name',
redirectURI: 'MY_REDIRECT_URL',
state: '',
usePopup : true
};
AppleID.auth.init(options);
</script>
<script type="text/javascript">
function clickAppleSignInButton() {
document.getElementById("appleid-signin").click();
}
</script>
<script type="text/javascript">
//Listen for authorization success
document.addEventListener('AppleIDSignInOnSuccess', successFunction);
//Listen for authorization failures
document.addEventListener('AppleIDSignInOnFailure', failureFunction);
function successFunction(data) {
//handle successful response
console.log("success")
AndroidInterface.onLoginSuccess(data);
}
function failureFunction(error) {
//handle error
console.log("failure")
AndroidInterface.onLoginFailed(error);
}
</script>
</body>
</html>
所以，在最后一步，当我检查 web 视图时，我可以看到身份验证数据被发布（POST 请求）到 web 视图内的另一个 url。但是AppleIDSignInOnSuccess永远不会调用事件侦听器。有一个错误说"Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('MY_REDIRECT_URL') does not match the recipient window's origin ('https://appleid.apple.com').", source: (0)。
所以，我有几个问题：
小智 0
问题可能是页面尚未完成加载。尝试改变
document.getElementById("appleid-signin").click();
到
window.addEventListener('load', function() {
document.getElementById("appleid-signin").click();
});
您可以使用 Chrome 设置远程调试，这将允许您使用 Chrome 开发工具在连接的设备上调试您的 webview。此处的文档：https ://developers.google.com/web/tools/chrome-devtools/remote-debugging