【クソアプリ】パスワードレス新時代のためのパスアニマルさん認証を作る

この記事は「クソアプリ Advent Calendar 2024 その２」の９日目の記事です。

https://qiita.com/advent-calendar/2024/kuso-app

# パスアニマルさん認証とは

https://v0-pass-animal-san-goosys-projects-d0c64afa.vercel.app/?ogp

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/93258892-26e8-45d9-9c76-0d1326f79e16.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/7452f3e7-b5ca-f9c0-2e44-ca31fb076bd8.png)

パスアニマルさん認証とは、
以下のような指示を与えたAIによって、自然言語のパスワードフレーズからパスワード平文となる動物絵文字の組み合わせを推測してもらって認証する全く新しい（AIの無駄遣いな）認証方式です。

```
あなたには自然言語のフレーズからパスワード文字列を推測して候補を出してもらいます。
パスワードはUnicodeの絵文字で、絵文字の種類は動物、魚類、虫類のみです。パスワードの桁数は4～6文字です。
以下の手順に従って、条件に合う候補を生成し、最終出力してください。

1. 入力フレーズに含まれる動物等の名前をすべて抽出します。
   - 名前が丁寧な言葉（例: さん、ちゃん、愛称）で記述されているか確認してください。
   - 呼び捨てが1つでも含まれている場合、不正とみなし、出力を一切行わないでください。

～～～以下略～～～
```

## 想定

例えば、パスワード平文となる絵文字が「🐒🦛🐊🦍🐘」だった場合、 ”**パスアニマルさん**”に「**おさるさん、カバさん、ワニさんとゴリラさんとゾウさん**」といった感じで入力すれば、AIがパスワード平文相当の絵文字の組み合わせを推測してくれて、それをパスワード平文と照合して認証OK になるイメージです。

ポイントとしては、パスワード文字列を完全一致で判定する訳ではないので、動物さんと動物さんの区切りは句読点でもスペースでもいいし「と」でもいいし、同じ動物さんが繰り返されるときは「カエルさん２匹」とかでもよい といった感じで、パスワードを完璧に覚える必要が無い認証になるかと思います。

**動物さんの呼び捨ては絶対に許さない**感じに上手くできればいいなと思っています。

# 作っていく

ざっくりとこんなイメージで作っていきます。

![パスアニマルさんアーキテクチャ.drawio (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/7d21a6bf-b2ca-9625-bde2-759961cc4273.png)

## Amazon Bedrock - Prompt

Bedrockで日本語の使えるモデルを適当に選んで、プロンプトを作っていきます。
プロンプトの修正はChatGPTにも手伝ってもらって、なんかいい感じの出力になるまで調整していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/ff08dc8e-b994-b7dd-fb1f-0092cc5a22c8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/10897ba9-df31-022a-25b5-040c79fd76e7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/21f208a9-64b2-1b7a-543e-939632467d0d.png)

### プロンプト

最終的に以下のような感じになりました。

```
あなたには自然言語のフレーズからパスワード文字列を推測して候補を出してもらいます。
パスワードはUnicodeの絵文字で、絵文字の種類は動物、魚類、虫類のみです。パスワードの桁数は4～6文字です。
以下の手順に従って、条件に合う候補を生成し、最終出力してください。

1. 入力フレーズに含まれる動物等の名前をすべて抽出します。
   - 名前が丁寧な言葉（例: さん、ちゃん、愛称）で記述されているか確認してください。
   - 呼び捨てが1つでも含まれている場合、不正とみなし、出力を一切行わないでください。

2. 絵文字候補を生成します。
   - 抽出した動物名に対応する絵文字の組み合わせ（配列）を１候補とし、少なくとも10個の候補を生成してください。
   - 動物名1つに複数の対応絵文字がある場合、それらをすべて組み合わせて生成してください。

3. セルフチェックを行い、3候補まで絞り込んでください。
   - 絵文字候補から動物名を日本語で取り出し、以下を確認します:
     - 動物名の順序と個数が入力フレーズと一致しているか
     - 名前がすべて丁寧な言葉であるか
   - 条件を満たさない候補は除外してください。

出力:  
条件を満たす場合は、一致度が高い候補を５つまで選び、絵文字のみを改行で区切って出力してください。  
条件を満たさない場合は、何も出力しないでください（空白行やエラーメッセージも含めて一切出力しないこと）。

ユーザーの入力: {{user_input}}
```

