Flow Client Library (FCL)

Last updated at 2024-11-29Posted at 2024-11-26

Flow Client Library (FCL) JS は、ユーザーのウォレットとFlowブロックチェーンとのやり取りに使用されるパッケージです。FCLを認証で使用する時、dappはユーザーとすべてのFCL対応ウォレットのサポートを、dappのソースコード変更やカスタム統合なしにできます。

これは、Flowブロックチェーンに接続するアプリケーションの開発を簡単かつ安全に行うために作成されました。これは、ウォレット・アプリケーション・ユーザー間の標準化された通信のパターンを定義しており、これによりあなたのdappでさまざまなアクションを実行することができます。FCLはまた、Flowブロックチェーンとやりとりするためのフル装備のSDKとユーティリティも提供しています。

FCLそれ自体はコンセプトや標準なのですが、FCL JSはFCLのJavaScript実装であり、ブラウザおよびサーバー環境の両方で使用できます。ウォレットプロバイダーと接続・通信に関するすべての機能はブラウザに限定されています。（補足: バックエンド環境ではウォレットプロバイダーとは接続しません）また私たちは、iOSのためのFCL Swift実装も用意しています。@lmcmzによるFCL Swiftを参照してください。

Getting Started

Requirements

Node version v12.0.0 or higher.

Installation

FCL JS をアプリケーションで使用するには、yarn または npm を使用してインストールします。

npm i -S @onflow/fcl

yarn add @onflow/fcl

Importing
ES6

import * as fcl from "@onflow/fcl";

Node.js

const fcl = require("@onflow/fcl");

FCL for Dapps

Wallet Interactions

Wallet Discovery and Sign-up/Login ：簡単にユーザーをオンボード化。複数のウォレットをサポートする必要はありません。どのFCL対応のウォレットでもユーザー認証できます。

// in the browser
import * as fcl from "@onflow/fcl"

fcl.config({
  "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn", // Endpoint set to Testnet
})

fcl.authenticate()

スマートコントラクトとのやりとり : ユーザーが選んだウォレット経由でトランザクションを承認できます。
ウォレットアドレス所有の証明 : ユーザーがデータを署名・検証できます。

ウォレットとのやり取りについて、さらに詳しく学ぶ >

Blockchain Interactions

Query the chain : 任意の Cadence スクリプトをチェーンに送信し、デコードされた値を受け取ることができます。

import * as fcl from "@onflow/fcl";

const result = await fcl.query({
  cadence: `
    access(all) fun main(a: Int, b: Int, addr: Address): Int {
      log(addr)
      return a + b
    }
  `,
  args: (arg, t) => [
    arg(7, t.Int), // a: Int
    arg(6, t.Int), // b: Int
    arg("0xba1132bc08f82fe2", t.Address), // addr: Address
  ],
});
console.log(result); // 13

Mutate the chain : あなたの署名で任意のトランザクションを送信したり、ユーザーのウォレット経由でトランザクションを送信して、チェーン上の状態(state)変更を実行することができます。

import * as fcl from "@onflow/fcl";
// in the browser, FCL will automatically connect to the user's wallet to request signatures to run the transaction
const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: auth(BorrowValue) &Account) {
        account.storage.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg("myName", t.String)],
});

チェーン上のやり取りについてさらに詳しく学ぶ >

ユーティリティー

Get account details from any Flow address
Get the latest block
Transaction status polling
Event polling
Custom authorization functions

ユーティリティについてさらに詳しく学ぶ >

Next Steps

See the Flow App Quick Start.

See the full API Reference for all FCL functionality.

Learn Flow's smart contract language to build any script or transactions: Cadence.

Explore all of Flow docs and tools.

FCL for Wallet Providers

Flowのウォレットプロバイダーは、さまざまな方法でユーザー・インタラクションおよびUIを構築することができる柔軟性を持ちます。

Iframe、ポップアップ、タブ、またはエクステンションによるFront channel communication
HTTPによるBack channel communication

FCLはcommunication channelに依存しないカストディアン型および非カストディアン型のウォレットを作成するように設定されています。これにより、ユーザーはアプリやブラウザ拡張機能をダウンロードすることなく、ウォレットプロバイダーとやりとりすることができます。

コミュニケーションチャンネルでは、事前定義されたFCLメッセージセットに応えることにより、要求された情報をdappに送ります。FlowでFCL対応のウォレットを実装するのは、FCLが要求する応答に適切なデータを返すだけでいいので簡単です。front-channel communicationのメソッドを使用する場合、FCLも一連のウォレットユーティリティを提供して、このプロセスを簡素化します。