1
votes

Comment obtenir un jeton d'accès depuis l'API dans React Native

J'utilise react native et je souhaite obtenir le jeton d'accès de l'api qui est créé dans django en utilisant l'authentification oAuth 2

Je transmets tous les détails nécessaires mais je ne sais pas pourquoi je reçois une erreur de type de subvention non pris en charge

Response {type: "default", status: 400, ok: false, statusText: undefined, headers: Headers, …}
headers: Headers {map: {…}}
ok: false
status: 400
statusText: undefined
type: "default"
url: "http://MyUrl"
_bodyInit: "{"error": "unsupported_grant_type"}"
_bodyText: "{"error": "unsupported_grant_type"}"
__proto__: Object

Mon résultat attendu est que je souhaite que le jeton d'accès s'affiche et ce que j'obtiens est

fetch('MyApiUrl', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: JSON.stringify({
                'grant_type': 'password',
                'username': 'MyUserNameSettedInApi',
                'password': 'PasswordSettedInApi',
                'client_id': 'MyClientId',
                'client_secret': 'MyClientSecret',
                'scope': 'read Write'
            })
        })
            .then((response) => response)     <----tried response.json() but giving same error of grant type
            .then((responseData) => {
                console.log(responseData);
            })

s'il vous plaît aider merci d'avance


0 commentaires

3 Réponses :


1
votes

a essayé response.json () mais en donnant la même erreur de type d'autorisation - c'est la réponse de votre serveur oauth.

response.json () transforme vos données de réponse en chaîne décodée json.

Changez votre code en ceci:

let formData = new FormData();
formData.append('grant_type', 'password');
formData.append('username', 'MyUserNameSettedInApi');
formData.append('password', 'PasswordSettedInApi');
formData.append('client_id', 'MyClientId');
formData.append('client_secret', 'MyClientSecret');
formData.append('scope', 'read Write');

fetch('MyApiUrl', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: formData
})
.then((response) => response.json())
.then((responseData) => {
    console.log(responseData);
});


10 commentaires

merci pour une réponse rapide mais api fonctionne correctement sur postman avec un mot de passe de type subvention


Vérifiez ma réponse mise à jour et vérifiez quel type de contenu vous utilisez dans Postman et comment les données sont transmises.


vérifiez également ce fil: github.com/RealmTeam/django-rest -framework-social-oauth2 / iss‌ ues /…


dans le type de contenu postman est application / x-www-form-urlencoded, donc devrais-je écrire ce type dans accept


si vous avez utilisé application / x-www-form-urlencoded, ne pas envoyer JSON mais form-data ( developer.mozilla.org/en-US/docs/Learn/HTML/Forms/... ). Si vous voulez l'envoyer en tant que json comme dans votre code, vous devez définir le type de contenu sur application / json et activer la gestion des données json dans oauth comme dans mon exemple. Vous avez maintenant des formats et des types de contenu mixtes dans votre code.


donc cela signifie OAUTH2_PROVIDER = {'OAUTH2_BACKEND_CLASS': 'oauth2_provider.oauth2_backends.JSONOAuthLibCore',} ce code gérera mes données json données à l'api comme x-www-form-urlencoded format


non, il consommera vos données json avec l'en-tête Content-Type: application / json (vous devez l'utiliser dans votre code)


désolé mais je ne comprends pas comment mon api utilisera ces données pour l'authentification


merci de me donner un indice je l'ai fait avec la bibliothèque qs j'ai utilisé seulement qs.stringify () dans le corps


Ma solution fait de même avec du JavaScript pur - aucune bibliothèque supplémentaire n'est requise.



0
votes

Installez la bibliothèque qs

fetch('http://localhost:8888/o/token',
       {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/x-www-form-urlencoded;'
         },
         body: qs.stringify({
           'grant_type': 'password',
            'username': 'MyUserNameSettedInApi',
            'password': 'PasswordSettedInApi',
            'client_id': 'MyClientId',
            'client_secret': 'MyClientSecret',
         })
       })

Importez-la dans votre application et vous pourrez l'envoyer. Utilisez qs.stringify comme indiqué ci-dessous

npm install qs


0 commentaires

0
votes

J'ai également eu le même problème de "{" error ":" unsupported_grant_type "}" pour cela, je viens de transmettre tous les paramètres du corps directement sans utiliser JSON.stringify ({} ); Cela fonctionne pour moi, trouvez l'exemple de code ci-dessous.

    fetch('MyApiUrl', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'grant_type=password&username=MyUserName&password=MyPassword'
  })
    .then(res => res.json())
    .then(token => console.log(token))
    .catch(err => console.error(err));

vous devez mettre à jour la section body uniquement.

body: 'grant_type=password&username=MyUserName&password=MyPassword'

J'espère que cela vous aidera.


0 commentaires