React Native App Authentication с помощью Instagram API

Один из способов добиться этого - использовать deeplink. Я не думаю, что это лучшая практика.

Ответ от WebView будет отправлен на URL-адрес перенаправления, который вы ранее установили после успешной аутентификации. Установите URL-адрес перенаправления для своего приложения. Например, в iOS, если у вас есть схема URL как «myapp123», то каждый раз, когда вы открываете браузер и набираете myapp123: // .., оно откроет ваше приложение, и ваше приложение должно иметь возможность получать ответ, отправленный из instagram.

Если вы используете Expo, вы можете использовать AuthSessions для этого (https://docs.expo.io/versions/latest/sdk/auth-session). Точный способ сделать это зависит от того, используете ли вы управляемый рабочий процесс или простой рабочий процесс и т. д., Но для управляемого рабочего процесса вы можете сделать следующее:

1. Перейдите в консоль разработчика Facebook, перейдите в свое приложение и добавьте продукт Instagram Basic Display.
2. В разделе «Базовый дисплей Instagram» в разделе «Действительные URI перенаправления OAuth» используйте https://auth.expo.io/@your-expo-username/your-project-slug (слаг проекта находится в вашем файле app.json).
3. На той же странице разработчика FB добавьте профиль тестировщика Instagram, а затем выполните действия для аутентификации этого пользователя.
4. В своем проекте установите expo install expo-auth-session и импортируйте его в свой компонент.
5. Также установите expo-web-browser
6. Кодируйте свой компонент так:

import React, { useEffect } from 'react';
import { Button, Platform, Text, TouchableOpacity, View } from 'react-native';
import * as WebBrowser from 'expo-web-browser';
import { useAuthRequest, makeRedirectUri } from 'expo-auth-session';

WebBrowser.maybeCompleteAuthSession(); // <-- will close web window after authentication

const useProxy = Platform.select({ web: false, default: true });

const client_id = 9999999999999;
const redirect_uri = "https://auth.expo.io/@your-expo-username/your-project-slug";
const scope = "user_profile,user_media";
const site = "https://api.instagram.com/oauth/authorize?client_id = " + client_id + "&redirect_uri = " + redirect_uri + "&scope = " + scope + "&response_type=code&state=1";
  
const discovery = { authorizationEndpoint: site }

const GetInstagram = () => {


  const [request, response, promptAsync] = useAuthRequest({
    redirectUri: makeRedirectUri({
      useProxy,
      native: redirect_uri
    }),
    scopes: [scope],
    clientId: client_id
  }, discovery);


  useEffect(() => {
    if (response?.type === 'success') {
      const { code } = response.params; <--- the IG code will be returned here
      console.info("code : ", code);
    }
  }, [response]);



  return (
      <View>
        <TouchableOpacity onPress = { () => promptAsync({useProxy,windowFeatures: { width: 700, height: 600 }}) }>
          <Text>Connect Your Instagram</Text>
        </TouchableOpacity>
      </View>
  )
}

export default GetInstagram;