将Java中的字符串传递给Ionic项目中的Vue.js

2jcobegt  于 5个月前  发布在  Ionic
关注(0)|答案(1)|浏览(66)

我正在使用Ionic & Vue构建一个android应用程序。我使用inaturalist来验证用户。一旦用户通过inaturalist验证,它就会触发一个回调url,并在其中发送一个代码。我正在拦截回调代码,并能够在对话框中显示它,但我不知道如何将其传递给我的vue组件。

//MainActivity.java
<activity
    android:name=".CallbackActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data
            android:scheme="myapp"
            android:host="callback" />
    </intent-filter>
</activity>

//CallbackActivity.java
public class CallbackActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = getIntent();
        Uri data = intent.getData();

        if (data != null && "myapp".equals(data.getScheme()) && "callback".equals(data.getHost())) {
            String codeParam = data.getQueryParameter("code");
            if (codeParam != null) {
                displayReceivedCode(codeParam);
            } else {
                finish();
            }
        }
    }

    private void displayReceivedCode(String codeParam) {
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setTitle("Received Code");
        builder.setMessage("The code received is: " + codeParam);
        builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
            public void onClick(DialogInterface dialog, int which) {
                dialog.dismiss();
                openVueApp(codeParam);
            }
        });

        AlertDialog alertDialog = builder.create();
        alertDialog.show();
    }

    private void openVueApp(String codeParam) {
        Intent intent = new Intent(this, MainActivity.class); 
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        intent.putExtra("codeParam", codeParam);
        startActivity(intent);
        finish(); 
    }
}

//Login.vue
async login({commit}:any) {
            const clientId = 'xxxxxxxxxxxxxxxxxx';
            
            let authorizationUrl = 'https://www.inaturalist.org/oauth/authorize';
            const responseType = 'code';
            const codeChallengeMethod = 'S256';
        
            commit('SET_LOADING', "Logging in...")
            const codeVerifier = generateCodeVerifier();
            const codeChallenge = await generateCodeChallenge(codeVerifier);
        
            commit('SET_CODE_VERIFIER', codeVerifier)
            
            authorizationUrl += `?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=${responseType}&code_challenge=${codeChallenge}&code_challenge_method=${codeChallengeMethod}`;
            const data = await Browser.open({ url: authorizationUrl });
            console.log(data)
        }

字符串
我很确定我必须从java中调度一个事件,并在我的组件中监听它,但我不知 prop 体如何操作。

jjjwad0x

jjjwad0x1#

经过大量的试验和错误,我发现了一个解决方案,使用webView工作。我在这里包括它的情况下,其他人有同样的问题。
在java方面,我在CallbackActivity.java中添加了以下函数

//CallbackActivity.java
private void sendCodeToJS(String codeParam) {
    WebView webView = this.getBridge().getWebView();

    webView.post(new Runnable() {
        @Override
        public void run() {
            webView.evaluateJavascript("var event = new Event('customCodeEvent'); event.code = '" + codeParam + "'; window.dispatchEvent(event);", null);
        }
    });

}

字符串
在JavaScript端,我添加了一个事件侦听器来侦听customCodeEvent

// VueComponent.vue
window.addEventListener('customCodeEvent', event => {
    const code = event.code;

    if (code) {
        store.dispatch('auth/exchangeCodeForAccessToken', code);
    }
});

相关问题