angularjs - auth - login angular firestore

Firebase $ onAuth tiene authData incorrecto después de $ authWithOAuthRedirect de Facebook

Question

Estoy intentando autenticar a los usuarios de mi aplicación Firebase (Angularfire) con Facebook Login.

Todo funciona como se espera cuando me autentico con una ventana emergente, pero para admitir tantos navegadores como sea posible (Chrome en iOS no admite ventanas emergentes, por ejemplo) Quiero recurrir a la autenticación con un redireccionamiento ( $authWithOAuthRedirect ) .

He confirmado que mi configuración en Facebook es correcta (mi ID de aplicación y secreto, por ejemplo), pero cuando me redireccionan a mi aplicación después de la autenticación de Facebook con un redireccionamiento, $onAuth pero no tengo mi authData Facebook.

En cambio, tengo authData anónimo. Por un poco de fondo; todos los usuarios se autentican anónimamente si no están autenticados de otra manera (con Facebook, en este ejemplo).

No puedo ver por qué sería esto: el usuario ahora debería estar autenticado con Facebook y tener el authData Facebook.

Las excepciones de mi código están debajo para cierto contexto:

Se activa cuando un usuario hace clic en el botón de inicio de sesión

function logIn () {
firebaseAuth
.$authWithOAuthRedirect(''facebook'', function (error) {
if (error) {
console.log(error);
}
});
}

$onAuth (dentro de la run mi aplicación Angular)

function run ($rootScope, firebaseAuth, sessionStore) {
$rootScope
.$on(''$routeChangeError'', function (event, next, prev, error) {
if (error === ''AUTH_REQUIRED'') {
console.log(error);
}
});
$rootScope
.$on(''$routeChangeSuccess'', function (event, current, prev) {
$rootScope.title = current.$$route.title;
});
firebaseAuth
.$onAuth(onAuth);
function onAuth (authData) {
console.log(authData);
}
}

Enrutar el solucionador para que autentique de otra manera anónimamente a los usuarios

function sessionState ($q, firebaseAuth) {
var deferred = $q.defer();
firebaseAuth
.$requireAuth()
.then(deferred.resolve, guest);
return deferred.promise;
function guest () {
firebaseAuth
.$authAnonymously()
.then(deferred.resolve, rejected);
}
function rejected () {
deferred.reject(''AUTH_REQUIRED'');
}
}

El enrutador de ruta ( sessionState ) verifica si el usuario ya está autenticado y, de no ser así, intenta autenticarlos de forma anónima.

Después de la redirección de autenticación de Facebook, el usuario ya estará autenticado y, por lo tanto, no necesita ser autenticado de forma anónima.

Pero, parece que lo son? Como $onAuth registra el authData en la consola, y es anónimo.

¡Cualquier ayuda con esto sería muy apreciada! Estoy seguro de que tiene algo que ver con mi resolución de rutas, ya que la autenticación emergente funciona bien (la ruta ya está resuelta).

EDITAR: Intenté eliminar por completo mi sistema de resolución de rutas en caso de que fuera el causante de un problema, pero no hizo ninguna diferencia. El usuario simplemente no estaba autenticado en lugar de estar autenticado con Facebook (después de $authWithOAuthRedirect ) o anónimamente.

ACTUALIZACIÓN: Intenté autenticar con Twitter y el transporte de redirección y me encontré con el mismo problema. También intenté usar el puerto 80, en lugar del puerto 3000, que mi aplicación se estaba publicando localmente, pero no me gustó.

ACTUALIZACIÓN: cuando html5Mode modo html5Mode en mi aplicación, y las rutas ahora comienzan con # s - $authWithOAuthRedirect funciona perfectamente. A partir de esto, solo puedo suponer que $authWithOAuthRedirect no es compatible con el html5Mode de AngularJS. ¿Alguien puede confirmar que esto es un problema, o debo cambiar mi código para admitir html5Mode y authWithOAuthRedirect ?

EJEMPLO REPO Aquí hay un informe repo que demuestra el problema: https://github.com/jonathonoates/myapp

Busque en el directorio dist : debería poder descargarlo y ejecutar la aplicación para reproducir el problema. En scripts/main.js está el JS de la aplicación; He agregado un par de comentarios, pero es bastante explicativo.

Para reproducir el problema: haga clic en el botón "Iniciar sesión en Facebook" y se lo redireccionará a Facebook para que se autentique. FB lo redireccionará a la aplicación, pero aquí radica el problema: no será autenticado, y el authData devuelto será nulo; lo verá en la consola.

ACTUALIZACIÓN: cuando agrego un hashPrefix en html5Mode por ejemplo

$locationProvider
.html5Mode(true)
.hashPrefix(''!'');

La aplicación funciona como era de esperar, se autentica con Facebook y redirige los trabajos de transporte.

Un par de peros aunque:

1. La URL tiene #%3F agregado, y está disponible / visible en el historial del navegador.
2. ¡Esto reescribiría las URL con #! en buscadores que no son compatibles con History.pushState ( html5Mode ), y algunos motores de búsqueda menos avanzados pueden buscar un fragmento HTML debido al ''hashbang''.

Examinaré la URL de alta resolución al ser redirigido desde Facebook en lugar de utilizar hashPrefix . En la URL hay una __firebase_request_key que puede ser significativa, por ejemplo

http://localhost:3000/#%3F&__firebase_request_key=

Answer 1

Parece que esto es una incompatibilidad entre Firebase y el modo html5 de AngularJS como sospechabas. Al final del flujo de redireccionamiento, Firebase dejaba la URL como " http: //.../# ?", Y Angular aparentemente no le gusta así que redirigió a " http: //.../ "Este redireccionamiento interrumpe Firebase (la página se vuelve a cargar mientras estamos tratando de autenticar contra el servidor) y por lo tanto no puede completar el proceso de autenticación.

Hice una solución experimental que garantiza que revierte la URL a http: //.../# "al final del flujo de redireccionamiento, con lo que Angular está contento, evitando así la redirección problemática. Puede obtenerla aquí si te gusta: https://mike-shared.firebaseapp.com/firebase.js

Me aseguraré de que esta solución llegue a la próxima versión del cliente JS. Puedes estar atento a nuestro registro de cambios para ver cuándo se lanza.