Wallet Discovery

ブロックチェーン上でユーザーが利用できるすべてのウォレットを把握することは困難です。FCLのディスカバリーメカニズムは、Flow対応のウォレットとのインテグレーションの負担を大幅に軽減し、開発者がdappの開発に集中できるようにして、ユーザーに可能な限り多くのオプションを提供することができます。

アプリがディスカバリーを利用するには方法が2つあります。

1. iFrame、ポップアップ、またはタブを通じて表示することができるUIバージョン。
2. fcl.discovery.authnメソッドを使ってあなたのコード内で直接認証サービスにアクセスできるAPIバージョン。このメソッドについては後述します。

UI Version

Discovery UI を使って FCL 経由で認証を行う時には、ユーザーにログインに使用できるウォレットサービスの一覧が表示されます。

このメソッドは、ディスカバリーとそのウォレットサービスをあなたのアプリに統合する、最も簡単な方法です。あなたがしないといけないのはdiscovery.walletに対してtestnetかmainnetのホストエンドポイントを設定するだけです。

Note：LedgerやDapper Walletなどのオプトインウォレットを使用するには、明示的にその旨を指定する必要があります。オプトインウォレットの追加に関する情報は、こちらのドキュメントを参照してください。

import { config } from '@onflow/fcl';

config({
  'accessNode.api': 'https://rest-testnet.onflow.org',
  'discovery.wallet': 'https://fcl-discovery.onflow.org/testnet/authn',
});

fcl.authenticateを呼び出す時にはいつも、ユーザーにこの画面が表示されます。

デフォルトの表示をiFrameからポップアップまたはタブに変更するには、discovery.wallet.methodに対してPOP/RPC（ポップアップとして開く）またはTAB/RPC（新しいタブで開く）に設定します。このメソッドの関するより詳しい情報はこちらをご覧ください。

Branding Discovery UI

0.0.79-alpha.4のバージョンより、dappsはFCLのコンフィグに少し設定するだけで、ディスカバリーUIにアプリのタイトルとアイコンを表示できるようになりました。このブランディングはユーザーにより明確な意図を認証前に示しており、信頼性を高めることができます。

あなたがしないといけないのはapp.detail.iconとapp.detail.titleに対してこのようにセットするだけです。

import { config } from '@onflow/fcl';

config({
  'app.detail.icon': 'https://placekitten.com/g/200/200',
  'app.detail.title': 'Kitten Dapp',
});

Note：もしこれらの設定オプションが設定されていない場合、ディスカバリーAPIは、ユーザーのログイン認証を試みる際に、デフォルトのアイコンおよび"Unknown App(不明なアプリ)"というアプリタイトルを表示します。本番稼働前には、これらの値を正しくセットすることを強くお勧めします。

API Version

ウォレット認証のUIをより制御したい場合には、ディスカバリーを直接、fcl経由でコードに載せるDiscovery APIがシンプルに利用可能です。

セットアップは依然としてDiscoveryのエンドポイントの設定を必要としますが、APIを使用する時は以下のように、discovery.authn.endpointに対してセットします。

import { config } from '@onflow/fcl';

config({
  'accessNode.api': 'https://rest-testnet.onflow.org',
  'discovery.authn.endpoint':
    'https://fcl-discovery.onflow.org/api/testnet/authn',
});

fcl.discoveryからあなたのDapp内のウォレットのサービスにアクセスできます。

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

fcl.discovery.authn.subscribe(callback);

// OR

fcl.discovery.authn.snapshot();

ウォレットのサービスを使って認証を行うには（例えば、ユーザーが"ログイン"をクリックしたとき）、選択したサービスをfcl.authenticateメソッドに渡します。これはAPIリファレンスのここに説明されています。

fcl.authenticate({ service });

シンプルなReactコンポーネントの場合には、このような形になるかもしれません。

import './config';
import { useState, useEffect } from 'react';
import * as fcl from '@onflow/fcl';

function Component() {
  const [services, setServices] = useState([]);
  useEffect(
    () => fcl.discovery.authn.subscribe((res) => setServices(res.results)),
    [],
  );

  return (
    <div>
      {services.map((service) => (
        <button
          key={service.provider.address}
          onClick={() => fcl.authenticate({ service })}
        >
          Login with {service.provider.name}
        </button>
      ))}
    </div>
  );
}

UIに役立ちそうなフィールドは、providerオブジェクト内で見つかります。フィールドは以下を含みます。

{
  ...,
  "provider": {
    "address": "0xf086a545ce3c552d",
      "name": "Blocto",
      "icon": "/images/blocto.png",
      "description": "Your entrance to the blockchain world.",
      "color": "#afd8f7",
      "supportEmail": "[e-mail]",
      "authn_endpoint": "https://flow-wallet-testnet.blocto.app/authn",
      "website": "https://blocto.portto.io"
    }
}

Network Configuration

Discovery UI URLs

Environment	Example
Mainnet	https://fcl-discovery.onflow.org/authn
Testnet	https://fcl-discovery.onflow.org/testnet/authn
Local	https://fcl-discovery.onflow.org/local/authn

Discovery API Endpoints

Environment	Example
Mainnet	https://fcl-discovery.onflow.org/api/authn
Testnet	https://fcl-discovery.onflow.org/api/testnet/authn
Local	https://fcl-discovery.onflow.org/api/local/authn

Note：Localは、ローカルでの開発用のエミュレータ上でDev Walletをデフォルトポート8701で返します。もしあなたが、このデフォルトポートを上書きしたい場合は、?port=0000を上書きしたいポート番号で追加します。

Other Configuration

Note：DiscoveryのUIとAPIの両バージョンで設定が可能です。

Include Opt-In Wallets

Starting in FCL v0.0.78-alpha.10

オプトインのウォレットは、認証や承認、ユーザーによる署名をサポートしていません。もしくは、限られた種類のトランザクションのみをサポートしています。

FCLからオプトインのウォレットを含めるには：

import * as fcl from "@onflow/fcl"

fcl.config({
  "discovery.wallet": "https://fcl-discovery.onflow.org/testnet/authn",
  "discovery.authn.endpoint": "https://fcl-discovery.onflow.org/api/testnet/authn",
  "discovery.authn.include": ["0x123"] // Service account address
})

Opt-In Wallet Addresses on Testnet and Mainnet

Service	Testnet	Mainnet
Dapper Wallet	0x82ec283f88a62e65	0xead892083b3e2c6c
Ledger	0x9d2e44203cb13051	0xe5cd26afebe62781

その他の設定についてさらに詳しく知りたい場合は、以下のリンクをご確認ください。

• Discovery API Docs
• Discovery Github Repo

Last updated on Nov 20, 2024 by Chase Fleming

翻訳元

---

Previous << How to Configure FCL

Flow BlockchainのCadence version1.0ドキュメント (Wallet Discovery)

Next >> Installation