Google-Dienst-Account-Authentifizierung von reagieren nativen

Question

Ich möchte Service-Account-Authentifizierung innerhalb meiner nativen App verwenden, damit die Leute eine Tabelle aktualisieren können, ohne dass sie sich in ihrem Google-Konto anmelden müssen.

Ich bin ziemlich verloren auf, wie es zu tun ist, da aller Frontend-Code, den ich sehe, im Zusammenhang mit traditionellen Oauth2-Login ist.

Irgendeine Idee?

Answer 1

ich schließlich die Idee der Dienstkonto gelöscht und verwendet Client oauth.

verließ ich mich auf die folgende React Mutter Bibliothek: https://github.com/joonhocho/react-native-google-sign-in

Hier meine Authentifizierungsdienst (vereinfacht, redux + redux thunk basiert):

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

So dann habe ich die user.accessToken in meinem redux store und kann es an anderer Stelle verwenden, um REST-Anforderungen für die Google-Tabellen-API zu erstellen.

Hier ist ein einfaches Beispiel für eine Komponente, die die Auth behandelt und dann ruft einige Daten aus dem Blatt:

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

Und hier ist ein Basisdienst/schreibt Blatt zu lesen:

// <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; 

Wenn es einen besseren Weg zu tun gibt, lass es mich wissen.

Answer 2

Ich habe keine vollständige Vorstellung davon, aber ja, wenn Sie die Blatt-Erlaubnis als öffentlich und Zugriff von Ihrer Anwendung es wird nicht fragen Sie Authentifizierung.

auch können Sie folgenden Link verwenden kann mehr technische Hilfe Google Sheets API v4