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
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 amy-app.firebaseapp.com
. Se um domínio personalizado for usado no lugar do domíniofirebaseapp.com
provisionado pelo Firebase, o personalizado deverá ser usado.Para configurar um app Android, adicione-o ao console do Firebase e insira os respectivos detalhes. Você não precisa do google-services.json gerado.
Para configurar um app iOS, crie-o e o adicione 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.
Ative o Firebase Dynamic Links:
- No console do Firebase, abra a seção Dynamic Links.
-
Se você ainda não aceitou os termos do Dynamic Links e criou um domínio Dynamic Links, faça isso agora.
Se você já criou um domínio Dynamic Links, anote-o. Um domínio 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.
Ative o Login do Google no console do Firebase:
- No console do Firebase, abra a seção Autenticação.
- Na guia Método de login, ative o método Login do Google e clique em Salvar.
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
Adicione a seguinte configuração ao seu arquivo
config.xml
do Cordova, em queAUTH_DOMAIN
é o domínio da etapa (1) eDYNAMIC_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, substituamy-app.firebaseapp.com
por ele.Para o aplicativo Android,
singleTask
deve ser usado paralaunchMode
.<preference name="AndroidLaunchMode" value="singleTask" />
Processar o fluxo de login com o SDK do Firebase
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.Crie uma instância do objeto do provedor do Google:
Web
import { GoogleAuthProvider } from "firebase/auth/cordova"; const provider = new GoogleAuthProvider();
Web
var provider = new firebase.auth.GoogleAuthProvider();
Autentique com o Firebase por meio do objeto do provedor do Google usando
signInWithRedirect
. Observe quesignInWithPopup
não é compatível com o Cordova.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; });
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; });
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.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; });
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 usandoreauthenticateWithRedirect
.