HIKO Social Login Plus

オンラインストアにソーシャルログインとパスワードレスログインを追加します。買い物客は Google、LINE、Facebook、Apple などのプロバイダーでログインしたり、メールや WhatsApp に届くワンタイムコードでログインしたり、パスキーでログインしたりできます——パスワードを覚える必要はありません。すべてのログインは Shopify の顧客アカウントに紐づきます。

このアプリは新しい顧客アカウントを使用している Shopify Plus ストア専用です。他のプランのストア、または従来（レガシー）の顧客アカウントを使用しているストアでは設定がブロックされ、変更が必要な点を説明する通知が表示されます。アップグレードや切り替えを終えたばかりの場合は、アプリを開き直すと再チェックされます。

有料サブスクリプションが必要です。プランと価格は Shopify 自身のサブスクリプションページに表示され、請求も Shopify が行い Shopify の請求書に記載されます——当社が別途請求することはありません。未登録の状態でアプリを開くと、そのサブスクリプションページに直接移動します。サブスクリプションが有効になると、すべての設定ページが利用可能になります。

開発ストア（Plus サンドボックスを含む）にサブスクリプションは不要で、全機能をそのまま使えます。まず構築してテストする用途に適しています。

インストール画面では 3 つの権限を求めます。それぞれが実際の機能に対応しています：

• read_customers — メールアドレスで既存の顧客を探し、ソーシャルログインを重複作成ではなく既存アカウントに接続します。
• write_customers — ログイン時のマーケティング同意チェックをその顧客の Shopify マーケティング同意設定に同期し、ソーシャルアイデンティティのタグとメタフィールドを書き込みます。
• read_locales — ストアの主要言語を読み取り、正しい言語でメールを送信します。

顧客データは Shopify では保護された顧客データにあたるため、これらの権限には追加の承認が必要です。権限がないと、マーケティング同意の同期と既存顧客のマッチングは動作しません。

• ダッシュボード — セットアップガイド、ログインアクティビティの概要、直近 7 日間のログイン推移。サイドバーのアプリ名をクリックするとここに戻ります。
• 顧客分析 — 顧客一覧と個別のログイン履歴、推移グラフとアクティビティの内訳。
• IDプロバイダー — ログイン設定のほとんどはここにあります：カスタムプロバイダー（顧客アカウントとの連携）、ソーシャルメディア、カスタムスタイル、メールログイン、Marketing opt-in、マーケティングプラットフォーム、ソーシャルログインアイデンティティ。
• ストアフロントウィジェット — オンラインストア上でのログインの見せ方と、ログイン後の遷移先。
• Integrations — Shopify Admin API、送信 webhook、ヘッドレスとモバイルのログイン。
• 翻訳 — 各言語のウィジェットと認証（OTP）ページの文言。

これが必須の設定ステップです。このアプリ自体が、Shopify と通信する ID プロバイダーになります：

1. IDプロバイダーページ（またはダッシュボードのセットアップガイド）を開き、カスタムプロバイダーセクションを見つけます。
2. カスタムプロバイダーを作成をクリックして Shopify 管理画面 → 設定 → 顧客アカウントを開き、サードパーティ ID プロバイダーを追加します。"Custom or other" を選び、名前を付けます。
3. アプリに表示されている Discovery URL、Client ID、Client secret を対応する項目にコピーし、サインアウト後のリダイレクト URI パラメーター名を表示された値（post-sign-out）に設定します。この項目は飛ばさないでください——抜けるとサインアウトが不完全になります。
4. 保存し、そのプロバイダーを有効化します。
5. アプリに戻り、設定をチェックをクリックします。実際のストアフロントを確認し、連携が有効か、Client ID が古くないか、ストアがまだ別の場所を指していないかを教えてくれます。

1. IDプロバイダーページのソーシャルメディアセクションを開きます。
2. 追加したいプロバイダー（例：Google）を展開し、Client ID と secret の取得方法をクリックして手順を確認します。
3. そのプロバイダーのコンソールで OAuth アプリを作成し、Client ID と Client secret をコピーして貼り付け、プロバイダーを有効にします。
4. 保存をクリックします。

