Jak zaimplementować Microsoft Login z Firebase w React Native?

Question

Obecnie w naszej aplikacji internetowej zaimplementowano logowanie Microsoft za pomocą Firebase. Teraz chcę zrobić to samo z aplikacją React Native. Do tej pory odkryłem, że natywna biblioteka Firebase nie obsługuje bezpośrednio tego dostawcy. Nie firebase.auth.OAuthProvider('microsoft.com')jest też obsługiwany w wersji natywnej.

Następnie w kolejnej próbie zaimplementowałem logowanie Azure z react-native-azure-ad-2pakietem, które zwraca accessToken i dane użytkownika. Teraz próbuję użyć tego tokena, aby zalogować się do Firebase bez powodzenia.

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

W ten sposób otrzymuję następujący błąd:

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

Każda pomoc jest na prawdę doceniana!

Answer 1

W końcu znalazłem rozwiązanie. Musiałem użyć niestandardowego tokena, który jest generowany z unikalnym identyfikatorem (w tym przypadku Microsoft UID). Token można wygenerować za pomocą pakietu innej firmy lub za pomocą firebase-admin (czyli tylko po stronie serwera). Utworzyłem więc funkcję chmury w Firebase, która pobiera identyfikator Microsoft i dodatkowe informacje o użytkowniku oraz zwraca token, jak pokazano poniżej:

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

Wygenerowany token musi zostać wysłany do Front-endu, aby można było przeprowadzić proces uwierzytelniania Firebase.

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

Jeśli użytkownik o unikalnym identyfikatorze (UID firmy Microsoft) jest nowy, Firebase utworzy nowego użytkownika. W moim przypadku, ponieważ mamy wersję aplikacji internetowej, oznacza to, że jeśli użytkownik loguje się przy użyciu adresu [email protected], Firebase utworzy 2 użytkowników: jednego zalogowanego u dostawcy Microsoft (z aplikacji internetowej) i drugiego z niestandardowym dostawca (z aplikacji React Native).