Как исправить ошибку авторизации в сеансе Google expo «Что-то пошло не так при попытке завершить вход»

#reactjs #react-native #expo #google-signin

#reactjs #react-native #expo #google-вход

Вопрос:

Я пытаюсь реализовать вход в Google на своей выставке, используя expo-auth-session, когда я нажимаю на свой gmail для входа, я перенаправляюсь на этот экран с надписью «Что-то пошло не так при попытке завершить вход. Пожалуйста, закройте этот экран, чтобы вернуться в приложение «.

 //Google auth code:
    import * as Google from 'expo-auth-session/providers/google';
    const [request, response, promptAsync] = Google.useAuthRequest({
        expoClientId: config.google.expoClientId,
        redirectUri: config.google.redirectUri,
      });

      React.useEffect(() => {
      //Handle google login
      console.log(response)
      if (response?.type === 'success') {
       const { authentication } = response;
      } 
      }, [response]);

    //Button that calls the google sign in
    <Button iconName={'google'} iconPressed={() => promptAsync({useProxy: true})} />
 

Комментарии:

1. Это открытая проблема. Вот страница github.

2. Спасибо за ваш ответ, я видел github, но ни один комментарий там мне не помог, надеялся, что кто-нибудь здесь сможет дать некоторые рекомендации. @GiovanniEsposito

3. Итак, вы уже пытались установить useProxy: false правильный?

4. Я сделал, да. @GiovanniEsposito

Ответ №1:

В итоге я использовал expo-google-app-auth, по какой-то причине, которую мне еще предстоит выяснить, вы должны использовать host.expo.exponent в качестве имени вашего пакета и идентификатора пакета в консоли разработчика Google, чтобы эта библиотека работала. Код:

 import { Alert } from 'react-native';
import * as Google from 'expo-google-app-auth'

const GoogleLogin = async () => {
    //Get those keys from the google developer console
    const { iosClientId, androidClientId } = config.google
    const { type, user } = await Google.logInAsync({
        iosClientId,
        androidClientId,
    });

    if (type === 'success') {
        /* `accessToken` is now valid and can be used to get data from the Google API with HTTP requests */
        return { email: user.email, id: user.id }
    } else {
        Alert.alert("Google login error.")
    }
}

export default GoogleLogin;
 

Ответ №2:

Я думаю, вы можете попробовать так

 import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';

WebBrowser.maybeCompleteAuthSession();
....
const [request, response, promptAsync] = Google.useAuthRequest({
        androidClientId: config.androidClientId,
        iosClientId: config.iosClientId,
        expoClientId: config.expoClientId,
        scopes: config.scopes,
    });

useEffect(() => {
   if (response?.type === 'success') {
       const { authentication } = response;
       getGoogleUser((authentication as any).accessToken)
   }
}, [response]);

const getGoogleUser = async (accessToken: string) => {

  try{
        const response = await fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: { Authorization: `Bearer ${accessToken}`}
        });

        const user = response.json()
        if (user?.email) {
            const { email, name } = user; // you will get more data in the user object
            .......
        }
    }
    catch(error){
        console.log('GoogleUserReq error: ', error);
    }
}

 return (
    <View>
      <Button 
        onPress={() => promptAsync() }
      />
    </View>
  );