react-native - 使用 instagram react native 登录

我正在构建一个用户可以登录的应用程序,我希望用户能够连接其他帐户并能够使用它们登录,我已经使用 https://www.npmjs.com/package/react-native-fbsdk-next 到目前为止一切顺利,对于谷歌我想我会处理它,但我需要使用 instagram 来完成。

长话短说,谁能告诉我如何让我的用户能够使用 instagram 登录。先感谢您。

回答1

您可以使用为此目的开发的 https://www.npmjs.com/package/react-native-instagram-login。请注意,您需要先https://developers.facebook.com/docs/instagram-basic-display-api/getting-started,才能使用此功能。

维护人员制作了一个简短的https://developers.facebook.com/docs/instagram-basic-display-api/getting-started

总而言之,https://github.com/hungdev/react-native-instagram-login/blob/master/Example/App.js,为了完整起见,我将其包含在此处。

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import InstagramLogin from 'react-native-instagram-login';
import CookieManager from '@react-native-community/cookies';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      token: '',
    };
  }

  setIgToken = (data) => {
    this.setState({ token: data })
  }

  onClear() {
    CookieManager.clearAll(true)
      .then((res) => {
        this.setState({ token: null })
      });
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity
          style={styles.btn}
          onPress={() => this.instagramLogin.show()}>
          <Text style={{ color: 'white', textAlign: 'center' }}>Login now</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.btn, { marginTop: 10, backgroundColor: 'green' }]}
          onPress={() => this.onClear()}>
          <Text style={{ color: 'white', textAlign: 'center' }}>Logout</Text>
        </TouchableOpacity>
        <Text style={{ margin: 10 }}>Token: {this.state.token}</Text>
        {this.state.failure && (
          <View>
            <Text style={{ margin: 10 }}>
              failure: {JSON.stringify(this.state.failure)}
            </Text>
          </View>
        )}
        <InstagramLogin
          ref={ref => (this.instagramLogin = ref)}
          appId='your-app-id'
          appSecret='your-app-secret'
          redirectUrl='your-redirect-Url'
          scopes={['user_profile', 'user_media']}
          onLoginSuccess={this.setIgToken}
          onLoginFailure={(data) => console.log(data)}
        />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  btn: {
    borderRadius: 5,
    backgroundColor: 'orange',
    height: 30,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

相似文章

最新文章