Plaid：如何在前端（Ionic/angular）创建公共令牌并发送到服务器

Question

I am follow this tutorial in order to get a transactions/accounts detail from the plaid API. Plaid'd quickstart guide user ejs in order to send to the server with the onSuccess function. How do I create this token using ionic?

Plaid quick guide also suggests that we use code blow

var linkHandler = Plaid.create({
  env: 'sandbox',
  clientName: 'Client Name',
  key: '<PUBLIC_KEY>',
  product: ['auth', 'transactions'],
  token: '<GENERATED_PUBLIC_TOKEN>',
  onSuccess: function(public_token, metadata) {
    // You do not need to repeat the /item/public_token/exchange
    // process when a user uses Link in update mode.
    // The Item's access_token has not changed.
  },

and also suggest to use this code

// Create a public_token for use with Plaid Link's update mode
client.createPublicToken(ACCESS_TOKEN, (err, result) => {
  // Handle err
  // Use the generated public_token to initialize Plaid Link in update
  // mode for a user's Item so that they can provide updated credentials
  // or MFA information
  const publicToken = result.public_token;
});

in order to create a public token and get the access token. I can't use this function because I'm getting an error 'Plaid and/or client is not defined

How do I create this public token using Ionic front end and node back end?

What's the workflow here?

Thanks in advance

Answer 1

An Angular library was recently created: click here and here

I had some issues implementing Plaid successfully at first; these tips should help:

1. Implement the library as shown in the second link above. Make sure for step two you import in your app.module.ts file. Don't use the jQuery provided in the documentation.
2. Using this library, a button will be automatically created within the Angular element <mr-ngx-plaid-link-button> . This button will act as a submit button unless you use DOM or other methods to change it to type button on ngAfterViewInit()
3. All five events in step three are listeners for various events. The onSuccess() callback will return the public token - only after you have (a) successfully submitted bank credentials (user_good / pass_good on Sandbox) and (b) clicked the Continue button to exit the Plaid Link

Answer 2

On the server side, you'll need to initialize the Plaid node client library first. You will also want to make an exchange token call, to exchange the public_token from Link for an API access_token . You'll then save the access_token and use it to retrieve transaction and account data:

// Initialize the Plaid API client with your API keys (https://dashboard.plaid.com/account/keys)
// Use plaid.environments.production, plaid.environments.development, or plaid.environments.sandbox
const plaid = require('plaid');
const client = new plaid.Client(client_id, secret, public_key, plaid.environments.sandbox);
client.exchangePublicToken(PUBLIC_TOKEN, function(error, tokenResponse) {
  if (error != null) {
    var msg = 'Could not exchange public_token!';
    console.log(msg + '\n' + error);
  }
  const ACCESS_TOKEN = tokenResponse.access_token;
  const ITEM_ID = tokenResponse.item_id;
  console.log('Access Token: ' + ACCESS_TOKEN);
  console.log('Item ID: ' + ITEM_ID);
  // Now retrieve transactions or account information with the access_token
});

For the client-side in your Ionic app, you'll need to include the link-initialize.js script before calling Plaid.create . Specifically:

<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js">
</script>

Here's a full client-side HTML example:

<button id="link-button">Link Account</button>

<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
var handler = Plaid.create({
  clientName: 'Plaid Walkthrough Demo',
  env: 'sandbox',
  key: '[PUBLIC_KEY]', // public_key is at https://dashboard.plaid.com/account/keys
  product: ['auth'],
  onLoad: function() {
    // Optional, called when Link loads
  },
  onSuccess: function(public_token, metadata) {
    // Send the public_token to your app server.
    // The metadata object contains info about the institution the
    // user selected and the account ID, if `selectAccount` is enabled.
    $.post('/get_access_token', {
      public_token: public_token,
    });
  },
  onExit: function(err, metadata) {
    // The user exited the Link flow.      
  }
});
</script>