Uwierzytelnianie konta usługi Google z trybu macierzystego

Question

Chcę używać uwierzytelniania konta usługi w mojej aplikacji natywnej reagowania, aby umożliwić użytkownikom aktualizowanie arkusza kalkulacyjnego bez konieczności logowania się na swoje konto Google.

Jestem dość zagubiony, jak to zrobić, ponieważ widzę, że cały kod frontendu jest powiązany z tradycyjnym loginem oauth2.

Każdy pomysł?

Answer 1

I wreszcie spadła pomysł konta usługi i używanego klienta protokołu OAuth.

I oparł się na następującym React Native Library: https://github.com/joonhocho/react-native-google-sign-in

Oto moja usługa uwierzytelniania (uproszczony, Redux + Redux thunk based):

// <project_folder>/src/services/auth.js 
import GoogleSignIn from 'react-native-google-sign-in'; 
import { store } from '../store'; 
import auth from '../actions/auth'; 

export default() => { 
    GoogleSignIn.configure({ 
     // https://developers.google.com/identity/protocols/googlescopes 
     scopes: ['https://www.googleapis.com/auth/spreadsheets'], 
     clientID: 'XXXXXXXXXXXXXXXXX.apps.googleusercontent.com', 
    }).then(() => { 
     GoogleSignIn.signInPromise().then((user) => { 
      store.dispatch(auth(user.accessToken)); 
     }).catch((err) => { 
      console.log(err); 
     }); 
    }).catch((err) => { 
     console.log(err); 
    }); 
}; 

Więc mam user.accessToken w moim sklepie Redux i może używać go w innym miejscu do tworzenia żądań REST w interfejsie Google sheets API.

Oto prosty przykład składnik, który obsługuje uwierzytelniania i następnie pobiera niektóre dane z arkusza:

// <project_folder>/src/main.js 
import React, { Component } from 'react'; 
import { 
    ActivityIndicator, 
    Text, 
    View, 
    StyleSheet, 
} from 'react-native'; 
import { connect } from 'react-redux'; 
import auth from './services/auth'; 
import Sheet from './services/sheet'; 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
    }, 
}); 

const sheetId = 'XX-XXXXXX_XXX_XXXXXXXXXXXXXXXXXXXXXX'; 


class Main extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      animating: true, 
     }; 
    } 

    componentDidMount() { 
     auth(); 
    } 

    componentWillUpdate(nextProps) { 
     if (this.props.token !== nextProps.token) this.setState({ animating: false }); 
    } 

    componentDidUpdate(nextProps) { 
     this.sheet = new Sheet(id, this.props.token); 
     this.sheet.getDoc(); 
    } 

    render() { 
     return (
      <View style={styles.container}> 
       <ActivityIndicator 
        animating={this.state.animating} 
        style={{ height: 80 }} 
        size="large" 
       /> 
       {!this.state.animating && 
        <Text> 
         {this.props.name} 
        </Text> 
       } 
      </View> 
     ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
     token: state.auth.get('token'), 
     name: state.sheet.get('name'), 
    }; 
}; 

export default connect(mapStateToProps)(Main); 

I tu jest podstawowy serwis do odczytu/zapisu arkusza:

// <project_folder>/services/sheet.js 
import { store } from '../store'; 
import { 
    nameGet, 
    valueGet, 
    valuePost, 
} 
from '../actions/sheet'; 

class Sheet { 
    constructor(id, token) { 
     this.id = id; 
     this.token = token; 
     this.endPoint = `https://sheets.googleapis.com/v4/spreadsheets/${this.id}`; 
    } 

    getDoc() { 
     fetch(`${this.endPoint}?access_token=${this.token}`).then((response) => { 
      response.json().then((data) => { 
       console.log(data); 
       store.dispatch(nameGet(data.properties.title)); 
      }); 
     }); 
    } 

    getCell(sheet, cell) { 
     const range = `${sheet}!${cell}`; 
     fetch(`${this.endPoint}/values/${range}?access_token=${this.token}`) 
     .then((response) => { 
      response.json() 
      .then((data) => { 
       console.log(data); 
       store.dispatch(valueGet(data.values[0][0])); 
      }) 
      .catch((err) => { 
       console.log(err); 
      }); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
    } 


    writeCell(sheet, cell, value) { 
     const range = `${sheet}!${cell}`; 
     const body = JSON.stringify({ values: [[value]] }); 
     fetch(
      `${this.endPoint}/values/${range}?valueInputOption=USER_ENTERED&access_token=${this.token}`, 
      { 
       method: 'PUT', 
       headers: { 
        'Content-Type': 'application/json' 
       }, 
       body, 
      } 
     ) 
     .then((response) => { 
      response.json() 
      .then((data) => { 
       console.log(data); 
       store.dispatch(valuePost('OK')); 
      }) 
      .catch((err) => { 
       console.log(err); 
      }); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
    } 
} 

export default Sheet; 

Jeśli jest lepszy sposób, proszę dać mi znać.

Answer 2

Nie mam pełnego pojęcia o tym, ale tak, jeśli możesz ustawić uprawnienia do arkusza jako publiczne i dostęp z aplikacji nie będzie wymagać uwierzytelnienia.

również możesz skorzystać z poniższego linku może pomóc bardziej techniczny Google Sheets API v4