OAuth 的 Google.logInAsync 函数在 React Native 中不执行任何操作

Tus*_*har 9 oauth-2.0 google-oauth reactjs react-native

Google.logInAsync应该用于 React Native 中的 OAuth 的函数没有给出任何响应,或者被卡住。看一下我的代码,从第 14 行到第 36 行。该signIn函数正在调用Google.logInAsync并卡在那里。没有错误,什么都没有。然而,当我再次按下按钮并再次调用登录函数时,会传递一个错误:Error: Cannot start a new task while another task is currently in progress: Get Auth

这是我目前的代码。它在屏幕上显示一个标签“使用 Google 登录”和一个按钮。点击按钮启动this.signIn功能,在调试器屏幕上打印“Started logInAsync”,但Google.logInAsync永远不会完成,也不会在任何地方抛出错误。console.log('Completed logInAsync')永远不会被处决!

import {Google} from "expo"
...
            console.log('Starting logInAsync')
            const result = await Google.logInAsync({
                androidClientId:
                "<CLIENT_ID>",
                scopes: ["profile", "email"]
            })
            console.log('Completed logInAsync')
Run Code Online (Sandbox Code Playgroud)

给出了一个错误,说安装“expo-google-app-auth”我安装了该模块,然后更改了导入和功能

import * as Google from "expo-google-app-auth"
...
            console.log('Starting logInAsync')
            const result = await Google.logInAsync({
            ...
            })
            console.log('Completed logInAsync')
Run Code Online (Sandbox Code Playgroud)

在那之后,

import { StyleSheet, Text, View, Image, Button } from "react-native"
import * as Google from "expo-google-app-auth"

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      signedIn: false,
      name: "",
      photoUrl: ""
    }
  }
  signIn = async () => {
    try {
      console.log('Starting logInAsync')
      const result = await Google.logInAsync({
        androidClientId:
          "860657237026-jfosg5hu52u1vedclccs1vgihghva534.apps.googleusercontent.com",
        scopes: ["profile", "email"]
      })
      console.log('Completed logInAsync')

      if (result.type === "success") {
        this.setState({
          signedIn: true,
          name: result.user.name,
          photoUrl: result.user.photoUrl
        })
      } else {
        console.log("Cancelled!")
      }
    } catch (e) {
      console.log("Error: ", e)
    }
  }
  render() {
    return (
      <View style={styles.container}>
        {this.state.signedIn ? (
          <LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} />
        ) : (
          <LoginPage signIn={this.signIn} />
        )}
      </View>
    )
  }
}

const LoginPage = props => {
  return (
    <View>
      <Text style={styles.header}>Sign In With Google</Text>
      <Button title="Sign in with Google" onPress={() => props.signIn()} />
    </View>
  )
}

const LoggedInPage = props => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Welcome:{props.name}</Text>
      <Image style={styles.image} source={{ uri: props.photoUrl }} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  header: {
    fontSize: 25
  },
  image: {
    marginTop: 15,
    width: 150,
    height: 150,
    borderColor: "rgba(0,0,0,0.2)",
    borderWidth: 3,
    borderRadius: 150
  }
})
Run Code Online (Sandbox Code Playgroud)

除非您按登录按钮两次,否则此代码不会发生错误。我现在使用的是最新版本的 Node、React-Native 和 Expo。