Shopify新しいお客様アカウントでLINEログインを設定する方法（OIDC対応）
はじめに
Shopifyの新しいお客様アカウントでは、従来のMultipassではなく、**OIDC（OpenID Connect）**でLINEログインを連携します。
StoreCRMのOIDC機能を使うことで、新しいお客様アカウントでもLINEログインを実現できます。
従来のお客様アカウントをご利用の方は以下の記事を参考に設定してください。
LINEログインでShopifyの会員登録やログインを実現する方法
本記事では無料テーマのDawnテーマにて解説をおこないます。
有料テーマやカスタマイズがはいったテーマはファイル構成が異なる場合がありますのでその際はStoreCRMカスタマーサポートに問い合わせいただくことで、実装代行等可能です。
お問い合わせフォームからご気軽にご相談ください。
【注意事項】
本記事で解説しているLINEログインの機能はShopify Plus限定の機能になります。 Shopify Plusを検討されている事業者へのサポートもおこなっているので、お問い合わせフォームからご気軽にご相談ください。
関連ページ
対象
- Shopify Plusをご利用中のストア
- Shopifyの「新しいお客様アカウント」を利用しているストア
- StoreCRMでLINE連携設定ができる権限を持つ方
事前に知っておきたいこと
- 従来アカウント向けのLINEログイン設定とは手順が異なります。
- 新しいお客様アカウントではMultipassは使えないため、OIDC設定が必要です。
- 従来アカウントを利用中の場合は、従来手順の記事をご利用ください。
本項目のゴール
まずは今回実装する、会員登録画面のを確認しましょう。Shopify標準のログイン・会員登録がまるまる上記画像の画面に切り替わるイメージです。
StoreCRMでOIDC連携を有効化する
➀StoreCRM管理画面で[設定] > [LINE設定]を開きます。
➁ [OIDC連携設定（新Customer Accounts）]セクションで[OIDC連携を有効にする」をクリックします。
③生成された以下の値を控えます。
・Discovery URL
・Client ID
・Client Secret
・Post-sign-out redirect URI parameter name（post_logout_redirect_uri）
Shopify側でIDプロバイダーを接続する
①[設定]>[お客様アカウント]>[認証]の[管理]を開きます。
②[IDプロバイダー]>[プロバーダーを管理]を開きます。
③「プロバイダーに接続」をクリックします。
④以下のポイントを守って入力します。
IDプロバイダー名は 任意の名前でStoreCRMのプロバイダであることがわかるようにする。
プロバイダー種別は[カスタムまたはその他]
⑤先ほどStoreCRM側で控えておいた各値を対応する項目に入力します。
・Discovery URL ⇔ Well-knownまたはディスカバリーエンドポイントURL *
・Client ID ⇔ クライアントID
・Client Secret ⇔ クライアントシークレット
・Post-sign-out redirect URI parameter name ⇔ ログアウト後のリダイレクトURIパラメーター名 *
※追加スコープ (openidおよびemail以外)は空です
⑥保存を選択します。
Shopifyから表示されたURLをStoreCRMへ戻して保存する
①ShopifyのIDプロバイダー設定画面に表示される「コールバックURL」「ログアウトURL」を控えておきます。
②StoreCRM側の設定画面にもどり、[コールバックURL][ログアウトURL]をすべて登録します。
※それぞれ一つではなく、すべて登録します。
③ログイン画面に表示されるストアロゴと各種のストアページのリンクを設定します。
④設定が終了したら[保存]をクリックします。
LINE DevelopersにコールバックURLを設定する
①StoreCRMのLINE設定画面の最下部にある、[LINE ログイン コールバックURL]を控えておきます。
②LINE Developersを開き、[LINEログインチャネル]>[LINEログイン設定]のタブを開きます。
※LINE Developers→https://developers.line.biz/ja/
※事前にLINE連携設定が完了している必要があります
③コールバックURLの[編集]をクリックし、控えておいたURLを入力します。入力後、忘れずに[更新]をクリックします。
動作確認
①ここまでの設定が完了したら、接続テストを行い正しく設定ができているかを確認します。
まずは、[有効化]クリックして、プロバイダーの有効化を行います。
！！ 本来、接続テスト→確認OK→有効化が想定手順ですが、現在のShopifyの挙動として有効化を行わないと接続テストができなくなっています。
有効化すると、プロバイダーがStoreCRMのものに切り替わってしまうため、注意してください。一度開発ストア等で動作を確認してから本番ストアで適用することをおすすめいたします。！！
②有効化が完了したら、接続テストを行い正しく設定ができているかを確認します。
[接続をテスト]をクリックします。
③StoreCRM提供のログイン画面が出てくるので、メール or LINEで認証テストをおこないます。
④LINE とメアド認証を行い、注文ページに遷移することが確認できたら設定完了です。
よくあるつまずき
- Client Secret を再生成した場合: Shopify側のSecretも必ず更新が必要です。
- ストア独自ドメイン変更後: Shopifyが発行するCallback/Logout URLが変わることがあるため、StoreCRM側の再設定が必要です。
- 従来アカウント手順のまま進めた場合: 新しいお客様アカウントでは正常に動作しません。OIDC手順で設定してください。
まとめ
「新しいお客様アカウントでもLINEでログインできるって便利だな」と思ってもらえるだけで、会員登録のハードルは一気に下がります。
StoreCRMでは、OIDC対応によってこの“ちょっとの便利”が、売上アップやリピーターの増加に繋がる仕組みになっています。
まだ新しいお客様アカウントでLINEログインを使っていない方は、ぜひStoreCRMでかんたん導入をはじめてみてください。