各プロバイダーのセットアップガイドは正しいコンソールに直接リンクし、必要な手順を列挙します。プロバイダーの並び順もこの一覧でそのままドラッグして変更でき、右側のプレビューが即座に反映します。

16 のソーシャルプロバイダー：Google、Facebook、Apple、LINE、Kakao、X (Twitter)、TikTok、Amazon、Twitch、Microsoft、Yahoo、LinkedIn、Discord、Spotify、GitHub、Yandex。さらにメールワンタイムコード、パスキー、WhatsApp ログインにも対応します。ウィジェットに表示する方法と並び順は自由に選べます。

はい。すべてのプロバイダーで自前の OAuth Client ID と secret を使えます——ロックインはなく、同意画面には自社のブランドが表示されます。一部のプロバイダーには追加オプションがあります：Apple のキー情報、Amazon のリージョン、LINE の友だち追加プロンプト、Kakao のチャンネルとスコープ、Google のアイコンスタイル選択。

はい。しかも開発ストアにサブスクリプションは不要です。2 点だけ注意してください：

• パスワード保護されたストアフロントでは「設定をチェック」が判定できません。 ログインがこのアプリに向いているかを判断するには実際のストアフロントへ到達する必要があり、パスワードで遮られると「自動チェックできません」と報告されます——設定が間違っているという意味ではありません。
• プロバイダーの OAuth アプリには、通常テストストアのドメインも登録が必要です。本番とテストの両方で Callback URL が登録済みか確認してください。

はい。買い物客は WhatsApp でワンタイムコードを受け取ります。当社の共有番号ですぐ始めることも（1 人あたり 1 日 10 通、1 ストアあたり 1 日 2000 通、費用は当社負担）、IDプロバイダーページで自社の WhatsApp Business 番号を接続して、送信・メッセージテンプレート・テンプレートボタンの種類・ストアごとの上限・請求を自分で管理することもできます。

メールログインは、メールに届いたコードでログインできる仕組みです（パスワード不要）。認証が完了すると、アプリはパスキー（Face ID、指紋、端末の PIN）の作成を提案します——パスキーはワンタイムコードの後のアップグレードであり、独立したログイン手段ではありません。どちらもIDプロバイダーページのメールログインセクション（またはダッシュボードのセットアップガイド）で個別に切り替えられます。

はい。IDプロバイダーページのメールログインセクションで：

• カスタム SMTP — 自社のメールサーバー（Outlook / Office 365 を含む）からワンタイムコードを送信し、当社ではなくお客様から届いたように見せられます。入力後はテストメールを送信で設定を確認できます。
• カスタム OTP メール — 件名と HTML 本文を言語ごとに編集できます。ビジュアルと HTML の 2 つの編集モード、ライブプレビュー、{code}、{shop}、{minutes} などのプレースホルダーが使えます。カスタマイズ済みの言語には「カスタマイズ済み」と表示され、いつでもデフォルトに戻すことができます。

はい。同じメールログインセクションのカスタム OTP ページで、認証ページ全体の HTML を言語ごとに書き換えられます——見出し、コード入力欄、再送リンクまですべてです。編集モードもビジュアルと HTML の両方が使えます。ログインに実際に必要な要素が HTML に欠けている場合は保存が拒否され、何が足りないかが表示されます。公開中のページには影響しません。

さらにOTP ページを自社ストアフロントでホストするというトグルもあります。オンにすると、買い物客は当社のドメインではなく、お客様自身のドメイン・テーマの中でコードを入力します。既定はオフで、アプリがインストールされたオンラインストアのテーマが必要です。

One Tap は、まだログインしていない買い物客に Google のワンクリックログインのプロンプトを表示します。既定はオフです——Google の設定が完了したら、ダッシュボードまたはIDプロバイダーページの Google の行からオンにできます。