## Amazon Bedrock - Flow

プロンプトを外部から実行しやすくするため、Flowに登録します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/786e66a9-6acc-c18f-2be5-fb334b3dc7dc.png)

## AWS Lambda

想定外なことに、
FlowをAWS CLIから実行する手段がまだないようで、あるのはPython SDKから実行することだけ？のような感じだったので、Flowの実行はLambdaでラップします。

参考：
https://docs.aws.amazon.com/ja_jp/bedrock/latest/userguide/flows-code-ex.html#:~:text=flow_id%2C%20aliasIdentifier%3Dflow_alias_id)-,%E6%AC%A1%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6,-Amazon%20Bedrock%20Agents

## v0 + Vercel

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/7ebdda01-c1c0-899e-8872-3d7ed3dd3245.png)

あとは**v0に課金して**、がしがしと作っていきます。
偉そうに指示してるだけでどんどん出来ていってとてもすごいですね。

バックエンドの処理も作ってもらって、invoke Lambda用のアクセスキーなどをVercelに登録して、OGPなんかも軽く作ってもらって、完成です。 :raised_hands: 


# できたもの

https://v0-pass-animal-san-goosys-projects-d0c64afa.vercel.app/?ogp

## 遊び方

以下のユーザー名とパスワードの組み合わせが正解となります。ユーザー名を選択して、対応するパスワードをパスアニマルさんで入力してログインしてみてください。

| ユーザー名 | パスワード | パスアニマルさん例 |
| -- | -- | -- |
| クマ太郎 | 🐢🐸🐰🦍🐼🦁 | カメさん カエルさん ウサギさん ゴリラさん パンダさん ライオンさん |
| ウサギ花子 | 🐘🦒🦁🐯 | ゾウさん、キリンさん、ライオンさんとトラさん |
| パンダ次郎 | 🐧🦊🐼🦘🐨 | ペンギンさん、キツネさん、パンダさん、カンガルーさん、コアラさん  |
| キリン美香 | 🦜🦓🦘🦛🦏 | 赤い鳥さん、シマウマさん、カンガルーさん、カバさん、サイさん |
| ゾウ一郎 | 🐒🦛🐊🦍🐘 | おさるさん、カバさん、ワニさん、ゴリラさん、ゾウさん |
| ペンギンマリー | 🐬🐬🐬🦈🦈🐙 | イルカさん３匹、サメさん２匹、タコさん |
| いぬ三郎 | 🐶🐘🐶🐱 | わんちゃん、ゾウさん、わんこ、にゃんこ |

認証が成功すると「ようこそ」が表示されます。おめでとうございます。新時代のパスワードレス認証へようこそ🤝

## 費用

v0に課金をしたので＄20と、Bedrockでプロンプト作るのに何日か使ったので＄0.22程使ったみたいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64098/6be05199-eaa8-2e8c-d5ba-38bc0f12795b.png)

（Marketplaceからの請求初めて見たので記念スクショ）

# クソアプリポイント :bulb: 

**とても不安定な判定**なため、一度失敗しても同じフレーズでもう一度やってみると成功したりします。

また、ひとつの動物名に複数の絵文字が存在することがありますが、正解の絵文字は１種類しか指定していないため、それに一致しない限り認証できないということにもなります。
また、おそらくですが、 **AIが知らない絵文字**があるようで、何度入れても認証しないこともあります。（カバさんが一生出てきません）

# AIの進化がすごい

今回、ローカル環境一切作らずにブラウザだけで全て作れてしまいました。ソースコード管理もなしでデプロイまで終わってます。すごい。
Bedrock、Lambda、Amazon Q、ChatGPT、v0、Vercel・・・どれもすごいですね。あとはAmazon Qが日本語しゃべってくれれば最高なんですけどね。


# おわり

プロンプトもっとこうしたら良いよ！みたいなことあれば是非コメントお願いします！