web-dev-qa-db-ja.com

Android、Appleサインイン

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ビューを検査すると、認証データがWebビュー内の別のURLに投稿（POSTリクエスト）されていることがわかります。ただし、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)と言うエラーがあります。

だから、私はいくつか質問があります：

  1. このエラーを修正する方法は？
  2. イベントリスナーが呼び出されないのはなぜですか？
  3. WebビューからPOST応答を直接インターセプトして解析できる方法はありますか？
javascriptandroidhtmlwebviewapple-sign-in
8
a fair player

問題は、ページの読み込みがまだ完了していないことである可能性があります。変更してみてください

document.getElementById("appleid-signin").click();

に

window.addEventListener('load', function() {
    document.getElementById("appleid-signin").click();
});

Chromeを使用してリモートデバッグを設定できます。これにより、Chrome Dev Toolsを使用して、デバイスを接続した状態でWebviewをデバッグできます。ドキュメントはこちら： https://developers.google.com/web/tools/chrome-devtools/remote-debugging

0
Jake