#create-react-app #auth0 #plaid
Вопрос:
Я начал проект некоторое время назад и в последнее время был занят, поэтому я не мог работать над ним. Я не практиковался в веб-разработке, потому что недавно поступил на военную службу. Прямо сейчас проект состоит из приложения create-react-app с интегрированным auth0. То, что я пытаюсь сделать, — это интегрировать ссылку plaid на страницу, которую она ведет после входа в систему с помощью auth0. Я прошу помощи в том, какой код из документов plaid я использую для того, чтобы это работало. Их документация немного сбивает меня с толку, может быть, потому, что я так отвык от практики. Любая помощь была бы очень-очень признательна.
Ответ №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;