Получение ссылки Plaid для работы в моем приложении Create React с помощью Auth0

#create-react-app #auth0 #plaid

Вопрос:

Я начал проект некоторое время назад и в последнее время был занят, поэтому я не мог работать над ним. Я не практиковался в веб-разработке, потому что недавно поступил на военную службу. Прямо сейчас проект состоит из приложения create-react-app с интегрированным auth0. То, что я пытаюсь сделать, — это интегрировать ссылку plaid на страницу, которую она ведет после входа в систему с помощью auth0. Я прошу помощи в том, какой код из документов plaid я использую для того, чтобы это работало. Их документация немного сбивает меня с толку, может быть, потому, что я так отвык от практики. Любая помощь была бы очень-очень признательна.

https://github.com/CollinChiz/SeeMyCash

Ответ №1:

Вы взглянули на Быстрый старт в https://github.com/plaid/quickstart/? Он содержит полную реализацию React, которая делает это. Вот соответствующий отрывок:

 // APP COMPONENT
// Upon rendering of App component, make a request to create and
// obtain a link token to be used in the Link component
import React, { useEffect, useState } from 'react';
import { usePlaidLink } from 'react-plaid-link';
const App = () => {
  const [linkToken, setLinkToken] = useState(null);
  const generateToken = async () => {
    const response = await fetch('/api/create_link_token', {
      method: 'POST',
    });
    const data = await response.json();
    setLinkToken(data.link_token);
  };
  useEffect(() => {
    generateToken();
  }, []);
  return linkToken != null ? <Link linkToken={linkToken} /> : <></>;
};
// LINK COMPONENT
// Use Plaid Link and pass link token and onSuccess function
// in configuration to initialize Plaid Link
interface LinkProps {
  linkToken: string | null;
}
const Link: React.FC<LinkProps> = (props: LinkProps) => {
  const onSuccess = React.useCallback((public_token, metadata) => {
    // send public_token to server
    const response = fetch('/api/set_access_token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ public_token }),
    });
    // Handle response ...
  }, []);
  const config: Parameters<typeof usePlaidLink>[0] = {
    token: props.linkToken!,
    onSuccess,
  };
  const { open, ready } = usePlaidLink(config);
  return (
    <button onClick={() => open()} disabled={!ready}>
      Link account
    </button>
  );
};
export default App;