オンラインストア上のログインウィジェットを使います。ソーシャルプロバイダーを選ぶか、メールアドレス（または WhatsApp 番号）を入力してワンタイムコードを受け取ります。認証が済むとストアにログインし、次回からワンタップで戻れるようパスキーを設定することもできます。ウィジェットは、その買い物客が前回ログインに成功した方法に「前回使用」バッジを付けるので、再訪時にすぐ見つけられます。

設定したログイン方法がそのまま表示されます。 このアプリは顧客アカウントに ID プロバイダーとして登録されているため、ログインに至るあらゆる経路——チェックアウト、アカウントリンク、URL の直接入力——を Shopify がこのアプリに引き渡します。

アプリは順に試みます：まだ有効な「ログイン状態を保持」セッションがあれば、そのまま無音でログインを完了します。できない場合は当社がホストするログインページを表示しますが、そこに載るのはストアフロントとまったく同じウィジェットです——同じプロバイダー、同じスタイルと文言。この経路のために追加設定は要りません。

Shopify はすべてのログインに確認済みのメールアドレスを必須としており、なければそのログインをブロックします。X (Twitter)、TikTok などのプロバイダーは、必ずしもメールアドレスを返しません。

その場合、アプリはプロバイダーの認可完了後にステップを 1 つ挟みます：買い物客がメールアドレスを入力してワンタイムコードで確認し、それから Shopify のログインが作成されます。同じ人が次に同じプロバイダーを使うときは、もう入力を求めません——この対応づけを記憶します。これらのプロバイダーだけ Google よりステップが 1 つ多く見えるのはこのためです。

メールアドレスが同じならなりません。 顧客は確認済みメールアドレスで識別されるため、先に Google、後で Facebook を使った同じ人は、両方のメールアドレスが同じである限り 1 人の顧客です。ログイン回数は加算され、顧客分析にも 1 行だけ表示されます。

メールアドレスが違う場合は 2 人の顧客になります——同一人物である証明ができないため、これは意図した挙動です。統合するには、ストアフロントウィジェットページで異なるメールアドレスでのアカウント連携を許可を有効にしたうえで、顧客自身がアカウントページの連携済みログイン方法から連携してもらいます。

既存の顧客に接続され、重複は作られません。照合はメールアドレスで行われます：ソーシャルアカウントの確認済みメールアドレスがストア内の既存顧客と一致すれば、そのログインはその顧客としてのログインになり、注文履歴も住所もそのまま残ります。

はい。ストアフロントウィジェットページからアカウントページブロックを追加すると、ログイン済みの顧客は顧客アカウントのプロフィールページで連携済みのログイン方法を確認し、解除したり新しく連携したりできます。

同じセクションには異なるメールアドレスでのアカウント連携を許可というトグル（既定はオフ）もあります。オンにすると、確認済みメールアドレスがアカウントのメールアドレスと異なるソーシャルアカウントも連携でき、以後それでログインすると同じアカウントに解決されます。プロバイダー自身のメールアドレスを上書きするため、顧客が本人所有のアカウントだけを連携すると信頼できる場合にのみ有効にしてください。

方法は 4 つあり、いずれもストアフロントウィジェットページで設定します：

• アカウントアイコンのポップアップ — テーマで有効化をクリックしてテーマエディタの「アプリ埋め込み」を開き、Sign-in widget をオンにして保存します。以後ヘッダーのアカウントアイコンをクリックするとログインポップアップが開きます。テーマの構造が特殊な場合は、アカウントコントロールセクションにカスタム CSS セレクタを入力するか、自動検出をスキップして自分のセレクタだけを使うこともできます。
• ログインページ — テーマから /apps/signin にリンクすると（例：ヘッダーメニュー項目）、フルのホスト型ログインページが開きます。
• ログインカードブロック — テーマエディタの「アプリ」タブから、インラインの Sign-in アプリブロックを任意のセクションに追加します。
• 連携済みログイン方法 — アカウントページブロックを追加すると、ログイン済みの顧客がプロフィールページで連携済みのソーシャルログイン方法を確認・解除できます。

