如何将 Firebase 身份验证令牌传递到 webView 并在 Android 上注册通知

Question

我有一个Firebase WebApp，它向用户提供信息。除了应用程序，我还需要通过Firebase Cloud Messaging向使用Android应用程序的用户发送推送通知。

目标：用户应该有一次登录应用程序，该应用程序既注册通知，又通过 WebView 加载 WebApp。

问题：我找不到一种只需一次登录就能实现这一点的方法。在任何情况下，我都需要登录一次本地应用程序，然后通过webView再次登录。

首先，为其他可能正在解决问题的人提供一些参考:

火力基础身份验证用户界面：https://firebase.google.com/docs/auth/android/firebaseui

火力基地数据库：https://firebase.google.com/docs/database/android/read-and-write

Firebase云消息:https://firebase . Google . com/docs/Cloud-Messaging/Android/topic-Messaging

背景：我能够使用Firebase身份验证UI分别处理每个身份验证，以本地方式处理通知身份验证，然后通过Firebase服务器处理webView身份验证。这有效，但用户体验不佳。由于本机身份验证已经提供了令牌，因此我应该能够以某种方式跳过第二阶段并直接登录用户。以下是我尝试过的方法：

第一种方法:

本机登录，然后是webapp登录（正常工作，但需要两次登录）：通过遵循Firebase身份验证UI教程，我可以完成成功登录：

FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();

'user'不为空，可用于从Firebase数据库中读取数据。然后使用主题ID订阅每个FCM留档的主题。

订阅通知后，我们使用以下行建立与webapp的连接：

myWebView.loadUrl("https://someproject.appspot.com/index.html");

第二种方法：

使用 myWebView.loadUrl（） 传递用户令牌（授权被拒绝）...基于此信息：https://firebase.google.com/docs/cloud-messaging/auth-server

我想大概是这样的:

...

FirebaseUser user = FirebaseAuth.getInstance().getCurrentUser();

  if (user != null) {

  //get the user id token

  user.getIdToken(true).addOnCompleteListener(new 
  OnCompleteListener<GetTokenResult>() {

    public void onComplete(@NonNull Task<GetTokenResult> task) {

      if (task.isSuccessful()) {

        //here is the idToken

        String idToken = task.getResult().getToken();

  }}}}

HashMap<String, String> map = new HashMap<String, String>();

String bearer = "Bearer " + idToken;

//Create header of the form "Authorization: Bearer <token>"

map.put("Authorization",bearer);

myWebView.loadUrl("https://someproject.appspot.com/index.html", map);

...

*这似乎是最有可能的工作方式，也许我需要添加一些服务器端代码来显式处理请求，而不是依赖onStateChanged处理程序？也尝试过使用。auth= and？access _ token = based:https://firebase . Google . com/docs/database/rest/auth # authenticate _ with _ an _ id _ token这里有点瞎猜....

第三种方法：

打开webApp并在授权完成时触发onAuthStateChanged。（处理程序似乎从未触发。我怀疑没有Firebase Auth对象受到webView的影响）

...
//Register a FirebaseAuth Listener

FirebaseAuth.AuthStateListener mAuthListener = new FirebaseAuth.AuthStateListener() {

  @Override

  public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {

    FirebaseUser user = firebaseAuth.getCurrentUser();

    if (user != null) {

      //Register notification subscriptions per tutorial

    }
...

myWebView.loadURL（"https://someproject.appspot.com/index.html"）；

这里似乎有一个最佳实践，在 firebase 教程中没有很好地记录。对于在Android上使用Firebase的人来说，这似乎也是一个典型的任务。有人可以提供一种在一次登录中注册通知主题并访问 webApp 的方法吗？我错过了什么？

预期结果是具有单个登录，之后用户可以访问 Web 应用程序并注册单个推送通知。

Answer 1

一种方法是使用Android Google Auth SDK在应用程序中本地登录，然后将Google令牌传递给Webview，以便Firebase可以通过< code > Auth . signinwithcredential()使用它。

它可能适用于其他提供商，但这是我在Android上使用Google身份验证的方式：

Android系统：

val gso =
    GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
      .requestIdToken(clientId)
      .requestEmail()
      .build()
val googleSignInClient = GoogleSignIn.getClient(activity, gso)

activity.startActivityForResult(
        googleSignInClient.signInIntent,
        object : ActivityWithResultListener.OnActivityResultListener {
          override fun onActivityResult(resultCode: Int, data: Intent?) {
            if (data != null) {
              val credential = GoogleAuthProvider.getCredential(account.idToken!!, null)
              idToken = account.idToken!!

              // Then pass the token to your webview via a JS interface
            }
          }
       }
)

网页:

const idTokenFromApp = AndroidBridge.getAuthToken(); // This is the idToken from the Android code above
if (idTokenFromApp) {
    // from https://firebase.google.com/docs/auth/web/google-signin
    // Build Firebase credential with the Google ID token.
    // https://firebase.google.com/docs/reference/js/v8/firebase.auth.GoogleAuthProvider#static-credential
    const credential = firebase.auth.GoogleAuthProvider.credential(idTokenFromApp);

    // Sign in with credential from the Google user.
    firebase.auth.signInWithCredential(credential).catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;

      logError(`Error logging in: ${errorCode} ${errorMessage} token: ${idTokenFromApp}`, error);
    });
}

Answer 2

以下是使用React Native中的WebView进行Firebase Auth的解决方案：

import React from 'react'
import WebView from 'react-native-webview'

export default function HomeScreen(props) {
  // props.user represents firebase user
  const apiKey = props.user.toJSON().apiKey
  const authJS = `
        if (!("indexedDB" in window)) {
          alert("This browser doesn't support IndexedDB")
        } else {
          let indexdb = window.indexedDB.open('firebaseLocalStorageDb', 1)
          indexdb.onsuccess = function() {
            let db = indexdb.result
            let transaction = db.transaction('firebaseLocalStorage', 'readwrite')
            let storage = transaction.objectStore('firebaseLocalStorage')
            const request = storage.put({
              fbase_key: "firebase:authUser:${apiKey}:[DEFAULT]",
              value: ${JSON.stringify(props.user.toJSON())}
            });
          }
        }  
      `
  return <WebView
    injectedJavaScriptBeforeContentLoaded={authJS}
    source={{
      uri: 'http://192.168.1.102:3000',
      baseUrl: 'http://192.168.1.102:3000',
    }}
  />
}