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 do JavaScript. Ao adicionar o snippet do Firebase, anote a variável de configuração do authDomain. Ela deverá ter esta aparência: my-app.firebaseapp.com. Se houver um domínio personalizado, use-o em vez do firebaseapp.com provisionado pelo Firebase.

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

  3. Para configurar um app iOS, crie um aplicativo para iOS e adicione-o ao Firebase console. Você precisará do código 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.

      Se você já tiver criado um domínio do Dynamic Links, anote-o. Um domínio do Dynamic Links costuma se parecer com este exemplo:

      example.page.link

      Você precisará desse valor ao configurar o app para Android ou iOS a fim de interceptar o link recebido.

  5. Ative o Login do Google no Firebase console:

    1. No Console do Firebase, abra a seção Autenticação.
    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 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>
    

    Para usar um domínio personalizado auth.custom.domain.com, substitua my-app.firebaseapp.com por ele.

    Para um aplicativo do Android, use singleTask em 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. Certifique-se de que a instância do app do Firebase seja inicializada depois que o evento for acionado.

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

    var provider = new firebase.auth.GoogleAuthProvider();
    
  3. Use o objeto de provedor do Google para a autenticação no Firebase com signInWithRedirect. Observe que signInWithPopup não é compatível com o Cordova.

    firebase.auth().signInWithRedirect(provider).then(function() {
      return firebase.auth().getRedirectResult();
    }).then(function(result) {
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    
  4. Para casos em que a atividade do app é encerrada antes da conclusão do login, chame getRedirectResult quando o app for carregado.

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

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

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.