@atpassport/client 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +17 -1
- package/package.json +10 -3
- package/README_ja.md +0 -73
package/README.md
CHANGED
|
@@ -53,6 +53,25 @@ console.log('Authenticated User:', result.handle);
|
|
|
53
53
|
console.log('Custom Parameters:', result.customParams['redirect_uri']); // Outputs '/dashboard'
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
+
## Standard UI Texts and Icons for Integration
|
|
57
|
+
|
|
58
|
+
To make it easy for developers to build consistent "Login with @passport" buttons and dialogs, the client library exports standard texts and an SVG icon via the `AtPassportUI` constant.
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
import { AtPassportUI } from '@atpassport/client';
|
|
62
|
+
|
|
63
|
+
// English translations
|
|
64
|
+
console.log(AtPassportUI.en.title); // "Login with @passport"
|
|
65
|
+
console.log(AtPassportUI.en.description); // "@passport is a universal handle manager..."
|
|
66
|
+
|
|
67
|
+
// Japanese translations
|
|
68
|
+
console.log(AtPassportUI.ja.title); // "@passportでログイン"
|
|
69
|
+
|
|
70
|
+
// Standard Icon (SVG String matching lucide-react's TicketsPlane)
|
|
71
|
+
// Can be injected into HTML directly or using React's dangerouslySetInnerHTML
|
|
72
|
+
const svgString = AtPassportUI.iconSvg;
|
|
73
|
+
```
|
|
74
|
+
|
|
56
75
|
---
|
|
57
76
|
|
|
58
77
|
## Explained: Parameters and Placeholders
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,21 @@ export interface AtPassportOptions {
|
|
|
2
2
|
callbackUrl: string;
|
|
3
3
|
baseUrl?: string;
|
|
4
4
|
}
|
|
5
|
+
/**
|
|
6
|
+
* Standard UI texts and icons for AtPassport integration components.
|
|
7
|
+
* Useful for building "Login with @passport" buttons and explanation dialogues.
|
|
8
|
+
*/
|
|
9
|
+
export declare const AtPassportUI: {
|
|
10
|
+
ja: {
|
|
11
|
+
title: string;
|
|
12
|
+
description: string;
|
|
13
|
+
};
|
|
14
|
+
en: {
|
|
15
|
+
title: string;
|
|
16
|
+
description: string;
|
|
17
|
+
};
|
|
18
|
+
iconSvg: string;
|
|
19
|
+
};
|
|
5
20
|
/**
|
|
6
21
|
* AtPassport Client
|
|
7
22
|
*/
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,22 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.AtPassport = void 0;
|
|
3
|
+
exports.AtPassport = exports.AtPassportUI = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* Standard UI texts and icons for AtPassport integration components.
|
|
6
|
+
* Useful for building "Login with @passport" buttons and explanation dialogues.
|
|
7
|
+
*/
|
|
8
|
+
exports.AtPassportUI = {
|
|
9
|
+
ja: {
|
|
10
|
+
title: '@passportでログイン',
|
|
11
|
+
description: '@passportは、各atprotoアプリでハンドルを都度入力する手間を省ける共通ハンドルマネージャーです。',
|
|
12
|
+
},
|
|
13
|
+
en: {
|
|
14
|
+
title: 'Login with @passport',
|
|
15
|
+
description: '@passport is a universal handle manager that saves you from typing your handle repeatedly across atproto apps.',
|
|
16
|
+
},
|
|
17
|
+
// Standard icon of @passport
|
|
18
|
+
iconSvg: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><path d="M0 0 C1.00603271 0.49862549 2.01206543 0.99725098 3.04858398 1.51098633 C9.50354463 4.73352491 15.85776409 8.11600592 22.06640625 11.79296875 C25.22320998 13.17142403 27.27109898 13.31361754 30.6875 12.9375 C33.34692377 11.93078264 33.34692377 11.93078264 35.8125 10.5 C44.39149688 5.80961385 54.93299605 5.65092782 64.4765625 7.46875 C67.30025893 8.44170907 69.47770499 9.75949211 71.75 11.6875 C73.24786697 15.28238073 72.91398387 17.25804838 71.6875 20.9375 C64.45936112 26.17198344 56.15120213 29.72178707 48.125 33.5625 C46.63865234 34.27786029 45.15248876 34.99360317 43.66650391 35.7097168 C40.00468353 37.47292909 36.34028824 39.23070079 32.67462158 40.98590088 C29.85393845 42.33667861 27.03451675 43.69008397 24.21484375 45.04296875 C20.53119481 46.8087824 16.84470945 48.5684786 13.15625 50.32421875 C9.20979647 52.20454542 5.27472121 54.10705419 1.34375 56.01953125 C0.2933252 56.52830811 -0.75709961 57.03708496 -1.83935547 57.5612793 C-3.85101622 58.5360391 -5.86058953 59.51512305 -7.86767578 60.49926758 C-8.7698584 60.9352124 -9.67204102 61.37115723 -10.6015625 61.8203125 C-11.39256348 62.20590332 -12.18356445 62.59149414 -12.99853516 62.98876953 C-18.69655659 65.32497034 -24.93973187 66.1163829 -30.8046875 64.06640625 C-36.77818223 61.29753711 -40.99709022 57.8491842 -45.3125 52.9375 C-45.95574219 52.24914062 -46.59898438 51.56078125 -47.26171875 50.8515625 C-52.60665079 45.01875634 -52.60665079 45.01875634 -53.3125 40.9375 C-52.02153219 40.12389005 -50.72970125 39.31164954 -49.4375 38.5 C-48.71820313 38.04753906 -47.99890625 37.59507813 -47.2578125 37.12890625 C-43.69384751 34.94615661 -41.53339247 34.60454125 -37.3125 34.9375 C-34.4174913 36.34027809 -31.80933835 38.00200329 -29.09375 39.72265625 C-25.47208494 41.30459141 -24.09817419 41.09398281 -20.3125 39.9375 C-16.93903332 38.39431066 -13.6905649 36.65585707 -10.4375 34.875 C-9.11878906 34.16633789 -9.11878906 34.16633789 -7.7734375 33.44335938 C-5.61554476 32.28231926 -3.46222292 31.11357732 -1.3125 29.9375 C-3.633586 26.93434048 -5.90316611 24.24970514 -8.8125 21.8125 C-12.97631948 18.25801995 -17.00199328 14.57130664 -21.01171875 10.84521484 C-24.01392816 8.07156459 -27.09072195 5.45248945 -30.3125 2.9375 C-30.3125 0.625 -30.3125 0.625 -29.3125 -2.0625 C-18.83736309 -7.58575401 -10.05422044 -5.19348714 0 0 Z\" fill=\"#58A7F6\" transform=\"translate(54.3125,21.0625)\"/><path d=\"M0 0 C1.04328461 -0.00281982 2.08656921 -0.00563965 3.16146851 -0.00854492 C4.31579376 -0.00652069 5.47011902 -0.00449646 6.65942383 -0.00241089 C7.86740631 -0.00416321 9.07538879 -0.00591553 10.31997681 -0.00772095 C13.64221462 -0.01137913 16.96439051 -0.01050604 20.28662491 -0.00734186 C23.75618831 -0.00481787 27.22574899 -0.00715591 30.6953125 -0.00872803 C36.5228727 -0.01054961 42.35042024 -0.00814371 48.17797852 -0.00338745 C54.924568 0.00205515 61.67112727 0.00029249 68.41771603 -0.00521386 C74.20029682 -0.00974531 79.98286849 -0.01039538 85.76545048 -0.00777519 C89.22347064 -0.00621259 92.68147659 -0.00601817 96.13949585 -0.00931168 C99.99250471 -0.01272475 103.84547947 -0.00800012 107.69848633 -0.00241089 C109.42997421 -0.00544724 109.42997421 -0.00544724 111.19644165 -0.00854492 C112.76136856 -0.00431519 112.76136856 -0.00431519 114.35791016 0 C115.27010818 0.00037703 116.18230621 0.00075405 117.12214661 0.0011425 C119.17895508 0.12698364 119.17895508 0.12698364 120.17895508 1.12698364 C120.27769324 3.12497936 120.30867307 5.12655523 120.30395508 7.12698364 C120.30782227 8.76667114 120.30782227 8.76667114 120.31176758 10.43948364 C120.17895508 13.12698364 120.17895508 13.12698364 119.17895508 14.12698364 C117.57438317 14.22515572 115.96548234 14.25330285 114.35791016 14.25396729 C113.31462555 14.25678711 112.27134094 14.25960693 111.19644165 14.26251221 C110.04211639 14.26048798 108.88779114 14.25846375 107.69848633 14.25637817 C106.49050385 14.25813049 105.28252136 14.25988281 104.03793335 14.26168823 C100.71569554 14.26534642 97.39351965 14.26447332 94.07128525 14.26130915 C90.60172184 14.25878516 87.13216116 14.26112319 83.66259766 14.26269531 C77.83503746 14.2645169 72.00748992 14.262111 66.17993164 14.25735474 C59.43334215 14.25191213 52.68678288 14.2536748 45.94019413 14.25918114 C40.15761334 14.26371259 34.37504167 14.26436266 28.59245968 14.26174247 C25.13443951 14.26017987 21.67643357 14.25998546 18.21841431 14.26327896 C14.36540544 14.26669203 10.51243068 14.26196741 6.65942383 14.25637817 C4.92793594 14.25941452 4.92793594 14.25941452 3.16146851 14.26251221 C1.5965416 14.25828247 1.5965416 14.25828247 0 14.25396729 C-0.91219803 14.25359026 -1.82439606 14.25321323 -2.76423645 14.25282478 C-4.82104492 14.12698364 -4.82104492 14.12698364 -5.82104492 13.12698364 C-5.91978308 11.12898793 -5.95076291 9.12741206 -5.94604492 7.12698364 C-5.94862305 6.03385864 -5.95120117 4.94073364 -5.95385742 3.81448364 C-5.73044919 -0.70624765 -4.06710478 0.001681 0 0 Z\" fill=\"#59A7F6\" transform=\"translate(6.821044921875,97.87301635742188)\"/></svg>',
|
|
19
|
+
};
|
|
4
20
|
/**
|
|
5
21
|
* AtPassport Client
|
|
6
22
|
*/
|
package/package.json
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atpassport/client",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
|
+
"description": "AtPassport client library for integrating secure handle input assist into applications.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"atproto",
|
|
7
|
+
"bluesky",
|
|
8
|
+
"handle-manager"
|
|
9
|
+
],
|
|
10
|
+
"author": "usounds.work",
|
|
11
|
+
"license": "MIT",
|
|
4
12
|
"main": "dist/index.js",
|
|
5
13
|
"types": "dist/index.d.ts",
|
|
6
14
|
"files": [
|
|
7
15
|
"dist",
|
|
8
|
-
"README.md"
|
|
9
|
-
"README_ja.md"
|
|
16
|
+
"README.md"
|
|
10
17
|
],
|
|
11
18
|
"publishConfig": {
|
|
12
19
|
"access": "public"
|
package/README_ja.md
DELETED
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
# @atpassport/client
|
|
2
|
-
|
|
3
|
-
[@passport](https://atpassport.net) は、atproto エコシステム向けの認証プロバイダーです。
|
|
4
|
-
このクライアントライブラリを使うことで、あなたのアプリケーション(ブラウザ拡張機能やWebアプリ)に、@passport を利用した「ハンドル入力のアシスト機能」を簡単に組み込むことができます。
|
|
5
|
-
|
|
6
|
-
*For the English documentation, please see [README.md](./README.md).*
|
|
7
|
-
|
|
8
|
-
## 特徴
|
|
9
|
-
- 依存関係ゼロ(Zero dependencies)
|
|
10
|
-
- OAuthライクなセキュアな連携フロー(CSRF対策のための `atpstate` 対応)
|
|
11
|
-
- 複数のカスタムパラメータの引き回し(コールバックに付与したパラメータが自動で返却されます)
|
|
12
|
-
|
|
13
|
-
## インストール
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install @atpassport/client
|
|
17
|
-
# or
|
|
18
|
-
pnpm add @atpassport/client
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## 使い方
|
|
22
|
-
|
|
23
|
-
```typescript
|
|
24
|
-
import { AtPassport } from '@atpassport/client';
|
|
25
|
-
|
|
26
|
-
// 1. クライアントの初期化
|
|
27
|
-
const passport = new AtPassport({
|
|
28
|
-
callbackUrl: 'https://myapp.com/oauth/login' // 必須: 認証後に戻ってくるURL
|
|
29
|
-
});
|
|
30
|
-
|
|
31
|
-
// 2. (任意)認証URLの生成とリダイレクト
|
|
32
|
-
// カスタムパラメータ(例: ログイン後に元いたページに戻すための redirect_uri など)を指定できます
|
|
33
|
-
const { url, atpstate } = passport.generateAuthUrl({
|
|
34
|
-
redirect_uri: '/dashboard'
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
// 3.(任意)セキュリティのため、発行された atpstate をセッションや sessionStorage 等に保存します
|
|
38
|
-
sessionStorage.setItem('atpstate', atpstate);
|
|
39
|
-
|
|
40
|
-
// 4. @passport のハンドル選択画面へリダイレクト
|
|
41
|
-
window.location.assign(url);
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
```typescript
|
|
45
|
-
// コールバック先 (https://myapp.com/oauth/callback) でのパラメータ受け取り
|
|
46
|
-
// (任意)保存していた atpstate を第2引数に渡すことで、状態が不一致(CSRFの疑い)の場合はエラー(例外)が発生します
|
|
47
|
-
const savedState = sessionStorage.getItem('atpstate');
|
|
48
|
-
const result = passport.parseCallback(window.location.href, savedState);
|
|
49
|
-
|
|
50
|
-
console.log('ログイン成功:', result);
|
|
51
|
-
console.log('認証ユーザー:', result.handle);
|
|
52
|
-
console.log('カスタムパラメータ:', result.customParams['redirect_uri']); // '/dashboard' が取れる
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
---
|
|
56
|
-
|
|
57
|
-
## パラメータ・プレースホルダーの解説
|
|
58
|
-
|
|
59
|
-
@passport からコールバック URL にリダイレクトされる際、以下の情報が URL パラメータとして付与されます。
|
|
60
|
-
|
|
61
|
-
### 基本パラメータ(`parseCallback` で自動取得されるもの)
|
|
62
|
-
- **`handle`**: 認証されたユーザーの Bluesky / atproto ハンドル名(例: `alice.bsky.social`)
|
|
63
|
-
- **`did`**: ユーザーの分散型識別子(DID)。(例: `did:plc:xxxxxxxx`。ハンドルの解決やPDSとの通信に利用します)
|
|
64
|
-
- **`pdsurl`**: ユーザーのデータが保存されている PDS (Personal Data Server) のエンドポイント URL。
|
|
65
|
-
- **`atpstate`**: `generateAuthUrl()` で自動生成された CSRF 防止用のステート文字列。リクエスト元の検証に用います。
|
|
66
|
-
|
|
67
|
-
### `{handle}` などのプレースホルダー置換機能
|
|
68
|
-
特定のエンドポイントを利用した連携や、組み込み先のクライアント実装次第では、`callbackUrl` 内に `{handle}` や `{did}` といった文字列(プレースホルダー)を含めておくことで、認証完了時に @passport 側でユーザーの実際のハンドルや DID に**動的に文字列置換**されてリダイレクトされる機能があります。
|
|
69
|
-
|
|
70
|
-
**例:**
|
|
71
|
-
`callbackUrl` を `https://myapp.com/login?handle={handle}` にして @passport へ送ると、完了時に `https://myapp.com/login?handle=alice.bsky.social` として戻ってきます。
|
|
72
|
-
|
|
73
|
-
※ `@atpassport/client` を使った標準の `generateAuthUrl` → `parseCallback` フローでは、@passport はプレースホルダー置換ではなく、安全に `&handle=...` のように標準的なクエリパラメータとして追記する形を採っているため、意識せずに `parseCallback()` だけで全ての情報を簡単に安全に受け取ることができます。
|