Wie implementiere ich Microsoft Login mit Firebase in React Native?

Question

Derzeit ist in unserer Web-App ein Microsoft-Login mit Firebase implementiert. Jetzt möchte ich dasselbe mit einer React Native-App tun. Bisher habe ich festgestellt, dass die reaktionsnative Firebase-Bibliothek diesen Anbieter nicht direkt unterstützt. Wird firebase.auth.OAuthProvider('microsoft.com')auch in native nicht unterstützt.

Bei meinem nächsten Versuch habe ich dann die Azure-Anmeldung mit einem react-native-azure-ad-2Paket implementiert , das ein accessToken und Benutzerdaten zurückgibt. Jetzt habe ich versucht, dieses Token zu verwenden, um mich bei Firebase anzumelden, ohne Erfolg.

onMicrosoftLoginSuccess(accessToken){
    const credential = auth.OAuthProvider.credential(accessToken);
    auth().signInWithCredential(credential)
    .then(response =>{
        console.log('Respuesta firebase', response);
    })
    .catch(e =>{
        console.log('Error Firebase', e);
    })
}

Damit erhalte ich folgenden Fehler:

Error Firebase [Error: [auth/invalid-credential] The supplied auth credential is malformed or has expired.]

Jede Hilfe wird sehr geschätzt!

Answer 1

Also habe ich endlich eine Lösung gefunden. Ich musste ein benutzerdefiniertes Token verwenden, das mit einer eindeutigen ID generiert wird (in diesem Fall Microsoft UID). Das Token kann mit einem Paket eines Drittanbieters oder mit firebase-admin (dh nur von der Serverseite) generiert werden. Daher habe ich in Firebase eine Cloud-Funktion erstellt, die die Microsoft-UID und einige zusätzliche Benutzerinformationen verwendet und ein Token zurückgibt, wie unten gezeigt:

const tokenPromise = (data) =>{
    return new Promise((resolve, reject) =>{
        admin.auth().createCustomToken(data.uid, data.user)
        .then(response =>{
            console.log('Response', response);
            resolve(response);
        })
        .catch(error =>{
            console.log('Error', error);
            reject(error);
        })
    });
}

Das generierte Token muss an das Front-End gesendet werden, damit der Firebase-Authentifizierungsprozess durchgeführt werden kann.

auth().signInWithCustomToken(tokenFromServer)
    .then(response =>{
        //response contains user data;
        //You can also access this info from
        firebase.auth().currentUser;
    })
    .catch(e =>{
        console.log('Error Firebase', e);
    });

Wenn der Benutzer mit der eindeutigen Kennung (Microsoft UID) neu ist, erstellt Firebase einen neuen Benutzer. In meinem Fall bedeutet dies, dass Firebase, wenn sich ein Benutzer mit [email protected] anmeldet, zwei Benutzer erstellt: einen mit Microsoft-Anbieter (über die Web-App) und einen mit einem benutzerdefinierten Benutzer Anbieter (von reagieren native App).