ウェブサイトに「Save in 1Password」ボタンを追加する

1Passwordマニュアル｜「Save in 1Password」ボタンを追加して、訪問者がサインイン情報を簡単に管理・保存できる方法をご紹介します。

ウェブサイトに「Save in 1Password」ボタンを追加すると、訪問者はクリックするだけでサインインの詳細、クレジットカード、住所、暗号通貨ウォレットを 1Password アカウントに簡単にSaveできます。1Passwordとの統合を設定すると、ボタンを使用して API キーをSaveすることもできます。

サイトの「Save in 1Password」ボタンはブラウザー内の 1Password と直接通信するため、暗号化されていない情報が顧客のブラウザーから送信されることはありません。

サイトにボタンを追加する

サイトにボタンを追加するには、「Save in 1Password」ボタンをインストールし、SaveリクエストをCreateし、必要な属性と値を含むボタンをファイルにインポートする必要があります。ボタンはデフォルトで無効になっています。ページが読み込まれると、1Password はボタンをチェックし、ユーザーが使用できるようにします。アイテムの URL は、該当する場合、1Passwordによって決定されるため、ログイン アイテムは、Saveされたドメインに対してのみ入力できます。

ボタン要素は、Createするアイテムの種類とそれに含まれる情報を指定します。情報は、JSON 形式の Base64 エンコードされたSave要求です。

ボタンをインストールする

開始するには、お好みのパッケージ マネージャーを使用して「Save in 1Password」ボタンをインストールします。

npm

$ npm install @1password/save-button --save-dev

Yarn

$ yarn add @1password/save-button -D

次に、パッケージを HTML ファイルにインポートします。例:

<script type="module">

import "@1password/save-button/index.js";

</script>

Build a save request

Saveリクエストには次の値が必要です:

分野	タイプ	説明
title	string	Saveするアイテムの推奨タイトル。
fields	array	配列内の各オブジェクトには次のプロパティがあります。 autocomplete(文字列): 入力するフィールドのタイプ。 value(文字列): フィールドに入力する値 。 HTML Living Standard の Autofill セクションで定義されているオートコンプリート フィールド名と値を使用します。 クリプト ウォレット アイテムのカスタム オートコンプリート フィールドは、ウォレット アドレスの場合は crypto-address、リカバリ フレーズの場合は crypto-recovery-seed です。 ログイン項目のカスタム オートコンプリート フィールドは、ワンタイム パスワード フィールドのワンタイム コードと、個別のマスクされたリカバリ コードのリカバリ コードです。
notes （オプション）	string	アイテムと一緒にSaveするメモ。これらは Markdown でフォーマットできます。

例えば：

const saveRequest = {

title: "ACME Credit Card",

fields: [

{

autocomplete: "cc-name",

value: "Wendy J. Appleseed",

},

{

autocomplete: "cc-number",

value: "4111111111111111",

},

{

autocomplete: "cc-exp",

value: "202512",

},

{

autocomplete: "cc-csc",

value: "123",

},

{

autocomplete: "cc-type",

value: "visa",

},

{

autocomplete: "street-address",

value: "512 Main Street",

},

{

autocomplete: "address-level2",

value: "Cambridge",

},

{

autocomplete: "address-level1",

value: "MA",

},

{

autocomplete: "postal-code",

value: "12345",

},

{

autocomplete: "country",

value: "US",

},

],

notes: "Plain text. You can use [Markdown](https://support.1password.com/markdown/) too.",

};

上記の例を JSON 形式の Base64 文字列にエンコードするには、組み込みencodeOPSaveRequest関数を使用します。

const encodedSaveRequest = encodeOPSaveRequest(saveRequest);

次に、結果として得られた Base64 エンコードされた文字列をコピーして、valueSave in 1Passwordボタンの属性として貼り付けます。

例:

