Autenticar usando provedores OAuth com Cordova

Com o SDK JS do Firebase, você pode permitir que os usuários do Firebase se autentiquem usando qualquer provedor OAuth compatível em um ambiente Cordova. Você pode integrar qualquer provedor OAuth compatível usando o SDK do Firebase para executar o fluxo de login ou executando o fluxo OAuth manualmente e passando a credencial OAuth resultante para o Firebase.

Configurar o Firebase Authentication para Cordova

  1. Adicione o Firebase ao seu projeto JavaScript . Ao adicionar o snippet do Firebase, observe a variável de configuração authDomain , que deve ser semelhante a my-app.firebaseapp.com . Se um domínio personalizado for usado em vez do domínio firebaseapp.com provisionado pelo Firebase, o domínio personalizado deverá ser usado.

  2. Para configurar um aplicativo Android, adicione-o ao console do Firebase e insira os detalhes do aplicativo. Você não precisa do google-services.json gerado.

  3. Para configurar um aplicativo iOS, crie um aplicativo iOS e adicione-o ao console do Firebase . Você precisará do ID do pacote iOS para adicionar posteriormente ao instalar o plug-in de esquema de URL personalizado.

  4. Ative links dinâmicos do Firebase:

    1. No console do Firebase , abra a seção Dynamic Links .

    2. Se você ainda não aceitou os termos do Dynamic Links e criou um domínio do Dynamic Links, faça-o agora.

      Se você já criou um domínio Dynamic Links, anote-o. Um domínio Dynamic Links normalmente se parece com o exemplo a seguir:

      example.page.link

      Você precisará desse valor ao configurar seu aplicativo Apple ou Android para interceptar o link de entrada.

  5. Ative o login do Google no console do Firebase:

    1. No console do Firebase , abra a seção Auth .
    2. Na guia Método de login , ative o método de login do Google e clique em Salvar .

  6. Instale os plugins necessários em seu projeto Cordova.

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
cordova plugin add cordova-plugin-buildinfo --save
# Plugin to handle Universal Links (Android app link redirects)
cordova plugin add cordova-universal-links-plugin-fix --save
# Plugin to handle opening secure browser views on iOS/Android mobile devices
cordova plugin add cordova-plugin-browsertab --save
# Plugin to handle opening a browser view in older versions of iOS and Android
cordova plugin add cordova-plugin-inappbrowser --save
# Plugin to handle deep linking through Custom Scheme for iOS
# Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
cordova plugin add cordova-plugin-customurlscheme --variable \
    URL_SCHEME=com.firebase.cordova --save

  7. Adicione a seguinte configuração ao arquivo config.xml do Cordova, onde AUTH_DOMAIN é o domínio da etapa (1) e DYNAMIC_LINK_DOMAIN é o domínio da etapa (3c).

    <universal-links>
    <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
    <host name="AUTH_DOMAIN" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    Um exemplo de configuração pode ser semelhante a:

    <universal-links>
    <host name="example.page.link" scheme="https" />
    <host name="example-app.firebaseapp.com" scheme="https">
        <path url="/__/auth/callback"/>
    </host>
</universal-links>

    Se um domínio personalizado auth.custom.domain.com for usado, substitua my-app.firebaseapp.com por ele.

    Para aplicativos Android, singleTask deve ser usado para launchMode .

    <preference name="AndroidLaunchMode" value="singleTask" />

Lidar com o fluxo de login com o SDK do Firebase

  1. O Firebase Auth depende do evento deviceReady para determinar corretamente o ambiente Cordova atual. Certifique-se de que a instância do aplicativo Firebase seja inicializada após o evento ser acionado.

  2. Crie uma instância do objeto provedor do Google:

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth/cordova";

const provider = new GoogleAuthProvider();
    auth_create_google_provider.js

    Web namespaced API

    var provider = new firebase.auth.GoogleAuthProvider();
    cordova.js

  3. Autentique-se com o Firebase usando o objeto de provedor do Google usando signInWithRedirect . Observe que signInWithPopup não é compatível com Cordova.

    Web modular API

    import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
signInWithRedirect(auth, new GoogleAuthProvider())
  .then(() => {
    return getRedirectResult(auth);
  })
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_sign_in_redirect.js

    Web namespaced API

    firebase.auth().signInWithRedirect(provider).then(() => {
  return firebase.auth().getRedirectResult();
}).then((result) => {
  /** @type {firebase.auth.OAuthCredential} */
  var credential = result.credential;

  // This gives you a Google Access Token.
  // You can use it to access the Google API.
  var token = credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
});
    cordova.js

  4. Para lidar com o caso em que a atividade do aplicativo é destruída antes da conclusão da operação de login, chame getRedirectResult quando o aplicativo for carregado.

    Web modular API

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GoogleAuthProvider.credentialFromResult(result);
    if (credential) {        
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      const token = credential.accessToken;
      // The signed-in user info.
      const user = result.user;
      // ...
    }
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
  });
    auth_cordova_redirect_result.js

    Web namespaced API

    firebase.auth().getRedirectResult().then((result) => {
  if (result.credential) {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a Google Access Token.
    // You can use it to access the Google API.
    var token = credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    // ...
  }
}).catch((error) => {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
});
    cordova.js

    O mesmo mecanismo pode ser usado para vincular um novo provedor via linkWithRedirect ou para reautenticar com um provedor existente usando reauthenticateWithRedirect .