既定ではテーマ本来のリンクのままです。独自の会員ページがある場合は、ストアフロントウィジェットページでログイン時のアカウントページリンク（ストア内のパス、例：/a/accounts）を設定すると、ログイン済みの顧客がヘッダーのアカウントアイコンを押したときにそこへ移動します。

はい、ストアフロントウィジェットページで設定します。ログイン後のリダイレクトは、ログインした元のページ、その前に見ていたページ、または指定したパスから選べます（注：この設定にかかわらず、Google One Tap は常に元のページに留まります）。ログイン状態を保持（SSO セッション）を使うと、再訪した顧客は設定した期間（1〜90 日、既定は 30）ログイン状態を保ち、訪問のたびに再認証する必要がなくなります。Shopify 本来のセッション期間に一切手を加えない設定も選べます。

はい。IDプロバイダーページのカスタムスタイルセクションで：テーマ、ボタンの形、サイズ、レイアウト（アイコン／ラベル／アイコン＋ラベル／ラベルとアイコン右寄せ）、アイコンサイズ、区切り線——さらに詳細オーバーライドで背景色と枠線色、枠線の太さ、ボタンの高さ、アイコンとラベルのサイズ、ラベルの太さと色も指定できます。

より細かく制御したい場合はカスタム CSS をオンにします。現在の設定から、コメント付きの完全な CSS テンプレート（.hs-btn、.hs-lbl などのクラス）が出発点として生成されるので、それを編集してください。設定から再生成することもいつでも可能です。背景・枠線・ボタンの高さは CSS ではなく上の項目で設定してください。変更はすべて隣のプレビューに即座に反映されます。

はい。IDプロバイダーページで任意のプロバイダーを展開するとボタンテキストの項目があり、言語ごとに設定できます——たとえば Google のボタンを日本語と英語で違う表現にできます。空欄のままにすると組み込みの翻訳が使われます。

はい。ウィジェットは 15 言語に対応し、各買い物客のオンラインストアの言語に自動で追随します。翻訳ページでは、ログインウィジェットと認証（OTP）ページの任意の文字列を言語ごとに上書きでき、一覧にない言語を追加することもできます。「デフォルトに戻す」でその言語を組み込みの文言に一括で戻せます。マーケティングと同意チェックボックスの文言は、代わりにIDプロバイダーページの Marketing opt-in セクションで直接編集します（こちらも言語ごとで、HTML が使えます）。

アプリの管理画面自体も 11 言語に対応しており、ヘッダーの言語メニューから切り替えられます。

体感できるほどの影響はありません。ウィジェットは単一のバンドルファイルで、Shopify 自身の CDN から defer 付きで読み込まれます——ページの描画後に実行され、初回描画をブロックしません。ポップアップとカードブロックは同じファイルを共有するため、1 ページで読み込まれるのは 1 回だけです。さらに、すでにログインしている顧客にはログインカードブロックがそもそも出力されません。

はい。IDプロバイダーページの Marketing opt-in セクションで設定します。ログイン時の「最新情報とお得な情報をメールで受け取る」チェックボックスは、買い物客の Shopify マーケティング同意設定に同期します。あらかじめチェックを入れるかどうか（注：EU／英国の GDPR・ePrivacy ではあらかじめチェックを入れることは認められていません）、チェックを外したときに購読を解除するかどうかを選べます。同じセクションで、ログイン前に利用規約への同意チェックボックスを必須にすることもできます。どちらのチェックボックスの文言とリンクも、ここで言語ごとに編集します。

まだ存在しない新規顧客がチェックを入れた場合、その同意はいったん保留され、Shopify が実際にその顧客を作成したときに適用されます——登録直後の顧客にすぐ同意状態が表示されないのは正常で、取りこぼしではありません。

はい。IDプロバイダーページのマーケティングプラットフォームセクションで、API キーを使って Klaviyo、Mailchimp、Omnisend に接続します。「キーを検証」で接続を確認してから「リストを取得」で顧客を追加するリストを選び、ログインのたびに全員を同期するか、オプトインした買い物客だけを同期するかを選べます。同期した顧客に social-login や独自のタグを付けたり、Klaviyo にソーシャルログインと Google One Tap のログイン指標を作成したりもできます。

