Wallet Discovery

[Previous << How to Configure FCL](https://qiita.com/flowcadence/items/b85a6df60a980c8e1dc1)
[Next >> Installation](https://qiita.com/flowcadence/items/fd60e5c15a0626c2adf2)

https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#reference-2020832ebee1810a325a


<h1>Wallet Discovery</h1>

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

アプリがディスカバリーを利用するには方法が2つあります。 
1. iFrame、ポップアップ、またはタブを通じて表示することができる**UIバージョン**。
2. `fcl.discovery.authn`メソッドを使ってあなたのコード内で直接認証サービスにアクセスできる**APIバージョン**。このメソッドについては後述します。
 
<h1>UI Version</h1>

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3912821/f51b6abf-5672-4410-82b7-55b93ad4ae67.png)

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

> **Note**：LedgerやDapper Walletなどのオプトインウォレットを使用するには、明示的にその旨を指定する必要があります。オプトインウォレットの追加に関する情報は、[こちらのドキュメントを参照してください](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de#authn)。

```ruby
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`（新しいタブで開く）に設定します。このメソッドの関するより詳しい情報は[こちらをご覧ください](https://github.com/onflow/fcl-js/blob/9bce741d3b32fde18b07084b62ea15f9bbdb85bc/packages/fcl/src/wallet-provider-spec/draft-v3.md)。

<h3>Branding Discovery UI</h3>

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

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

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

config({
  'app.detail.icon': 'https://placekitten.com/g/200/200',
  'app.detail.title': 'Kitten Dapp',
});
```
**Note**：もしこれらの設定オプションが設定されていない場合、ディスカバリーAPIは、ユーザーのログイン認証を試みる際に、デフォルトのアイコンおよび"Unknown App(不明なアプリ)"というアプリタイトルを表示します。本番稼働前には、これらの値を正しくセットすることを強くお勧めします。

<h1>API Version</h1>

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

セットアップは依然としてDiscoveryのエンドポイントの設定を必要としますが、APIを使用する時は以下のように、`discovery.authn.endpoint`に対してセットします。
```ruby
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内のウォレットのサービスにアクセスできます。
```ruby
import * as fcl from '@onflow/fcl';

fcl.discovery.authn.subscribe(callback);

/* OR */

fcl.discovery.authn.snapshot();
```
ウォレットのサービスを使って認証を行うには（例えば、ユーザーが"ログイン"をクリックしたとき）、選択したサービスを`fcl.authenticate`メソッドに渡します。これは[APIリファレンスのここ](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de#authenticate)に説明されています。
```ruby
fcl.authenticate({ service });
```
シンプルなReactコンポーネントの場合には、このような形になるかもしれません。
```ruby
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`オブジェクト内で見つかります。フィールドは以下を含みます。
```ruby
{
  ...,
  "provider": {
    "address": "0xf086a545ce3c552d",
      "name": "Blocto",
      "icon": "/images/blocto.png",
      "description": "Your entrance to the blockchain world.",
      "color": "#afd8f7",
      "supportEmail": "support@blocto.app",
      "authn_endpoint": "https://flow-wallet-testnet.blocto.app/authn",
      "website": "https://blocto.portto.io"
    }
}
```

<h1>Network Configuration</h1>

<h3>Discovery UI URLs</h3>

| 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` |

<h3>Discovery API Endpoints</h3>

| 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](https://github.com/onflow/fcl-dev-wallet)をデフォルトポート8701で返します。もしあなたが、このデフォルトポートを上書きしたい場合は、?port=0000を上書きしたいポート番号で追加します。

<h1>Other Configuration</h1>

> Note：DiscoveryのUIとAPIの両バージョンで設定が可能です。
<h3>Include Opt-In Wallets</h3>

**Starting in FCL v0.0.78-alpha.10**

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

FCLからオプトインのウォレットを含めるには：
```ruby
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](https://qiita.com/flowcadence/items/82c4e2d91df09051b1de#discovery)
* [Discovery Github Repo](https://github.com/onflow/fcl-discovery)

*Last updated on **Nov 20, 2024** by **Chase Fleming***

翻訳元

https://developers.flow.com/tools/clients/fcl-js/discovery

***
<b>[Previous << How to Configure FCL](https://qiita.com/flowcadence/items/b85a6df60a980c8e1dc1)
</b>

[Flow blockchain / Cadence version1.0ドキュメント](https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a) (Wallet Discovery)

<b>[Next >> Installation](https://qiita.com/flowcadence/items/fd60e5c15a0626c2adf2)</b>