Google服務帳戶身份驗證來自原生

Question

我想在我的反應原生應用程序中使用服務帳戶身份驗證，以便讓人們更新電子表格而無需登錄其Google帳戶。

我很迷茫，因爲我看到的所有前端代碼都與傳統的oauth2登錄有關。

有什麼想法？

Answer 1

我終於落下服務帳戶的想法，並使用客戶端的OAuth。

我靠下面的反應機庫：https://github.com/joonhocho/react-native-google-sign-in

這裏是我的身份驗證服務（簡體，終極版+終極版基於的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); 
    }); 
}; 

於是我有user.accessToken在我的終極版商店並可以在其他地方使用它來創建REST請求到Google表單API。

這裏是處理在auth的部件的一個簡單的例子，然後從所述片材中檢索的一些數據：

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