"eyJ0aXRsZSI6IkFDTUUgQ3JlZGl0IENhcmQiLCJmaWVsZHMiOlt7ImF1dG9jb21wbGV0ZSI6ImNjLW5hbWUiLCJ2YWx1ZSI6IldlbmR5IEouIEFwcGxlc2VlZCJ9LHsiYXV0b2NvbXBsZXRlIjoiY2MtbnVtYmVyIiwidmFsdWUiOiI0MTExMTExMTExMTExMTExIn0seyJhdXRvY29tcGxldGUiOiJjYy1leHAiLCJ2YWx1ZSI6IjIwMjUxMiJ9LHsiYXV0b2NvbXBsZXRlIjoiY2MtY3NjIiwidmFsdWUiOiIxMjMifSx7ImF1dG9jb21wbGV0ZSI6ImNjLXR5cGUiLCJ2YWx1ZSI6InZpc2EifSx7ImF1dG9jb21wbGV0ZSI6InN0cmVldC1hZGRyZXNzIiwidmFsdWUiOiI1MTIgTWFpbiBTdHJlZXQifSx7ImF1dG9jb21wbGV0ZSI6ImFkZHJlc3MtbGV2ZWwyIiwidmFsdWUiOiJDYW1icmlkZ2UifSx7ImF1dG9jb21wbGV0ZSI6ImFkZHJlc3MtbGV2ZWwxIiwidmFsdWUiOiJNQSJ9LHsiYXV0b2NvbXBsZXRlIjoicG9zdGFsLWNvZGUiLCJ2YWx1ZSI6IjEyMzQ1In0seyJhdXRvY29tcGxldGUiOiJjb3VudHJ5IiwidmFsdWUiOiJVUyJ9XSwibm90ZXMiOiJQbGFpbiB0ZXh0LiBZb3UgY2FuIHVzZSBbTWFya2Rvd25dKGh0dHBzOi8vc3VwcG9ydC4xcGFzc3dvcmQuY29tL21hcmtkb3duLykgdG9vLiJ9"

または、ボタンの Base64 エンコードされた値を更新します。

document

.querySelector("onepassword-save-button")

.shadowRoot.querySelector("button[data-onepassword-save-button]")

.setAttribute("value", encodedSaveRequest);

ページにボタンを追加する

2 つの必須属性 (data-onepassword-type と value) を指定して、「Save in 1Password」ボタンをページに追加します。

オプションの属性 (lang、class、data-theme、padding) を追加して、ボタンの言語、色、テーマ、またはパディングを変更することもできます。

属性	価値
data-onepassword-type	ボタンがCreateするアイテムのタイプ: credit-card, identity, login, or crypto-wallet。
value	Base64 でエンコードされたSave要求。
lang （オプション）	サポートされている言語の 1 つの言語コード。 言語属性が指定されていない場合、パッケージはNavigatorLanguage Web API を使用してブラウザーーの言語を決定します。ブラウザーーの言語がサポートされていない場合、パッケージはデフォルトで英語になります。
class （オプション）	ボタンの色:blackまたはwhite。 クラス属性が指定されていない場合、ボタンの色はデフォルトで青になります。
data-theme （オプション）	明るい背景または暗い背景の Web サイト向けに最適化されたボタン テーマ:lightまたはdark。 data-theme 属性が指定されていない場合、ボタンはデフォルトで明るいテーマになります。
padding （オプション）	ボタンのパディング:normalまたはcompactまたはnone。 値が指定されていない場合、または値が の場合normal、ボタンのパディングはデフォルトで 24 ピクセルになります。値が の場合compact、パディングは 16 ピクセルになります。値が の場合none、パディングは 0 ピクセルになります。

例えば：

<onepassword-save-button

data-onepassword-type="credit-card"

value="eyJ0aXRsZSI6IkFDTUUgQ3JlZGl0IENhcm...=="

lang="en"

class="black"

data-theme="dark"

padding="normal">

</onepassword-save-button>

シングルページ アプリを構築している場合は、activateOPButton()ボタンをアクティブにする関数を呼び出す必要がある場合があります。これにより、ページでカスタム イベントがディスパッチされ、1Passwordに [Save in 1Password] ボタンを有効にするように指示します。

付録: サポートされている言語コード

言語	コード	言語	コード	言語	コード
英語	en	日本語	ja	スペイン語	es
フランス語	fr	韓国語	ko	中国語（簡体字）	zh-CN
ドイツ語	de	ポルトガル語	pt	中国語（繁体字）	zh-TW
イタリア語	it	ロシア	ru