はい。IDプロバイダーページのソーシャルログインアイデンティティセクションで：

• タグ — ソーシャルログインした顧客に自動でタグを付けます。テンプレートの既定は uid_%(social)s_%(user_id)s で、使える変数は %(social)s と %(user_id)s です。（IP は意図的に用意していません。ログインのたびに変わり、Shopify の顧客あたり 250 タグの上限を使い切ってしまうためです。）
• 顧客メタフィールド — 常時オンです：ソーシャルログインのたびに、プロバイダー、ユーザー ID、名前、連携日時を JSON で顧客メタフィールドに書き込みます。テーマからは {{ customer.metafields.hiko.social_identities }} で読み取れます。

はい。Integrations ページで：

• ヘッドレスとモバイルのログイン — Customer Account API の OAuth クライアントと許可オリジンを設定すると、ヘッドレスの Web ストアフロントとネイティブモバイルアプリ（React Native、iOS、Android）にソーシャルログイン、メール OTP、生体認証ログインを追加できます。ページには Client ID の取得手順、モバイルアプリのカスタム URI スキームの説明、各 SDK と GitHub リポジトリへのリンクがあります。
• Shopify Admin API — 自分で作成したアクセストークンで顧客とそのメタフィールドを読み取るための、すぐ使えるクエリ例を用意しています。

はい。Integrations ページで HTTPS エンドポイントを設定し、customer.login、customer.connected、customer.created の送信 webhook を有効にします。各リクエストは生成した秘密鍵で署名され（X-HIKO-Signature）、テストイベントを送信ボタン、直近の配信履歴、そのまま使える Node.js の署名検証サンプルも用意されています。

顧客分析ページに顧客一覧と個別のログイン履歴が並び、検索・フィルター・CSV エクスポートが使えます。期間ごとのログイン数と、プロバイダー・ブラウザ・OS・国・都市別の内訳も表示されます。顧客をクリックすると詳細——電話番号、タグ、連携済みのソーシャルアイデンティティ——が見られ、必要なら（ログイン履歴ごと）削除できます。ダッシュボードにも直近のログインアクティビティと 7 日間の推移が表示されます。

ここの顧客数は Shopify 管理画面の顧客総数より少なくなるのが普通で、それが正しい動作です。このページはこのアプリ経由でログインした人だけを数えます。チェックアウトやインポートなど他の方法で作成された顧客はここには現れません。

ログインの動作と分析に必要なものだけです：

• 顧客 — メールアドレス、名前、使用したプロバイダーとそこでのユーザー ID、初回／最終ログイン、ログイン回数。
• ログイン履歴 — 各ログインの時刻、プロバイダー、ブラウザ、OS、おおよその位置（国／都市）。
• 一時的な状態 — ログイン中に使う使い捨てのデータ（ログイン選択のヒント、ワンタイムコード、「ログイン状態を保持」セッション）は数分から設定した日数だけ存在し、自動で期限切れになります。「ログイン状態を保持」セッションは保存時に暗号化されています。

ソーシャルプロバイダー側の顧客のパスワードは保存しません。プロバイダーの長期アクセストークンも保持しません。上記の顧客・ログインデータは、その顧客が削除されるか、アプリをアンインストールするまで保持されます（次の 2 つの回答を参照）。

どちらの方法でも対応できます：

• 自分で削除する — 顧客分析ページでその顧客を開いて削除します。顧客レコードとすべてのログイン履歴が一緒に消えます。
• Shopify の手続きを使う — 顧客が Shopify を通じてデータ削除やデータ開示を請求すると、Shopify がこのアプリに通知し、当該顧客のデータをこのアプリから自動的に消去します。追加の操作は不要です。

