Accedi a Google con Firebase per l'estensione Chrome in React

Question

Utilizzo di Firebase per Google Accedi con l'estensione Chrome creata con React. Ho configurato oauth utilizzando GoogleConsolee sono riuscito a eseguire correttamente l'accesso con l'estensione Chrome utilizzando

chrome.identity.getAuthToken({ interactive: true }, function (token) {
if (chrome.runtime.lastError) {
    console.log('It was not possible to get a token programmatically.');
} else if (chrome.runtime.lastError) {
    console.error(chrome.runtime.lastError);
} else if (token) {
    // Authorize Firebase with the OAuth Access Token.
    var credential = firebase.auth.GoogleAuthProvider.credential(null, token);
    firebase.auth().signInWithCredential(credential).catch(function (error) {
        // The OAuth token might have been invalidated. Lets' remove it from cache.
        if (error.code === 'auth/invalid-credential') {
            chrome.identity.removeCachedAuthToken({ token: token }, function () {
                signInWithGoogle();
            });
        }
    });
} else {
    console.error('The OAuth Token was null');
}
});

Ora, vorrei strutturare il mio codice usando react, redux, webext-redux ...

Nella configurazione di Firebase, hanno incluso apiKey, databaseUrl , storageBucket and authDomain as chrome-extension://key_name.

Lo stesso dominio di autenticazione è definito in Firebase -> Auth -> SignIn -> Auth Domains in Firebase. L'estensione genera un errore Uncaught Error: Illegal url for new iframe - https://chrome-extension/:auth/iframe?apiKey=secretKeysquando si tenta di accedere a Google.

Fammi sapere se sono necessarie ulteriori informazioni.

Answer 1

Spostato il chrome.identitycodice da popup.jsa background.jsper mantenere il Single Signin per l'utente attraverso il browser.

Popup.js-> background.js-> execute singin with google.

Usato webext-redux, redux, redux-thunk, firebaseper l'attuazione del Google SignIn with React.