Autenticar usando provedores OAuth com o Cordova

Com o SDK do Firebase para JavaScript, você permite que os seus usuários do Firebase façam a autenticação com qualquer provedor OAuth compatível em um ambiente Cordova. Você pode integrar qualquer provedor OAuth compatível ao usar o SDK do Firebase para executar o fluxo de login ou ao executar o fluxo do OAuth manualmente e enviar a credencial OAuth resultante para o Firebase.

Configurar o Firebase Authentication para Cordova

  1. Adicione o Firebase ao seu projeto em 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 no lugar do domínio firebaseapp.com provisionado pelo Firebase, o personalizado deverá ser usado.

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

  3. Para configurar um aplicativo iOS, crie um app iOS e adicione-o ao Console do Firebase. Você precisará do ID do pacote do iOS, que será adicionado durante a instalação do plug-in do esquema de URL personalizado.

  4. Ative o Firebase Dynamic Links:

    1. No Console do Firebase, abra a seção Dynamic Links.
    2. Caso ainda não tenha aceitado os termos do Dynamic Links e criado um domínio do Dynamic Links, faça isso agora.

      Anote o domínio do Dynamic Links se você já tiver criado um. Um domínio do Dynamic Links geralmente se parece com este exemplo:

      example.page.link

      Você vai precisar desse valor ao configurar o app Android ou Apple para interceptar o link recebido.

  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 Login do Google e clique em Salvar.
  6. Instale os plug-ins necessários no seu projeto do 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 seu arquivo config.xml do Cordova, em que 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 ter a seguinte aparência:

    <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 o aplicativo Android, singleTask deve ser usado para launchMode.

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

Processar o fluxo de login com o SDK do Firebase

  1. O Firebase Auth depende do evento deviceReady para determinar corretamente o ambiente atual do Cordova. Verifique se a instância do app do Firebase será inicializada depois que o evento for acionado.

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

    API modular da Web

    import { GoogleAuthProvider } from "firebase/auth/cordova";
    
    const provider = new GoogleAuthProvider();

    API com namespace da Web

    var provider = new firebase.auth.GoogleAuthProvider();
  3. Autentique com o Firebase usando o objeto do provedor do Google usando signInWithRedirect. Observe que signInWithPopup não é compatível com o Cordova.

    API modular da Web

    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;
      });

    API com namespace da Web

    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;
    });
  4. Para lidar com o caso em que a atividade do app é destruída antes da conclusão da operação de login, chame getRedirectResult quando o app for carregado.

    API modular da Web

    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;
      });

    API com namespace da Web

    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;
    });

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