रिएक्टिव देशी

Question

से Google सेवा खाता प्रमाणीकरण मैं अपने प्रतिक्रियात्मक मूल ऐप के भीतर सेवा खाता प्रमाणीकरण का उपयोग करना चाहता हूं ताकि लोगों को उनके Google खाते में लॉग इन करने की आवश्यकता के बिना स्प्रेडशीट अपडेट कर सकें।

मैं इसे कैसे करना है इस पर बहुत खो गया हूं, क्योंकि मैं देखता हूं कि सभी फ्रंटेंड कोड पारंपरिक oauth2 लॉगिन से संबंधित हैं।

कोई विचार?

Answer 1

मैं अंत में सेवा खाते के विचार और इस्तेमाल ग्राहक OAuth गिरा सकता है।

मैं निम्नलिखित प्रतिक्रिया मूल निवासी पुस्तकालय पर भरोसा: https://github.com/joonhocho/react-native-google-sign-in

यहाँ मेरी प्रमाणीकरण सेवा (सरलीकृत, redux + redux thunk आधार पर) है:

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

तो फिर मैं अपने redux दुकान में user.accessToken है और Google शीट्स एपीआई के लिए आरईएसटी अनुरोध बनाने के लिए इसे कहीं और इस्तेमाल कर सकते हैं। यहाँ

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

और पढ़ने/एक पत्रक लिखने के लिए एक बुनियादी सेवा है::

यहाँ एक घटक है कि प्रमाणन हैंडल का एक सरल उदाहरण है और उसके बाद चादर से कुछ डेटा को पुन: प्राप्त

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

यदि कोई बेहतर तरीका है, तो कृपया मुझे बताएं।

Answer 2

मुझे इस बारे में कोई पूरी तरह से कोई जानकारी नहीं है, लेकिन हाँ यदि आप चादर अनुमति को सार्वजनिक रूप से सेट कर सकते हैं और आपके आवेदन से एक्सेस कर सकते हैं तो यह आपको प्रमाणीकरण नहीं पूछेगा।

भी आप लिंक नीचे का उपयोग अधिक तकनीकी मदद मिल सकती है Google Sheets API v4