保存済みの機密値は管理画面ではマスク表示され、平文でブラウザに返されることはありません。保存時に空欄のままにすると「保存済みの値を維持」を意味するため、誤って消えることもありません。webhook の署名鍵は生成した瞬間に一度だけ全文が表示されます——そのときにコピーしてください。

カスタムプロバイダーの Client secret はいつでも再生成できます（確認を求められます）。古い値は即座に無効になるので、生成後は新しい値を Shopify の顧客アカウント設定に貼り直すのを忘れないでください。忘れるとログインが止まります。

アンインストール時点で、すべての設定（プロバイダー、認証情報、スタイル、SMTP、マーケティング）が消去され、ログインセッションも無効になります。顧客とログイン分析のデータは、Shopify の規定に従い、およそ 48 時間後に Shopify からの通知を受けて消去されます。

したがって再インストールはまっさらな状態からのやり直しになります。すべてのプロバイダー認証情報を入力し直し、Shopify の顧客アカウントにあるカスタムプロバイダーも新しい Client ID と secret で設定し直す必要があります。顧客自身は Shopify に残りますが（彼らは当社ではなく Shopify の顧客です）、誰がどのソーシャルアカウントでログインしたかの記録は戻りません。

次の順に確認してください：

• アプリ埋め込みが有効になっていない。 ポップアップにはテーマの「アプリ埋め込み」で Sign-in widget をオンにして保存する必要があります——ストアフロントウィジェットページのテーマで有効化からそこへ直接移動できます。
• アカウントアイコンが認識されなかった。 自動検出はほとんどのテーマをカバーしますが、大幅にカスタマイズされたテーマでは外すことがあります。アカウントコントロールにその要素の CSS セレクタを追加してください。
• 自分自身がログインしている。 ログインカードブロックはログイン済みの顧客には表示されません——シークレットウィンドウでテストしてください。

• カスタムプロバイダーを Save しただけで Activate していない。 これが最も多い原因です。Shopify の顧客アカウント設定で有効になっているか確認し、設定をチェックで検証してください。
• Client ID が古い。 secret を再生成したりアプリを入れ直したりした場合、Shopify 側には古い値が残っていることがあります——設定をチェックが、実際に見えている値を教えてくれます。
• そのプロバイダーの認証情報が未入力。 認証情報のないプロバイダーは一覧で印が付きます。そのボタンは機能しません。

そのプロバイダーに表示されている Callback URL が、表示どおり寸分違わずそのプロバイダーのコンソールに登録されているか確認してください。ストアドメインの callback を使うのは自社の Google client を使う場合だけです。それ以外のすべての場合（当社の共有 Google client を使う場合を含む）は、プロバイダーの入力欄の隣に表示されている broker callback を使います。値はそのままコピーしてください。

メール： まず迷惑メールフォルダを確認してもらってください。カスタム SMTP を設定している場合は、テストメールを送信でサーバー設定と送信元アドレスが機能するか確認します——送信ドメインに適切な認証レコードがないと、簡単に迷惑メール扱いされます。また、1 つのメールアドレスが受け取れるのは1 日あたり最大 20 コードで、上限に達すると買い物客にその旨が直接表示されます。

WhatsApp： 自社番号を使う場合、メッセージテンプレートは Meta が承認した認証テンプレートである必要があり、テンプレートの言語コードも入力した値と一致していなければなりません。共有番号の場合の上限は 1 人あたり 1 日 10 通、1 ストアあたり 1 日 2000 通です。

ほとんどの場合、サインアウト後のリダイレクト URI パラメーター名が設定されていないことが原因です。「ログイン状態を保持」を有効にすると当社側でもその買い物客を別に記憶するため、その記憶を消すには Shopify からサインアウト時に通知を受ける必要があります。

Shopify 管理画面 → 設定 → 顧客アカウントに戻り、カスタムプロバイダーを開いて、その項目が post-sign-out（アプリに表示されている値と同じ）になっているか確認してください。保存してから、もう一度サインアウトを試します。

ヘッダーのサポートボタンからメッセージをお送りください（添付ファイルも可）。メールで返信いたします。