Bonjour, 

je suis entrain de réaliser ma première application réact native et j'ai un petit soucis. 

En effet , je souhaite via une API authentifié un utilisateur.

j'ai identifié 3 cas de figure: 

-l'api ne répond pas 

- l'api renvoi une erreur (code != 200)

- l'authentification est bonne (code 200)

Login.js

import React from 'react'
import {View, Button, TextInput} from 'react-native'
import { getLogin} from "../API/api"

class Login extends React.Component {

  constructor(props){
    super(props)
    this.state = {
    }
    this.username = ""
    this.password = ""
    this.result = ""
  }
  _auth(){
    getLogin(this.username, this.password).then(data => this.setState({ result: data}));
    console.log(this.state.result)
    if (this.state.result === undefined)
    {
      console.log("API NOT RESPOND")
    }
    else if (this.state.result.error)
    {
      console.log("Erreur")
    }
    else{
      console.log(this.state.result)
    }
  }

  _loginTextInputChanged(text){
    this.username =  text
  }

  _PasswordTextInputChanged(text){
      this.password =  text
  }

  render(){
      return(
        <View style={{ marginTop: 20 }}>
          <TextInput onChangeText={(text) => this._loginTextInputChanged(text)} style={styles.textinput} placeholder='Login'/>
          <TextInput onChangeText={(text) => this._PasswordTextInputChanged(text)} style={[styles.textinput, styles.marginTop]} placeholder='Password'/>
      <Button title='Login' onPress={() => this._auth()}/>
    </View>
    )
  }
}


const styles = {
  textinput: {
    marginLeft: 5,
    marginRight: 5,
    height: 50,
    borderColor: '#000000',
    borderWidth: 1,
    paddingLeft: 5
  },

  marginTop: {
    marginTop: 5
  }
}
export default Login

et api/api.js

import base64 from 'react-native-base64'

export function  getLogin(user, password){
  var headers = new Headers();
  headers.append("Authorization", "Basic " + base64.encode(user +":"+ password));
  const url = "https://mondomaine/api/login"
  return fetch(url, {
    headers: headers
  })
  .then((response) => response.json())
  .catch((error) => console.error(error))
}

1 ) Mon problème est le suivant : 

Comment récupérer le code de retour de l'api ET les datas en meme temps ? 

2) Comment je peux verifier que l'API a bien répondu ? 

  if (this.state.result === undefined)
    {
      console.log("API NOT RESPOND")
    }
    else if (this.state.result.error)
    {
      console.log("Erreur")
    }
    else{
      console.log(this.state.result)
    }

Merci d'avance pour vos futurs réponses

-
Edité par Oldaric 1 février 2019 à 4:36:06

Bonjour,

Avez-vous trouvez la réponse à votre problème ?

Je dois moi aussi mettre en place une interface de connexion dans une appli mobile react native.

Je gère toutes mes requêtes HTTP via l'API REST de Wordpress.

Les requêtes retournent un JSON. Si vous obtenez des données, le JSON commence par : {"status":"OK","response":"Response OK","code":200,"data...

ATTENTION : data est un tableau contenant d'autres données JSON. L'idéal pour accéder aux données et au code de retour est de stocké les données dans le state de votre composant :

this.setState({ dataSource: response.json() });

Pour accéder aux données il vous suffit de d'appeler le contenu du state :

this.state.dataSource.data[i].colonneDeVotreTableau

i étant un indice car Data est un tableau.

J'espère que j'ai pu vous aider !

Cordialement,

LS

Merci , j'ai effectivement trouvé une solution depuis +1 ans.

Dans ce cas, pourriez-vous m'aider ? J'ai une interface de connexion mais je n'arrive pas à la lier avec mon serveur wordpress. voici son code : 

import React from 'react'
import { styles } from '../Styles/Styles'
import { ScrollView, View, TextInput, Text, TouchableOpacity, Image } from 'react-native'

export default class LoginForm extends React.Component {
    render() {
        return (
            <ScrollView style={styles.app}>
                <View style={{ borderBottomWidth: 3, borderBottomColor: '#FFDAAD', backgroundColor: '#1B91BF' }}>
                    <Text style={styles.title}>Connectez-vous :</Text>
                    <View style={styles.form}>
                        <Text style={styles.text}>Identifiant :</Text>
                        <TextInput
                            placeholder='votreIdentifiant'
                            placeholderTextColor="#D8D8D8"
                            autoFocus={true}
                            OnChangeText={}
                        />
                    </View>
                    <View style={styles.form}>
                        <Text style={styles.text}>Mot de passe :</Text>
                        <TextInput
                            placeholder='votreMotDePasse'
                            placeholderTextColor="#D8D8D8"
                            secureTextEntry={true}
                            OnChangeText={}
                        />
                    </View>
                </View>
                <TouchableOpacity
                    onPress={this._login}
                    style={{ alignItems: 'center' }}>
                    <Image source={require('../Assets/tick.png')} style={styles.image_button} />
                </TouchableOpacity>
            </ScrollView>)
    }

}

Dans ma fonction _login() je pense me connecter à envoyer des informations en post avec fetch mais j'ai seulement l'habitude de l'utiliser pour récupérer des infos de base de données wordpress : les requêtes HTTP renvoient à des fonctions php qui fouillent dans les tables et retourne les résultats en JSON. Wordpress ses identifiants/mdp dans sa table wp_users. Ainsi, je me suis dis qu'il fallait les comparer à ceux entrés dans mon formulaire, et après... je bloque.

Auriez-vous une idée ?

-
Edité par LilianSananikone 10 juin 2020 à 17:12:35

Je ne suis pas moderateur mais je t'invite à réouvrir un nouveau sujet pour plus de visibilité et d'aide des autres membres.
Pour mon cas, il s'agit de react-native et pas de react-js.