Internet Identity の統合

ここでは、Internet Identity を使用してプロジェクトを統合し、テストする方法を示します。Internet Identity の開発版ビルドフレーバー（Flavor）と agent-js ライブラリを使用します。

これはスタンドアローンのプロジェクトで、自分のプロジェクトにコピーすることができます。

使用方法

以下のコマンドでレプリカを起動し、開発用 Internet Identity Canister をインストールし、テストスイートを実行します：

# dfinity/internet-identity を確認後、`./demos/using-dev-build` で以下を実行します：
$ dfx start --background --clean
$ npm ci
$ dfx deploy --no-wallet --argument '(null)'

この時点で、レプリカ（実用上の意味としては Internet Computer のローカル版）が稼働し、3つの Canister がデプロイされたことになります：

internet_identity: Internet Identity の開発版（最新リリースからダウンロードできます。dfx.json を参照してください。）
webapp: この小型のWeb アプリは、Identity（アンカー）の作成と認証のために internet_identity Canister を呼び出し、次に whoami Canister（下記参照）を呼び出して Identity が有効であることを表示します。この Web アプリのソースは index.html と index.js で見ることができます。
whoami: 呼び出しが認証されているかどうかをチェックし、"呼び出し元の Principal” を返すシンプルな Canister です。実装は非常にシンプルです：
```
actor {
    public query ({caller}) func whoami() : async Principal {
        return caller;
    };
};
```
IC では Principal は、リクエストを実行する人、またはコールをする人（いわゆるコーラー）の識別子です。すべての呼び出しには有効な Principal が必要です。また、匿名呼び出し用の特別な Principal があります。Internet Identity を使用する場合、self-authenticating principals を使用することになります。これは、あなたが秘密鍵をラップトップに有している（TouchID、Windows Hello などの裏に隠れています）ことを示すための非常に凝った方法で、この秘密鍵はブラウザが署名に用いたり、あなたが確かに IC への呼び出しを行なっている人物であると証明するために使用されます。

IC が実際に whoami Canister への呼び出し（リクエスト）を通した場合、それはすべてが確認されたことを意味し、whoami Canister は IC がリクエストに追加した情報（つまりあなたの識別子（Principal））を単に返します。

Auth-Client ライブラリを使用した Internet Identity でのログイン

DFINITY では、Internet Identity でログインするための使いやすいライブラリ（agent-js）を提供しています。

以下は、ログインとCanister コールに Identity を使用するために必要な手順です：

// まず、AuthClient を作成する必要があります。
const authClient = await AuthClient.create();

// authClient.login(…) を呼び出して、Internet Identity でログインします。これでログインプロンプトで新しいタブが開きます。
// コードはログイン処理が完了するのを待つ必要があります。
// コールバック関数を直接使うか、プロミスでラップするかのどちらかです。
await new Promise((resolve, reject) => {
  authClient.login({
    onSuccess: resolve,
    onError: reject,
  });
});

ユーザーが Internet Identity で認証されると、Identity にアクセスできるようになります：

// 認証クライアントから Identity を取得します。
const identity = authClient.getIdentity();
// 認証クライアントから取得した Identity を利用して、IC と対話するためのエージェントを作成することができます。
const agent = new HttpAgent({ identity });
// Web アプリのインターフェイス記述を使って、サービスメソッドの呼び出しに使う Actor を作成します。
const webapp = Actor.createActor(webapp_idl, {
  agent,
  canisterId: webapp_id,
});
// 現在のユーザーの principal（ユーザー Identity）を返す whoami を呼び出します。
const principal = await webapp.whoami();

完全な動作例については index.js を参照してください。舞台裏で起こっていることの詳しい説明は、client auth protocol specification にあります。

Canister ID の取得

では、その Canister を使ってみましょう。詳細を気にしないならヘルパーまで読み飛ばしてください。

これらの Canister と対話するためには（例えばブラウザで Web アプリを表示するためには）、それぞれの Canister ID を把握して、 https://localhost:8000/?canisterId=<canister ID> という形式の URL を使う必要があります（ここで 8000 は dfx がレプリカへのプロキシコールに用いるポートです。このポートは通常 dfx.json で指定されています）。Canister ID は dfx コマンド の出力で確認することができます。また、 dfx の "internal" (ドキュメント化されていません) ステートで確認することができます。

~/internet-identity/demos/using-dev-build$ cat .dfx/local/canister_ids.json
{
  "__Candid_UI": {
    "local": "r7inp-6aaaa-aaaaa-aaabq-cai"
  },
  "internet_identity": {
    "local": "rwlgt-iiaaa-aaaaa-aaaaa-cai"
  },
  "webapp": {
    "local": "rrkah-fqaaa-aaaaa-aaaaq-cai"
  },
  "whoami": {
    "local": "ryjl3-tyaaa-aaaaa-aaaba-cai"
}

異なる Canister ID が表示されるかもしれません(それはそれで全く問題ありません)。webapp の Canister ID が rrkah-fqaaa-aaaaq-cai であれば、ブラウザで http://localhost:8000/?canisterId=rrkah-fqaaa-aaaaa-aaaaq-cai を指定すれば Web アプリケーションを見ることができるはずです。出来ましたか？

実際に Web アプリを使用する場合は、"Internet Identity URL” フィールドが http://localhost:8000/?canisterId=<canister ID of internet_identity canister> を指していることを確認してください

ヘルパー

Canister ID を計算し、canisterId=... クエリ・パラメータを使用することは、すべて少し面倒なことです。以下はお勧めのコマンドです：

npm run start: アプリをビルドして localhost:8080 で提供し、コード変更時にホットリロードします。
npm run proxy: Internet Identity を localhost:8086 に、Web アプリを localhost:8087 に配信するプロキシを起動し、簡単にアクセスできるようにします。
npm run test: プロキシを起動し、 internet_identity Canister に対してブラウザテストを実行します。

詳しくは、dfx.json ファイル、Genesis talk on Internet Identity および SDK documentation をご確認ください。まだ飽きてないですか？Internet Computer Specification と Internet Identity Specification をチェックしてみてください。

Internet Identity の統合

使用方法​

Auth-Client ライブラリを使用した Internet Identity でのログイン​

Canister ID の取得​

ヘルパー​

使用方法

Auth-Client ライブラリを使用した Internet Identity でのログイン

Canister ID の取得

ヘルパー